Scroll-Driven 3D Camera Path Journey

What this builds

A full-viewport Three.js scene pinned to the screen while the user scrolls. Scroll progress drives the camera along a predefined 3D path (CatmullRom or cubic Bezier curve) through the scene, with the camera's position and look-at target interpolated along the curve. Waypoints along the path trigger HTML overlay panels (text, stats, CTAs) that fade in and out at specific scroll positions. The result is a virtual tour, product environment walkthrough, or data landscape fly-through.

• Three.js scene with a WebGLRenderer, pinned behind HTML overlays
• Camera position interpolated along a CatmullRom3 curve from scroll progress (0-1)
• Camera look-at target following a separate (or offset) path for smooth gaze direction
• 3-8 waypoints along the path, each triggering an HTML overlay panel with its own entrance/exit choreography
• GSAP ScrollTrigger driving scroll-to-progress mapping and waypoint triggers
• Fog, lighting, and post-processing shifts at act boundaries
• Mobile: reduced geometry, no post-processing, optional 2D parallax fallback if WebGL unavailable
• prefers-reduced-motion: static scene render at the midpoint of the path, no scroll driving