Web3D: Interactive 3D Website Built in Three.js
Alex Andrew
1 collaborator
The brief
Sell 3D websites by being one. A concept site for my own studio offer: the product model is the hero. It starts in the dark, assembles as you scroll, the lights come up, and the page itself orbits around the model so every section is a new camera angle.
What I built
Scroll-driven assembly. The model's animation is sampled straight from the GLB keyframes: scrolling forward builds the model, scrolling back takes it apart.
Play and pause. Stop scrolling and the airborne pieces start to float and slowly spin. Move again and they ease back to their keyframe on a custom curve, then keep building.
Pointer-reactive pieces. While floating, parts are pushed away, tilted and scaled as the cursor or a finger passes near them.
Orbital layout. The copy lives on CSS3D panels placed on a ring around the model. Seven camera stops, lights that come up with the scroll, a floor that catches the shadows.
Inspect mode. Once assembled, click and drag rotates the model only, with inertia. A rotate badge tells the visitor it is interactive.
Responsive. On phones the panels move under the model and the framing pulls back; touch drives the same interactions.
Stack
Three.js, WebGL, CSS3DRenderer, Vite, textured GLB exported from Blender, deployed on Vercel. No UI framework: about 160 KB of gzipped JavaScript and one 320 KB model.
Result
A site that demonstrates the service in sixty seconds of scrolling and ends on a single call to action. It is the third piece of a series on scroll-driven 3D: a vertical funnel (Stepwise), a multidirectional product site (Kubik) and this orbital site. Same pipeline, three formats, so a client can pick the one that fits their product.
Two more variants
The same engine powers two sister demos built for different briefs: Stepwise, a vertical nurturing funnel where each argument lands with a brick and ends on a booking button, and Kubik, a multidirectional product site where every scroll gesture is one 90 degree move of a Rubik cube and the page slides with it. Both live at web3d-funnels.vercel.app.
Section one: the model waits in the dark. Scrolling switches the lights on and starts the assembly.
Section five, lights on: the camera has orbited most of the way round and the model is assembled. Panels are real CSS3D objects, so they turn in perspective with the camera.
On phones the panels sit under the model, the framing pulls back and touch drives the same float and inspect interactions.
Like this project
Posted Sep 28, 2026
Scroll-driven 3D site: the model assembles, lights come up and the page orbits around it. Three.js, WebGL, click-and-drag inspect mode, fast on phones.
Likes
0
Views
6
Timeline
Sep 23, 2026 - Sep 28, 2026
Collaborators
