Helios is the pattern behind every car-brand configurator: a real 3D asset in a studio scene, with paint, wheels and interior wired to the model’s actual material slots. It maps directly to product pages — swap the car for a sofa, a sneaker, or a watch and the code barely changes.
What it demonstrates
Loading a real, openly-licensed glTF model (the DRACO-compressed three.js Ferrari example, under 2 MB) instead of building geometry by hand.
Three live option groups — any paint colour in two finishes, three wheel finishes, four interiors (three leathers and a grigio Alcantara) — each mapped to material slots the model genuinely has, verified by inspecting the scene graph at runtime. No faked options.
Studio presentation: a real sunset HDRI and a few studio softbox strips light and reflect in the car on a dark stage, with a baked contact shadow and a dim floor reflection grounding it.
The techniques, honestly named
glTF + DRACOLoader. The car is the three.js example “Ferrari 458 Italia” model (CC-BY, by vicent091036), which already ships as DRACO-compressed glTF. Decompression runs in the browser via the hosted decoder.
Retargeting by the right key. Every mesh's object and material name is logged at runtime first; the options bind to what is really there. The paint is the single Body_Color material on the one body mesh. The rims share the metal_gray material with the brake discs and chassis metal, so they can't be retargeted by material name — they retarget by object name (rim_fl/fr/rl/rr and the wheel faces). The seat Leather material takes the configurable colour while the dash and cowl keep their factory finish, so every option still reads as a two-tone cabin — and because this is an open-top Spider, the interior is fully in view. The Alcantara option is the same slot with a suede treatment: roughness pushed to 0.92 plus a sheen lobe on the MeshPhysicalMaterial. The windshield glass exports opaque-milky (its transparent flag off) and gets a reflective tint, the milky headlight covers become clear glass, and every material loads flat at metalness 0.2, so the chrome and body metals get their metalness restored.
Custom paint + finish presets. A native colour input drives the body colour; a Metallic/Gloss toggle swaps metalness, roughness, clearcoat-roughness and reflection intensity together, and every change lerps over a few frames.
Studio-lit reflections. The environment is built with PMREMGenerator from a real sunset HDRI (venice_sunset_1k.hdr, via RGBELoader) plus a few bright emissive softbox strips. The strips are what the glossy clearcoat actually mirrors, so the paint shows a crisp specular hotline down the hood and roof instead of reading flat. There are still no analytic lamps — every highlight is a reflection of the environment — with ACES tone mapping at 0.82 exposure so the deep colours stay saturated against the dark stage.
Grounding. A soft elliptical contact shadow — painted once into a canvas and multiplied over the floor — sits under the car, and a mirrored clone of the car beneath a near-opaque dark floor disc gives a dim live reflection that follows every paint change.
Auto-orbit handover.OrbitControls auto-rotates until the first drag; the rotate speed lerps to zero and back, so the handover has no visible seam. Scroll-wheel and pinch zoom stay enabled, clamped so you can move in for detail without clipping inside the bodywork or flying away.
Auto-framing. The default camera position is computed from the model's bounding box for a pulled-back hero — the whole car with studio breathing room — so the composition survives any replacement asset, and starts farther back on phones.
Recreate it
The full recreation prompt — the exact scene setup, the material-slot map of the model, all option presets, and the quality bar — is in the showroom vault.