Web 3D Integration Patterns

Overview

This meta-skill provides architectural patterns, best practices, and integration strategies for combining multiple 3D and animation libraries in web applications. It synthesizes knowledge from the threejs-webgl, gsap-scrolltrigger, react-three-fiber, motion-framer, and react-spring-physics skills into cohesive patterns for building complex, performant 3D web experiences.

When to use this skill:

• Building complex 3D applications that combine multiple libraries
• Creating scroll-driven 3D experiences with animation orchestration
• Implementing physics-based interactions with 3D scenes
• Managing state across 3D rendering and UI animations
• Optimizing performance in multi-library architectures
• Designing reusable component architectures for 3D applications
• Migrating between or combining animation approaches

Core Integration Combinations:

1. Three.js + GSAP - Scroll-driven 3D animations, timeline orchestration
2. React Three Fiber + Motion - State-based 3D with declarative animations
3. React Three Fiber + GSAP - Complex 3D sequences in React
4. React Three Fiber + React Spring - Physics-based 3D interactions
5. Three.js + GSAP + React - Hybrid imperative/declarative 3D

Architecture Patterns

Pattern 1: Layered Separation (Three.js + GSAP + React UI)

Use case: 3D scene with overlaid UI, scroll-driven animations

Architecture:

├── 3D Layer (Three.js)
│   ├── Scene management
│   ├── Camera controls
│   └── Render loop
├── Animation Layer (GSAP)
│   ├── ScrollTrigger for 3D properties
│   ├── Timelines for sequences
│   └── UI transitions
└── UI Layer (React + Motion)
    ├── HTML overlays
    ├── State management
    └── User interactions

Implementation: