Auto Studio: 3D Car Configurator

Auto Studio: 3D Car Configurator

Auto Studio is an interactive vehicle configurator that runs entirely in the browser. Users pick a car from a curated showroom, then personalise it in real time, swapping paint colours and finishes, tinting windows, adding spoilers and custom rims, and layering performance upgrades. Configurations are saved locally and accessible from a personal Garage page, where builds can be loaded, compared, or deleted. The 3D scene is rendered entirely in the browser using WebGL, with no backend required.

Key Features

• Real-time 3D rendering: per-car paint material targeting using React Three Fiber / Three.js
• 6 paint finishes: gloss, metallic, pearl, satin, matte, and chrome
• Custom parts: window tint overlays, spoiler swaps, and custom rim placement
• Garage system: save configurations to localStorage with snapshot previews; load, compare, or delete builds
• Mobile-responsive: bottom-sheet sidebar on small screens, full panel layout on desktop
• Dynamic routing: each car has its own shareable /build/[carId] URL

Architecture

The configurator is built on Next.js 15 App Router with React Three Fiber as the WebGL layer. Scene state (selected car, active paint, parts, tint level) is managed globally with Zustand, keeping the 3D canvas and the sidebar UI in sync without prop drilling. Framer Motion handles panel transitions and part-swap animations.

Each car model has a material map that identifies which mesh names correspond to body panels, glass, and rims, allowing the same paint logic to target the right surfaces on any model in the showroom.

Tech Stack: Next.js 15, React Three Fiber, Three.js, Zustand, Framer Motion, Tailwind CSS, TypeScript