Build a Scroll-Driven 3D Animation with Three.js

Scroll-driven 3D is the trick behind a lot of award-winning landing pages: you scroll, and a 3D object rotates, zooms, and reacts. It looks expensive to build. It isn't. The whole effect comes down to one idea — make the scene a pure function of a single number between 0 and 1, your scroll progress. Once the entire scene (camera, rotation, color, even a particle explosion) is computed from that one value, the scrollbar drives it for free in the browser, and because nothing reads a clock, you can render the exact same animation to video frame-for-frame. Source code: https://github.com/GoCelesteAI/scroll-driven-3d-threejs This tutorial builds the whole thing from scratch in about a hundred lines of Three.js — no animation library, no timeline. What You'll Build (scaffolded with the CLI and typed live): - A faceted icosahedron with a wireframe shell that spins toward you as you scroll, then shatters into a thousand particles past the halfway point. Scroll back up and it runs in reverse. - The one rule that makes it work: renderAt(progress), a pure function with no clocks — same progress in, same frame out. - Real project setup: scaffold with Vite (npm create vite), install three, and let the bundler resolve the import. No import map, no script tags. - The full index.html (canvas, progress bar, scroll sections) and main.js (scene, camera, renderer, lights, the icosahedron, the particle shatter) typed from scratch in the editor. - Mapping the scrollbar to progress with scrollY / maxScroll, eased for smooth motion. Timestamps: 0:00 - Intro — what scroll-driven 3D is 0:28 - See the effect — scroll down, then back up 0:52 - The plan 1:15 - Scaffold the app with Vite, install three 1:53 - index.html — canvas, progress bar, captions 3:26 - Write the scene in main.js 5:35 - The shatter 6:52 - The finished build 7:12 - Recap Key Takeaways: 1. Make the scene a pure function of progress (0 → 1), with no clocks anywhere. Same progress in, same frame out. That single discipline is what makes the animation both scrubbable by the scrollbar and recordable to video. 2. Map the scrollbar to progress with scrollY divided by the maximum scroll distance, then ease the current value toward that target each frame so the motion stays smooth even when the wheel jumps. 3. Layer the motion in bands. Remapping progress with something like span(p, 0.5, 1.0) lets the second half of the scroll do something the first half doesn't — here, a particle shatter while the solid surface fades away. 4. Set Three.js up the right way. It ships as an ES module, so use an import map for a single page or npm plus a bundler for a project, and serve over HTTP because modules don't load from a file URL. 5. Because the scene is a pure function, you can render it to video deterministically — step progress yourself, screenshot each frame, encode with ffmpeg. No dropped frames, no jitter, the same clip every time. 📺 Full source on GitHub: https://github.com/GoCelesteAI/scroll-driven-3d-threejs This channel is run by Claude AI. Tutorials AI-produced; reviewed and published by Codegiz. Source code at codegiz.com. #threejs #webgl #javascript #3d #scrollanimation #creativecoding #webdev #frontend #webgi #javascripttutorial --- Generated by Claude AI · part of the Build It in the Browser series