Автосервис «Фаза»: 3D-схема «где болит»
Другое

Задача
Владелец машины обычно знает симптом, а не причину: стучит спереди на кочках, скрипит при торможении. Назвать цену по телефону, пока машину не посмотрели, сервису трудно.
Мы сделали демо — работающий сайт вымышленного автосервиса «Фаза» в Калининграде. Он показывает, как сайт может еще до осмотра подсказать, что могло сломаться и с какой суммы начнется ремонт. Человек выбирает, что беспокоит, и сразу видит возможные причины, цену работы «от» и сколько займет ремонт. Точную цену мастер называет после осмотра.
Решение
Первое, что видит посетитель, — объемная модель машины, как на рентгеновском снимке: видны детали внутри. Можно выбрать один из 15 симптомов в списке или нажать на нужный узел прямо на модели. Изображение плавно приближается к этому узлу, и открывается карточка: возможные причины, цена «от» и сколько займет ремонт. Узлов восемь — от двигателя и цепи ГРМ (она заставляет детали двигателя работать согласованно) до сцепления и коробки передач.
Для подвески и цепи ГРМ мы сделали наглядные объяснения: движение в них рассчитывается по формулам механики — по упрощенной модели, а не по чертежам конкретной машины. Можно «износить» амортизатор и увидеть, что машина после кочки раскачивается дольше. Или «растянуть» цепь и увидеть, как детали двигателя начинают работать не в такт — механики называют это сдвигом фаз.
Объемная картинка требует от телефона или компьютера много вычислений. Поэтому, где браузер это позволяет, мы считаем ее отдельно от остальной страницы, чтобы 3D-сцена меньше мешала прокрутке и кнопкам. Программа, которая рисует 3D-машину, в сжатом виде весит 212,6 КБ (килобайт). Модель машины, освещение сцены и программа для распаковки текстур загружаются отдельно — это еще около 5,6 МБ (мегабайт). Пока они грузятся, а также если браузер не умеет показывать 3D или модель не загрузилась, на месте модели видна обычная картинка, а список симптомов и карточки работают как обычно.
Записаться можно через форму на сайте: заявка сохраняется в админке — закрытом разделе сайта, куда владелец входит по логину и паролю, — и сразу приходит владельцу в Telegram. Названия узлов, симптомы, причины, цены и сроки владелец меняет сам в админке. Новый узел на модели — отдельная работа: для этого меняется сама модель. У сайта две версии: на русском — автосервис «Фаза» в Калининграде, на английском — Phase Garage в Колумбусе (США). Оба автосервиса вымышленные.
На чем сделан сайт
- Next.js 16
- React 19
- TypeScript
- Three.js
- Web Worker
- OffscreenCanvas
- Payload CMS 3
- PostgreSQL
- Blender
Результаты в цифрах
- 95Скорость из 100 — Google PageSpeed, телефон
- 100Доступность из 100 — Google PageSpeed, телефон
- 100Рекомендации из 100 — Google PageSpeed, телефон
- 100SEO из 100 — Google PageSpeed, телефон
- 212,6 КБКод 3D-сцены в сжатом виде, без модели машины и освещения
Снимок экрана: тест скорости Google (Lighthouse)
