The brief
A configurator has to keep the product, its controls and its saved state in agreement. Changing a finish should affect the right surfaces; changing a package may require other choices to change with it. We built the A2 as an in-house demonstration of that behavior around an original vehicle concept.
What we built
- Exterior choices for paint, finish, wheels, calipers, roof, mirrors and glazing, plus Sport, Carbon and Performance packages.
- Cabin choices for upholstery, seat colors, stitching, belts, trim and ambient lighting, with interior camera positions and opening doors and tailgate.
- Compatibility handling that explains related changes before applying them, with undo and redo for exploring alternatives.
- Local configuration storage, A/B snapshots, shareable links and image export, so a visitor can keep and compare a choice beyond the current camera view.
One configuration, several views
A versioned catalog defines the available choices, material zones and package assemblies. Configuration rules and history live separately from the renderer. This lets the controls, URL serialization and 3D presentation use the same product state while camera position remains a viewing preference.
The browser checks exercise rapid option changes, compatibility decisions, history, sharing and comparison export. These are the moments where an attractive viewer can otherwise show a different product from the one a visitor intended to save.
Stack
React and Next.js for the interface, Three.js and GLB assets for the scene, browser storage for configurations, and Node and Playwright checks for state and interaction.
Where it stands
A functional prototype using an earlier body model. The newer A2 exterior study explores the body shape separately and does not yet include the configurator’s cabin, opening panels or variants. This is an original MTech concept, without manufacturer pricing or production specifications.