web3d-integration-patterns

Register the ScrollTrigger plugin, then animate Three.js camera positions, mesh rotations, or material properties inside gsap.to() calls with scrollTrigger configuration using scrub and trigger elements. Initialize the Three.js scene separately and pass its references to the GSAP animation setup.

React Three Fiber suits React-first architectures needing declarative components and unified state management, while vanilla Three.js with GSAP suits scroll-heavy marketing pages needing imperative control. The decision matrix in this Skill maps use cases to the recommended stack.

Yes, but never animate the same property with both libraries simultaneously, as this causes conflicts. Assign each library distinct properties, for example GSAP handles position while React Spring handles scale, or coordinate their timing explicitly.

Use Zustand for global 3D state shared between the scene and UI components. Update both the Three.js object and the store together, and subscribe components to store slices so selection, camera mode, and animation state stay consistent.

Animations leak when tweens or timelines are not killed on component unmount. Always store the tween reference and call tween.kill() or tl.kill() inside the useEffect cleanup function to dispose of running animations.

Use on-demand rendering with frameloop="demand" in React Three Fiber and call invalidate() only when state changes. For vanilla Three.js, coordinate a single render loop with a needsRender flag triggered by ScrollTrigger updates, and cap devicePixelRatio at 2.