What problem does it solve?
Building a scroll-driven 3D website often collapses into stacked sections, hijacked scrolling, or a disguised video, losing spatial continuity, performance control, and accessibility. This Skill provides a complete architecture for one persistent Three.js world where native scroll deterministically conducts camera, lighting, fog, materials, DOM story, and interactions across authored chapters.
Core Features & Use Cases
- Persistent world architecture: One renderer, one scene graph, and a normalized reversible scroll state with separate exact and damped progress values, plus a portable scroll-conductor implementation.
- Authored chapter system: Scene ledgers defining camera position/target/FOV waypoints, Catmull–Rom curves, world-state interpolation, responsive overrides, and per-chapter interaction gating.
- Production-grade quality gates: Performance budgets (DPR, draw calls, triangles, transfer size), progressive asset loading, reduced-motion and WebGL fallbacks, and a full QA checklist covering seams, materials, accessibility, and teardown.
- Use Case: Build an interactive product story or museum microsite where scrolling moves a camera through a continuous 3D environment—such as the bundled Kage Kyoto temple demo—while semantic DOM copy, keyboard-accessible hotspots, and a poster fallback keep the page usable without WebGL.
Quick Start
Use the build-threejs-scroll-worlds skill to turn this landing page concept into one persistent Three.js world with scroll-driven camera chapters, textured landmarks, and synchronized story sections.
