Case 03 / 05 3D showroom Application · 21 routes
Luxury Automotive
Seven real vehicles running in the browser, a configurator that repaints the actual 3D model, and a model payload cut from 272 MB to 19 MB so the first load carries no 3D at all.
- Role
- Direction, design, build
- Routes
- 21
- Vehicles
- 7 in 3D
- Stack
- React · Vite · three.js
01 — Overview
A showroom where everything works
Luxury Automotive is a demonstration marque — the studios, journal and pricing are invented, and the site says so. The engineering underneath is not. Twenty-one routes cover the collection, seven vehicle pages, a performance visualiser, a technology section with a working digital cockpit, a design study, a scroll-driven driving film, a six-step configurator, an editorial journal and a validated enquiry flow.
Filters filter, tabs change content, drive modes redraw the cockpit, colour and wheel choices repaint the 3D vehicle, and the form validates. There are no decorative buttons anywhere on the site.
02 — Design direction
Pearl, carbon, titanium, one vivid red
Four colours carry the whole marque, in fixed proportion: bright pearl surfaces for roughly half the site, carbon for the cinematic quarter, titanium for the metals, and the accent held to about five per cent. Sections declare their own ground, and the header inverts as it crosses from one to the other.
Pearl #F7F7F5 · Carbon #08090B
Light and dark phases alternating on purpose, so a scroll through the site reads as a sequence of rooms rather than one long page.
Vivid #E01D24
The accent, rationed. It marks the primary action and the live figure, and nothing else.
Inter, with mono for the numbers
One scale defined once — hero, display, headline, figure, meta, label, body — and JetBrains Mono reserved for technical metadata, where a specification should look measured.
03 — Key features
The configurator is the product
Six steps, one live vehicle
Model, exterior, wheels, interior, performance, summary — each choice repaints or re-fits the real 3D vehicle, with a running total that follows.
Paint detection that does not repaint the seats
Every GLB names its materials differently, so each vehicle declares which material is bodywork. Without one, the viewer falls back to a heuristic — an obvious name first, then the largest opaque non-glass surface — and if it cannot identify bodywork with confidence it leaves the model alone.
A software renderer for the fallback
A procedural car drawn in real time stands in while a GLB downloads, and stays if one fails or if a vehicle has no model at all. No surface on the site is ever empty.
One data file behind everything
The collection, filters, search, comparison tool, configurator, detail route, sitemap and every 3D surface all read from a single array. Adding a vehicle is one entry and one file.
04 — Technology
272 MB down to 19 MB
The seven vehicles arrived as 272 MB of GLB. Shipping that is not an option, and neither is shipping a worse-looking car, so the compression became its own build step: meshopt geometry compression decoded locally with no CDN, mesh simplification at a tight error tolerance, textures resized to 1024 px and re-encoded as WebP the browser decodes natively, then prune, dedupe and join to cut draw calls.
Material palettes are deliberately not merged — merging renames the materials, and the configurator would lose the bodywork.
The first load carries no 3D
three.js, react-three-fiber and drei sit in a separate chunk that is fetched only when a vehicle is about to enter the viewport. The initial bundle is a fraction of it.
Canvases mount lazily
A viewer stays a lightweight placeholder until it is within about a screen of view, so seven WebGL contexts never compete for the same GPU.
Cached, cloned, disposed
Each GLB downloads once no matter how many places it appears. Instances clone the scene graph and share geometry; only repainted materials are duplicated, and those are disposed on unmount.
Mobile drops quality by itself
Lower pixel ratio, no contact shadows, a smaller environment map, no antialiasing, and pinned scroll sequences that degrade to native scrolling.
Deep links without a server
The build writes a real index.html into every route directory and emits the sitemap, plus host configuration for Apache, Netlify, Cloudflare and Vercel. Deployment is an upload.
05 — Visual showcase
06 — Responsive & accessible
3D that a keyboard can drive
Semantic landmarks and a skip link. Full keyboard operation, with the 360° viewers answering arrow keys. Visible focus rings throughout, labelled fields with alert-role errors and focus management on submit, pressed and checked state on every toggle, filter and swatch, and live regions for result counts.
Under prefers-reduced-motion the choreography collapses, auto-rotation stops, the custom cursor goes and canvases pin to a single frame — and the site stays completely usable.
07 — Note
Luxury Automotive is a demonstration project and is not a manufacturer, dealership or authorised retailer, nor affiliated with any vehicle manufacturer. Marque and model names are trademarks of their respective owners; the specifications shown are the manufacturers' published headline figures, reproduced for illustration.