Вся линейка Dariano: конфигуратор в Unreal Engine и контур в браузере
Конфигуратор собран в Unreal Engine под весь ассортимент Dariano: коллекции, отделки полотна, остекление и фурнитура собираются в реальном времени и показываются в интерьере. Не демо трёх артикулов — витрина линейки.
Браузерная сборка WebGL-линейки, встроенная в страницу.
Исходный продукт
Как это выглядит
Шоурум Dariano
Конфигуратор всей линейки межкомнатных дверей, собранный в Unreal Engine. Ассортимент производителя собирается в реальном времени — это рабочий контур, а не смонтированный ролик трёх дверей.
Show Room дверей «Дариано» — запись боевого конфигуратора линейки.
AR-примерка в интерьере
Мобильное AR-приложение: дверь из линейки ставится в реальный проём. Покупатель видит выбранное полотно, отделку и фурнитуру на своей стене, а не образец «ближайшего цвета» в зале.
AR-приложение для примерки дверей Dariano в интерьере.
Было
Задача
Dariano продаёт линейку целиком, а зал держит два десятка полотен. Остальное — фотография в каталоге: тот же профиль в другом шпоне, с другим стеклом и другой ручкой покупатель вынужден представлять. Нужен контур, где собирается любая комплектация из ассортимента и сразу видно, как дверь стоит в проёме, а не «ближайший образец с полки».
Сделали
Решение
Продукт собран в Unreal Engine как конфигуратор всей линейки Dariano: каждая коллекция, отделка, стекло и фурнитура доступны в одном контуре, а не разнесены по роликам и PDF. Рядом с шоурумом — AR-приложение: выбранную дверь можно поставить в реальный проём и увидеть в интерьере. Тот же продуктовый слой перенесён в WebGL-линейку: на этой странице встроена браузерная сборка, ниже — записи оригинального продукта.
Направление
Дверь целиком, а не полотно
Собирается проём со стеной, коробкой, наличником и фурнитурой.
01
Геометрия по параметрам
Шесть размеров проёма и четыре толщины стены — стена и коробка строятся под них, а не берутся готовой моделью
Сторона навески, направление открывания и угол открытия: дверь можно оставить закрытой или распахнуть
Скрытая коробка монтируется заподлицо со стеной — без наличника и только со скрытыми петлями
Остекление вырезается в полотне рамкой из четырёх плит: узкая вставка, широкая или во всю высоту
02
Отделка и фурнитура
Четырнадцать вариантов отделки: восемь шпонов и шесть эмалей по RAL, плюс четыре вида стекла
Волокно шпона идёт вдоль полотна, а рисунок считается в реальных метрах — он не растягивается на широкой двери и не мельчит на узкой
Фрезеровка накладными штапиками: вертикальные линии или филёнка
Ручка, замок, петли и наличник — отдельные параметры со своими артикулами
03
Модель открывается в своём виде
Четыре модели: классика с филёнкой, модерн с линиями, скрытая и витринная со стеклом
Каждая открывается в собственном исполнении, а не в общем: «Классика» сразу с филёнкой, «Витрина» — сразу со стеклом
Шесть готовых решений — от дуба с филёнкой до кабинетной со стеклом во всю высоту
Направление
Общая кодовая база
Второй продукт — это данные и построитель геометрии, а не второе приложение.
04
Что переиспользуется без изменений
Движок ограничений, спецификация, выгрузки, ссылка на конфигурацию и форма заявки
Интерфейс: формулировки продукта вынесены в конфигурацию, поэтому колонка моделей называется «Модель двери», а не «Модель кабины»
Режимы просмотра включаются флагами: лифтового холла у двери нет, и он отключён данными, а не правкой кода
05
Правила совместимости двери
Телескопический наличник недоступен при стене 75 мм — ему не хватает глубины
Замок WC несовместим с кнобом: у него нет фиксатора
Вставка во всю высоту исключает фрезеровку, скрытая коробка — наличник
Заблокированный вариант гаснет и объясняет причину при наведении курсора
Направление
Витрина и шоурум
Контур рассчитан на зал и на сайт продавца одновременно.
06
Как это работает у продавца
Набор статических файлов внутри сайта или кабинета — без серверного приложения
Встраивается в чужую страницу через iframe: эта страница тому и подтверждение
Ссылка на собранную дверь работает без хранилища — конфигурация кодируется в саму ссылку
Каталог ведёт продавец: новая отделка или ручка добавляется правкой JSON, без разработчика
07
Что уходит в заказ
Спецификация с артикулами по каждому элементу: полотно, стекло, ручка, замок, петли, наличник
Изображения выбранного исполнения — снимок вида и пакет ракурсов
Заявка уходит на сайт продавца вместе с параметрами и артикулами, переносить руками нечего
Итог
Результат
18параметров двери в шести разделах
4модели, 6 размеров проёма
18материалов: отделка и стекло
1кодовая база на два продукта
Конфигуратор покрывает линейку Dariano целиком: коллекции, отделки, остекление и фурнитура в одном контуре, а не в ролике на три SKU.
AR-приложение ставит выбранную дверь в реальный проём: примерка в интерьере, а не на стенде в зале.
Исходный продукт собран в Unreal Engine; тот же логический слой живёт в WebGL-линейке и встраивается в страницу.
Каталог ведёт продавец: отделка, фурнитура и правила совместимости правятся данными без пересборки.
Технологии
Стек
Unreal Engine
AR
WebGL
three.js
React
TypeScript
Vite
Следующий шаг
Нужен конфигуратор товара в браузере — двери, мебель, фасады? Соберём контур под ваш каталог.
