MRSHKNMurashkin Studio
Обсудить сайт
← Все работы
Пример студии

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

Другое

Главная страница демо-сайта автосервиса «Фаза» с 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)

Отчет PageSpeed Insights, мобильные: 95, 100, 100, 100

Яндекс Метрика и Google Analytics 4 считают посещения сайта и для этого сохраняют в вашем браузере cookie — маленькие файлы. Включим их, только если вы согласны. Подробнее — в политике обработки персональных данных.