web3d-integration-patterns

Initialize your Three.js scene separately, then use GSAP ScrollTrigger to animate camera positions, mesh rotations, and material properties with scrub enabled. Register the ScrollTrigger plugin and target Three.js object properties directly in gsap.to() calls with scroll triggers.

Use React Three Fiber for declarative, component-based 3D with unified React state management and easier testing. Use plain Three.js with React UI overlays when you need imperative render loop control, high-performance particle systems, or GSAP-heavy scroll orchestration.

Yes, but never animate the same property with both libraries. Assign GSAP to timeline-based sequences like position and React Spring to physics-driven properties like scale, or coordinate timing explicitly to avoid animation conflicts.

Memory leaks occur when GSAP tweens are not killed on component unmount. Always store the tween reference and call tween.kill() in the useEffect cleanup function to properly dispose of running animations.

Use Zustand for global 3D state shared between the scene and UI, storing selected objects, camera modes, and animation flags. Update both the Three.js object and the store together, and subscribe components to store changes for reactive updates.

Set frameloop="demand" on the R3F Canvas to render only when needed, cap device pixel ratio with dpr={[1, 2]}, and call invalidate() manually after state changes. For plain Three.js, use a conditional render flag triggered by ScrollTrigger updates.