Scroll-Driven 3D: Storytelling with React Three Fiber
LTTrack AEnglish
Phones got fast. A mid-range Android can now render a real 3D scene without breaking a sweat, which means 3D storytelling is no longer a desktop luxury. It is available to nearly every reader. Over the past year I built 3D explainers at The Boston Globe using the same setup every time: React Three Fiber for the scene, Intersection Observer for the scroll. I will show you the pattern: how trigger divs and Intersection Observer drive scene state without fighting React's render cycle, and what it takes to keep it smooth on a phone. Then I will show the example pieces running on it. I will share the component and a Vite starter you can fork.
Daigo Fujiwara-Smith
Daigo Fujiwara-Smith is a Senior Newsroom Developer at The Boston Globe, builds interactive javascript graphics, charts, maps, and data visualizations for the newsroom. He has been making things for the web since tables were for layout. Currently obsessed with React Three Fiber, WebGPU, and getting scroll to behave. Originally from Japan, now in Portland, Maine.