A scroll-based, interactive 3D web experience built using Three.js, GSAP, and GLTF models, visualizing the burden and mythology of Atlas.
This project is a rich visual tribute to the Greek Titan Atlas, who was condemned to carry the heavens on his shoulders. It combines cinematic visuals, 3D model animations, atmospheric lighting, HDR environments, and scroll-triggered effects to create a storytelling experience across multiple full-screen pages.
Each section (.page1, .page2, .page3, .page4) introduces a new 3D scene or concept, layered with canvas renderers and scroll animations.
| Tool / Library | Purpose |
|---|---|
| Three.js | 3D rendering, GLTF loading, OrbitControls |
| GSAP | Scroll-triggered animation |
| GSAP ScrollTrigger | Scroll-based 3D transitions |
| GLTFLoader | Loads .glb model of Atlas |
| RGBELoader | Loads .hdr environments (HDRI) |
| HTML + CSS | Structure and styling (with custom fonts, hover interactions, animations) |
-
Three Interactive 3D Scenes
- Each rendered in its own
<canvas>layer - Loaded from the same
atlas.glbmodel file - Independent lighting, camera, and animation logic
- Each rendered in its own
-
Scroll-Based Animation
- Uses
GSAP + ScrollTriggerto animate model position and rotation as you scroll - Scene 1: Moves model left off-screen
- Scene 2: Model enters from left and rotates
- Scene 3: Model rotates continuously in HDR environment
- Uses
-
Mouse-Driven Lighting
- Point lights in all 3 scenes move dynamically with mouse cursor
-
HDRI Background
- Scene 3 uses an environment map (
warm_restaurant_night_1k.hdr) for realistic reflection and lighting
- Scene 3 uses an environment map (
-
Animated Marquee Text
- Final page has auto-scrolling text and character-wise
spanhover effects
- Final page has auto-scrolling text and character-wise
-
Custom Fonts & Styling
- Uses multiple Google Fonts to enhance mood and feel
- Blur + hover + selection effects, animated SVG stroke fill, and more
git clone https://github.com/AshmitSherigar/RTJ4D.git
cd RTJ4D
npm install
npm run dev