-
-
The complete Auto Gallery experience: interactive 3D exploration, Lyra’s guided demo, financing, hotspots, and vehicle controls.
-
Conceptual powertrain view with open-door inspection, educational overlays, and a clearly labeled non-engineering visualization.
-
Immersive cabin view using the vehicle’s real interior, seats, dashboard, and steering-wheel scene nodes.
-
Close-up wheel inspection with steering, rotation, braking detail, visual terrain modes, and render-quality controls.
Auto Gallery: Explore. Understand. Decide.
Inspiration
Most online vehicle listings still rely on flat image galleries, specification tables, separate finance calculators, and generic contact forms. We wanted to explore a different question: what if the vehicle itself became the interface for discovering features and making a confident purchase decision?
What it does
Auto Gallery transforms a static car listing into an immersive 3D showroom.
Users can:
- Rotate and inspect the vehicle in 360 degrees
- Zoom and move through cinematic camera views
- Open the driver door and all four side doors
- Enter the real cabin and explore the seats, dashboard, and steering wheel
- See synchronized steering-wheel and front-wheel movement
- Inspect the cargo area
- Explore an educational conceptual powertrain
- View wheel and off-road visual demonstrations
- Calculate an illustrative monthly payment
- Save a browser-local demo configuration after providing consent
The experience is guided by Lyra, an AI vehicle concierge concept. For reliable judging, the public build uses a deterministic Guided Demo and rule-based Offline Assistance instead of depending on a live AI provider.
How we built it
Auto Gallery was built with React, Vite, JavaScript, CSS, Three.js, WebGL, GLTFLoader, and OrbitControls.
The vehicle was converted into an optimized glTF package with compressed geometry and external JPEG textures. The local source-asset folder was reduced from approximately 1.89 GB to a deployable 14.4 MB model package.
Custom scene logic controls the camera, doors, wheels, steering, hotspots, render quality, cargo inspection, and Guided Demo sequence. Three rendering modes—Performance, Balanced, and Quality—help the experience adapt to different devices.
Codex powered by GPT-5.6 supported the 3D interaction architecture, guided journey, testing strategy, optimization, and competition preparation. Human decisions defined the product concept, branding, visual direction, and final experience.
Challenges
One major challenge was making a detailed vehicle asset practical for the web. We optimized the model, textures, rendering pipeline, and static delivery while preserving its visual quality.
The source model also did not provide reliable animation groups for every component. The four side doors, wheels, and steering system could be animated independently, but the rear hatch could not open naturally. Instead of presenting a broken animation, Cargo View temporarily hides the unreliable hatch mesh and reveals the real load area.
The model has no real engine mesh, so the powertrain experience is clearly presented as a conceptual educational visualization rather than an engineering reconstruction.
Accomplishments
- Created an immersive, interactive 3D automotive showroom
- Reduced the deployable vehicle package by approximately 99.2% compared with the local source-asset folder
- Built a repeatable nine-step Guided Demo
- Implemented real door, cabin, wheel, and steering interactions
- Added three performance modes and WebGL context recovery
- Created a self-contained static production build
- Passed 22 automated tests, a secret scan, and a globalization scan
- Kept financing, lead handling, and conceptual features clearly labeled and privacy-aware
What we learned
Immersive product experiences require more than a visually impressive model. Camera choreography, interaction design, loading performance, honest fallbacks, and repeatable demonstrations are equally important.
We also learned that a deterministic guided experience can be more effective for public demonstrations than an unreliable live service. Reliability and truthful limitations create a stronger experience than unsupported claims.
What's next
The next version can connect Auto Gallery to verified vehicle inventory, official specifications, analytics, lender data, and production CRM systems. Live AI tool-calling can also be enabled after selecting and testing a production-ready provider.
Our long-term goal is to make online vehicle discovery feel less like browsing a catalogue and more like receiving a personal showroom consultation.
Log in or sign up for Devpost to join the conversation.