mks-immersive-site

Build scroll-driven 3D worlds in vanilla Three.js by defining an environment config and optional keyframes in src/environments. This config drives terrain, sky, weather, and lighting, booting a modular engine to render the scroll-driven scene.

Scroll-driven camera navigation uses CatmullRom curves to plot smooth flight paths through 3D environments. As the user scrolls, the camera follows these predefined curves, creating a cinematic storytelling experience without manual user control.

Yes, you can create multiple 3D worlds using config-driven environment definitions. A music-as-router pattern and MiniPlayer navigation enable seamless world switching and narrative pacing as users explore different scroll-driven scenes.

No, this approach uses vanilla Three.js and Lenis to enable cinematic storytelling without heavy frameworks. It provides teams a scalable pattern for multi-world explorations using a modular, config-driven engine.

Animate atmosphere and lighting by defining keyframes that interpolate over 38 parameters to shape mood and effects. These keyframes are tied to the scroll position, driving atmospheric storytelling as the user navigates.

Manage resources by using two rendering systems: a Canvas 2D entry page and a WebGL 3D world. This enables gate-controlled rendering and resource separation, ensuring the heavy 3D engine only loads when needed.