threejs-scroll-cinemalisted

# Three.js Scroll Cinema Build scroll-driven 3D experiences that feel like one continuous cinematic shot. Three.js for the scene, GSAP + ScrollTrigger for the timeline. ## When to use - WebGL hero with camera dolly/zoom on scroll - Product page where the model rotates/reveals as user scrolls - Layered-image parallax that mimics depth without a full 3D model - Multi-section storytelling stitched as a single camera path ## When NOT to use - Static 3D viewer with no scroll → just `OrbitControls`, no ScrollTrigger - Pure 2D parallax → use `framer-motion` skill instead - Video playback synced to scroll → use plain `<video>` + ScrollTrigger - Heavy game-like physics → out of scope ## Stack contract ``` three ^0.160 (or latest) gsap ^3.12 gsap/ScrollTrigger (optional) @react-three/fiber + @react-three/drei // for React projects (optional) lenis ^1.0 // for smooth scroll ``` R3F note: if the project already uses React, prefer `@react-three/fiber`. Use `useScroll` from `@react-three/drei` for scroll progress; ScrollTrigger still works but R3F's render loop owns the canvas. ## The 7-step recipe 1. **Plan the scroll** — sketch what camera does at scroll % 0, 25, 50, 75, 100. Write each keyframe as `position`, `lookAt`, `fov`. 2. **Prompt for assets** — depth maps for parallax, glTF for models, HDRI for environment lighting. 3. **Install** — `npm i three gsap` (+ R3F if React). 4. **Wire scroll → scene state** — single Scroll