domains / families / design / build-threejs-scroll-worlds

build-threejs-scroll-worlds

separate

Build rich, scroll-controlled real-time Three.js experiences as one persistent 3D world whose camera, lighting, atmosphere, materials, objects, DOM story, and interactions evolve across authored chapters. Use for 3D scrollytelling, scroll-driven WebGL worlds, camera journeys, interactive portfolios, product stories, exhibitions, explainers, game or film microsites, spatial narratives, and multi-scene websites where native scroll should travel through one continuous place. Not limited to landing pages.

When to use

• 3D scrollytelling
• scroll-driven WebGL worlds
• camera journeys
• interactive portfolios
• product stories
• exhibitions
• explainers
• spatial narratives

When not to use

• single interactive scene with no scroll-authored journey
• deciding between real-time 3D, pre-rendered video, and DOM-first storytelling
• video or image sequence whose time is scrubbed by scroll
• DOM-first GSAP/Lenis choreography
• disguising a video as Three.js

Skill page

Source