A real-time web 3D configurator: rotate a vehicle, swap paint, wheels, and bolt-on accessories, and watch the build price update — no app, no plugin, on any phone.
Live · Ford F-250 · Velocity Blue · Sport 6-Spoke / Bronze · +3 accessories
A shopper or a dealer salesperson sees an accessorized truck in real time in a normal browser — orbit it, change the paint, swap the wheels, add a light bar, running boards, or a bull bar, and the build price updates instantly. Accessories are high-margin; seeing them on the actual truck lifts attach rate.
The prototype proves the hard parts are solved: real-time 3D from a sub-megabyte model, a repeatable pipeline that turns messy free models into clean web assets, a parts system where accessories snap to authored mount points, and live customization driven by material swaps rather than a separate model per option. What remains is scale and polish — not invention.
Two halves: an offline asset pipeline that turns a raw model into a web-ready, riggable .glb, and a runtime that loads it, renders it, and lets the user configure it.
acquire normalize + optimize (Blender, headless) publish ┌──────────┐ ┌────────────────────────────────────────────────┐ ┌────────────────────┐ │ Sketchfab │ │ clean → orient → voxel-cluster → upright → │ │ Cloudflare R2 │ │ Poly Pizza ├──▶ center → scale → decimate → rig anchors → ├──▶ │ served @ │ │ CC0 / CCBY│ │ name materials → Draco export (.glb) │ │ files.servicevision│ └──────────┘ └────────────────────────────────────────────────┘ └────────────────────┘ ▲ one reproducible Python script │ └──────────────── ASSET-MANIFEST.json ────────────────────┘
Voxel-proximity clustering. Free models are "panel soup" — thousands of disconnected shards with a stray spare wheel that wrecks the bounding box. We bin vertices on a 3D grid, flood-fill, and keep the largest blob. One step fixed centering, framing, and removed the spare.
Auto-orient by axis extents, a robust slab-width check to flip an upside-down body, then center and scale to real-world metres (6.2 m for a crew cab) so parts authored in metres line up.
Named empties — Anchor_Roof, Anchor_Step_L/R, Anchor_Wheel_* — are the contract between a vehicle and its parts. Any vehicle rigged to the same names accepts the same parts. This is the scaling moat.
At runtime, each part becomes a scene-graph child of its anchor via createPortal — it inherits the exact transform automatically, immune to timing, camera framing, and scale. Wheels are cloned to all four hubs.
Paint and rim finish recolor a named material live; only wheel design loads a new file. Clones share materials, so one mutation recolors all four wheels at once.
Draco shrinks geometry 5–10× (24 MB→0.64 MB). Assets live in R2 with zero egress, served same-origin to sidestep WebGL CORS. The app just references them by key.
| three.js + R3F rendering | The web's WebGL engine, expressed as React components so the 3D scene and the UI share one state model. drei supplies loaders, controls, framing, and soft shadows. |
| glTF + Draco model format | The "JPEG of 3D" — web-native and runtime-ready. Draco compresses mesh geometry 5–10×. |
| Blender (headless) authoring | Every pipeline step — clean, orient, decimate, rig, compress — runs as a scriptable Python job. Reproducible and CI-able. |
| Cloudflare R2 storage + cdn | S3-compatible object storage with zero egress fees — the margin lever when serving multi-MB models at scale. |
| Next.js + Vercel app + hosting | React app, edge hosting. Server components for the shell, a client-only WebGL canvas for the viewer. |
| Zustand state | One tiny store the 3D scene and the config panel both read. Pick "Bronze rims" → the wheels recolor and the total recomputes. |
A functional prototype, live and mobile-friendly, fully isolated from the main SaaS so it can't destabilize production.
The demo uses free kitbash assets and parametric rigging. To be a polished commercial product, close these — each is a known quantity, not research.
R3F viewer, Blender pipeline, R2 delivery, anchors, paint / wheel / finish / accessory swaps, live pricing.
Licensed textured models + HDRI, exact-fit rigging + rig spec, real SKUs / prices / fitment, save & share, AR.
Catalog CMS/admin, embeddable widget, commerce & lead hooks, per-tenant branding, analytics.
Content-ops at volume, LOD / instancing / KTX2 performance, AI-assisted model generation, marketplace & OEM integrations.
The specifications, guides, and industry standards this work builds on — and a starting library for anyone taking it further. Open-standard formats (glTF is an ISO/IEC standard) and the Khronos 3D Commerce program are what make cross-platform, cross-vendor 3D commerce viable.
Everything above runs today at production quality in your browser. Orbit it, paint it, wheel it, load it up.
Open the configurator →