Открытая кабина лифта в тёмном холле: тёплый свет справа, слева пустая стена под текст

Продукт линейки WebGL

Конфигуратор кабин лифтов

Подбор отделки кабины в браузере — с выгрузкой и заявкой на расчёт

Клиент собирает кабину сам: габариты, отделка щитов, потолок, пол, приказной пост, аксессуары, двери и лифтовой холл. На выходе — изображения, PDF-спецификация с артикулами, ссылка на конфигурацию и заявка на расчёт.

Обсудить похожий проект
Отрасль
Машиностроение / лифтовое оборудование / продукт в браузере
Срок
первый продукт линейки
Год
2026

Ниже — боевая сборка, встроенная в страницу. Не видео и не набор скриншотов.

Было

Задача

Отделку кабины согласовывают по фотографиям и образцам: менеджер присылает подборку, клиент представляет результат в уме, на монтаже выясняется, что представляли по-разному. Комбинаций много — четыре модели, три габарита, десятки материалов, — и перебрать их в переписке нельзя. Нужен контур, где клиент сам собирает кабину, сразу видит результат и отправляет готовую спецификацию, не устанавливая ничего.

Сделали

Решение

Собрали WebGL-конфигуратор, который работает набором статических файлов внутри сайта заказчика. Кабина не загружается готовой моделью, а строится параметрически по габаритам и схеме модели: комбинаторику держат данные, а не два десятка заранее собранных сцен. Каталог, правила совместимости и состав интерфейса вынесены в JSON — заказчик правит их сам, без разработчика и без пересборки.

Направление

Сцена и материалы

Кабина строится из данных, а материалы ведут себя физически достоверно.

Параметрическая сборка вместо готовых моделей

  • Габарит и схема разбивки щитов — данные, а не отдельная модель на каждое сочетание
  • Разрез без ручных настроек: ближние стены отсекаются обратной гранью, интерьер открыт с любого ракурса
  • Свободный обзор, вид изнутри кабины, вид из лифтового холла и шесть фиксированных ракурсов

Материалы и свет

  • Каталог из 41 материала: шлифованная и зеркальная сталь, окраска по RAL, декоры, камень, резина, стекло
  • Развёртка считается в реальных метрах — рисунок не растягивается на щите и не сжимается на плинтусе
  • Потолочные светильники — площадные источники: равномерный свет без пересветов и провалов в углах
  • Металличность строго 0 или 1, промежуточных значений нет: они физически не существуют и дают грязный результат

Направление

Логика конфигурации

Конфигуратор считает совместимость, а не просто перекрашивает поверхности.

Движок ограничений

  • Несовместимые варианты гаснут и объясняют причину при наведении курсора
  • Перечень правил живёт в JSON: расширяется данными, без правки кода
  • Значение, ставшее недоступным, заменяется автоматически с сообщением пользователю

Каталог администрируется заказчиком

  • Восемь JSON-файлов: материалы, модели, параметры, правила, интерфейс, интеграция, оформление
  • Добавить отделку или скрыть элемент интерфейса можно без пересборки
  • Ошибка в файле даёт сообщение с точным путём до неверного поля, а не белый экран

Направление

Выгрузка и интеграция

Результат подбора уходит клиенту и в системы заказчика без ручного переноса.

Что получает клиент

  • Снимок текущего вида и пакет из пяти ракурсов в PNG до 2480 px по длинной стороне
  • PDF-спецификация с изображениями и артикулами материалов
  • Сохранение и загрузка конфигурации файлом JSON
  • Ссылка на конфигурацию с неограниченным сроком действия

Никакого своего бэкенда

  • Набор статических файлов — ни серверного приложения, ни подключения библиотек со стороны
  • Заявка уходит POST-запросом на сайт заказчика вместе с параметрами, артикулами и изображениями
  • Ссылка работает даже без серверного хранилища: конфигурация кодируется в саму ссылку
  • Встраивается в чужую страницу через iframe — эта страница тому и подтверждение

Итог

Результат

  • 41материал отделки в каталоге
  • 4модели кабины, 3 габарита
  • < 2 сдо интерактивности
  • 160+кадров в секунду
  • Клиент собирает кабину сам и видит результат сразу — согласование перестаёт быть перепиской с фотографиями.
  • Заявка приходит с артикулами и изображениями выбранной конфигурации, переносить данные руками не нужно.
  • Каталог и правила ведёт заказчик: новая отделка добавляется правкой JSON, без обращения к разработчику.
  • Контур живёт внутри сайта заказчика набором статических файлов — отдельная инфраструктура не нужна.

Технологии

Стек

  • WebGL
  • three.js
  • React
  • TypeScript
  • glTF
  • Vite

Следующий шаг

Нужен конфигуратор или 3D-визуализация продукции в браузере — соберём такой же контур под ваш каталог.

Обсудить проект