3D-гараж автопарку: ізометрична діорама з живими даними системи
Задача
Власник автопарку хотів «побачити парк», а не таблицю: що стоїть на майданчику, що в рейсі, хто з механіків чим зайнятий. Окремо на картці машини потрібно було показати стан вузлів (шини, гальма, диски) наочніше за плоску схему, але без важких glTF-моделей і без окремого застосунку.
Що реалізовано
Зібрали дві 3D-сцени на Three.js із простих форм. Гараж: пласка ізометрична діорама з ангаром і офісом, автопоїзди в кольорах кузова з бази, однакові габарити для всіх (паспортні розміри в сцену навмисно не потрапляють), наведення підсвічує тягач або причіп окремо, подвійний клік відкриває картку. Машини з активним рейсом стоять не на майданчику, а на дорозі за парканом із підписом маршруту; працівники СТО присутні завжди, біля машини стоїть той, хто взяв звернення водія, адміністратори й логісти — біля офісу. На картці машини — перемикач «Схема | 3D»: сцена за розкладкою осей, кожен вузол має колір стану й підказку, клік відкриває наявну картку вузла.
Сцена з даних, а не з моделей
осі, колеса, кольори кузова, рейси й люди беруться з бази; жодних glTF.
В рейсі
на дорозі — машини з активним рейсом з'являються за парканом із маршрутом; галочка лише перемикає видимість.
Люди з ролей
механіки на сцені завжди, адміни й логісти біля офісу, водіїв немає навмисно; біля фури — той, хто взяв звернення.
3D-огляд вузлів
перемикач «Схема | 3D» у картці машини, кольори стану шин, гальм, дисків; клік веде в картку вузла.
Легкий бандл
three.js вантажиться динамічним імпортом (192 КБ gzip), основний бандл системи лишається 45 КБ.
Живе оновлення
після ТО або зміни осей сцена перебудовується з нових даних без перезавантаження сторінки.
Результат
Власник відкриває гараж і за секунду бачить, що на майданчику, що в дорозі й хто над чим працює. Стан вузлів читається з 3D швидше, ніж із таблиці, а сторінка не стала важчою: 3D довантажується лише за кнопкою.
Технології
Маєте схожу задачу?
Обговорити проєктНаступний кейс
Моніторинг
Моніторинг 28 сайтів із щоденним звітом у Telegram →