3D fleet garage: an isometric diorama fed by live system data
The challenge
The fleet owner wanted to “see the fleet”, not a table: what is parked in the yard, what is on a trip, which mechanic is busy with what. Separately, the vehicle card had to show the state of parts (tires, brakes, rims) more clearly than a flat diagram, without heavy glTF models and without a separate app.
What was built
We built two Three.js scenes from primitives. The garage: a flat isometric diorama with a hangar and an office, road trains in the body colours from the database, identical dimensions for all (passport sizes deliberately never reach the scene), hover highlights the truck or the trailer separately, double-click opens the card. Vehicles on an active trip are not in the yard but on the road behind the fence with the route label; workshop staff are always present, the person who took the driver’s request stands by the vehicle, admins and logisticians by the office. On the vehicle card — a “Diagram | 3D” toggle: a scene laid out by the axles, every part has a state colour and a tooltip, a click opens the existing part card.
A scene from data, not models
axles, wheels, body colours, trips and people come from the database; no glTF at all.
On a trip
on the road — vehicles with an active trip appear behind the fence with the route; the checkbox only toggles visibility.
People from roles
mechanics always on scene, admins and logisticians by the office, no drivers on purpose; by the truck stands whoever took the request.
3D parts view
a “Diagram | 3D” toggle on the vehicle card, state colours for tires, brakes, rims; a click leads to the part card.
Light bundle
three.js is loaded with a dynamic import (192 KB gzip); the system’s main bundle stays at 45 KB.
Live refresh
after service or an axle change the scene rebuilds from fresh data without reloading the page.
The result
The owner opens the garage and in a second sees what is in the yard, what is on the road and who works on what. Part states read faster in 3D than in a table, and the page got no heavier: 3D loads only behind a button.
Tech stack
Have a similar challenge?
Discuss a projectNext case
Monitoring
Monitoring of 28 websites with a daily Telegram report →