--- name: web3d-integration-patterns description: Meta-skill for combining Three.js, GSAP ScrollTrigger, React Three Fiber, Motion, and React Spring for complex 3D web experiences. Use when building applications that integrate multiple 3D and animation libraries, requiring architecture patterns, state management, and performance optimization across the stack. Triggers on tasks involving library integration, multi-library architectures, scroll-driven 3D experiences, physics-based 3D animations, or complex interactive 3D applications. --- # 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:** ```javascript // App.jsx - React root import { useEffect, useRef } from 'react' import { initThreeScene } from './three/scene' import { initScrollAnimations } from './animations/scroll' import { motion } from 'framer-motion' function App() { const canvasRef = useRef() const sceneRef = useRef() useEffect(() => { // Initialize Three.js scene sceneRef.current = initThreeScene(canvasRef.current) // Initialize GSAP ScrollTrigger animations initScrollAnimations(sceneRef.current) // Cleanup return () => { sceneRef.current.dispose() } }, []) return (

) } ``` ```javascript // three/scene.js - Three.js setup import * as THREE from 'three' import { OrbitControls } from 'three/addons/controls/OrbitControls.js' export function initThreeScene(canvas) { const scene = new THREE.Scene() const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000) const renderer = new THREE.WebGLRenderer({ canvas, antialias: true, alpha: true }) renderer.setSize(window.innerWidth, window.innerHeight) renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)) const controls = new OrbitControls(camera, canvas) controls.enableDamping = true // Setup scene objects const geometry = new THREE.BoxGeometry(2, 2, 2) const material = new THREE.MeshStandardMaterial({ color: 0x00ff00 }) const cube = new THREE.Mesh(geometry, material) scene.add(cube) // Lighting const ambientLight = new THREE.AmbientLight(0xffffff, 0.5) scene.add(ambientLight) const directionalLight = new THREE.DirectionalLight(0xffffff, 1) directionalLight.position.set(5, 10, 7.5) scene.add(directionalLight) camera.position.set(0, 2, 5) // Animation loop function animate() { requestAnimationFrame(animate) controls.update() renderer.render(scene, camera) } animate() // Resize handler window.addEventListener('resize', () => { camera.aspect = window.innerWidth / window.innerHeight camera.updateProjectionMatrix() renderer.setSize(window.innerWidth, window.innerHeight) }) return { scene, camera, renderer, cube } } ``` ```javascript // animations/scroll.js - GSAP ScrollTrigger integration import gsap from 'gsap' import { ScrollTrigger } from 'gsap/ScrollTrigger' gsap.registerPlugin(ScrollTrigger) export function initScrollAnimations(sceneRefs) { const { camera, cube } = sceneRefs // Animate camera on scroll gsap.to(camera.position, { x: 5, y: 3, z: 10, scrollTrigger: { trigger: '.content', start: 'top top', end: 'bottom center', scrub: 1, onUpdate: () => camera.lookAt(cube.position) } }) // Animate mesh rotation gsap.to(cube.rotation, { y: Math.PI * 2, x: Math.PI, scrollTrigger: { trigger: '.content', start: 'top bottom', end: 'bottom top', scrub: true } }) // Animate material properties gsap.to(cube.material, { opacity: 0.3, scrollTrigger: { trigger: '.content', start: 'top center', end: 'center center', scrub: 1 } }) } ``` **Benefits:** - Clear separation of concerns - Easy to reason about data flow - Performance optimization per layer - Independent testing of layers **Trade-offs:** - More boilerplate - Manual synchronization between layers - State management complexity --- ### Pattern 2: Unified React Component (React Three Fiber + Motion) **Use case:** React-first architecture with declarative 3D and animations **Architecture:** ``` React Component Tree ├──

3D Experience

React-First 3D Experience

web3d-integration-patterns

Install this skill

Comments