A one-page concept for a car detailing studio, built around a single three.js scene.
Live: LUSTRE — detailing atelier
What it does
- The car sits in a dark studio under a hex LED ceiling, like the ones in real detailing bays. A RectAreaLight strip follows the cursor, so you look over the paint the way a detailer does.
- Scrolling (Lenis) moves the camera around the car through the sections: correction, ceramic, film, colour.
- Between sections a polishing line sweeps along the body and switches the finish: hazed → gloss → 9H ceramic → stealth film.
- The colour swatches repaint the body live (chrome, racing green, papaya, Nardo grey, pearl).
How the finish change works
One MeshPhysicalMaterial patched with onBeforeCompile. Each finish is a small parameter set: colour, roughness, metalness, clearcoat, clearcoat roughness, dirt and iridescence. The shader holds two sets, A and B, and mixes them per fragment by world-space z against a uWipe uniform, so the border between old and new finish is a sharp line that travels along the car. A thin emissive glow rides on that line. The “dirt” on the hazed state is two octaves of 3D noise that raise roughness and cut the clearcoat.
Reflections come from a PMREM of a tiny env scene built from the same hex grid and side softboxes, so what you see in the paint matches the ceiling above it.
Performance
- Draco-compressed glTF (the Ferrari 458 from the three.js examples, CC BY 4.0); the hex ceiling is one instanced mesh.
- On touch devices DPR is capped at 1.5 and iridescence is off.
- Time comes only from
requestAnimationFrame, which also lets the page be recorded frame by frame for video.
Happy to answer questions about the paint shader.