Build a lathed procedural vessel in Three.js.
REPRODUCTION NOTES / 03
How VITREOUS 07
was made.
Signature technique: Three.js transmission material + scroll orbit. The page is one dependency-light HTML document with embedded styles and scripts; this guide is a second self-contained document using the same visual language.
Build sequence
Use physical transmission, thickness, and roughness.
Orbit the camera from scroll progress.
Replace motion with a fixed hero pose when requested.
Reproduce it
Copy the parent index.html, preserve the semantic landmarks, then isolate the render loop from the content layer. Keep canvas and 3D surfaces aria-hidden; the story must remain complete without them. Cap device pixel ratio at 2 for expensive scenes, listen to prefers-reduced-motion, and test the final composition at 375px before publishing.
Why this technique
Three.js transmission material + scroll orbit is not decoration here: it carries the site's central metaphor. That alignment between subject and mechanism is what keeps a technical showcase from becoming a demo reel.