Building a Real-Time 3D Vehicle Inspector with Three.js and React

Insurance inspection used to mean static photos, unclear angles, and endless back-and-forth between drivers and adjusters. At Hafez Insurance / BimTec we shipped a browser-based 3D vehicle inspector so users could mark damage directly on a car model, capture guided photos and video, and send a structured claim package in one flow.

Why Three.js instead of a 2D markup tool

A flat image annotation tool fails when the same bumper is photographed from five angles. A lightweight GLTF/GLB car model gives a shared spatial language: left front fender means the same thing for the customer, the inspector, and the admin dashboard.

• Raycasting + picking to map pointer hits onto mesh regions
• Region metadata (panel IDs) synced into Redux as claim annotations
• Camera orbits constrained so users cannot “get lost” in free 3D space
• Fallback 2D capture for devices that struggle with WebGL

React owns UX; Three.js owns the scene

We kept a hard boundary: React rendered the wizard, permissions, and review UI; a thin scene controller owned meshes, lights, and raycasts. Redux (later also useful in the media dashboard) stored annotation state so the 3D canvas stayed disposable and remountable.

// Conceptual boundary
UI (React) → claimDraft store → scene API (highlightPanel, setMarker)
scene events → claimDraft.annotations[]

Media capture that works inside WebViews

Body insurance needs evidence, not just markers. We paired the 3D step with an 8-photo + video capture sequence optimized for mobile browsers and messaging WebViews — including permission recovery, compression before upload, and progress that survives flaky networks.

Admin review loop

Markers alone are useless without tooling. The companion admin dashboard let adjusters zoom media, leave notes, approve/reject, and correlate annotations with the 3D panel map. That closed the loop between customer capture and operational decision-making.

Lessons I’d repeat

1. Budget GPU + main-thread time early; fancy materials lose to reliability.
2. Treat panel IDs as a product contract, version them like an API.
3. Never let the scene own business rules — keep claim validity in the app layer.
4. Design the admin experience in the same sprint as the customer capture flow.

The result was not a demo canvas — it was a production inspection surface that shortened documentation cycles and made remote claims review actually usable.