Разработка 3D-конфигуратора стола для мебельного производства
Параметрический стол в 3D: форма и размеры столешницы, каркас, материалы, опции, чертёж и цена — живой пример прямо на странице.
Смотреть демо3D-конфигуратор систем хранения для гаражей и кладовых Prometal
Для компании Prometal мы разработали интерактивный 3D-конфигуратор систем хранения, который помогает пользователям виртуально планировать и визуализировать оптимальные решения для гаражей и кладовых.
Покупатели могут выбрать модульные элементы, разместить их в объёме, менять размеры, цвета и аксессуары, а также сразу видеть итоговую стоимость. Конфигуратор делает процесс подбора оборудования интуитивным, наглядным и удобным, увеличивает вовлечённость клиентов и улучшает онлайн-конверсию на сайте.
1С-Битрикс Управление сайтом
Framework ThreeJS для 3D WebGL
Figma (UI / UX)
React JS
Material UI (MUI)
Gitlab (CI/CD)
1Цели и задачи
Подбор и комплектация стеллажной системы в конкретное помещение - достаточно трудоемкий процесс, требующий длительного времени. Для разгрузки менеджеров компании и ускорения обработки заказов требовался инструмент, позволяющий задать габариты помещения, области размещения стеллажной системы по каждой из стен (в основном используются прямые стеллажи - расположенные по одной стене, но бывает и Г и П-образные схемы), расстановка секций (вертикальных и горизонтальных направляющих) и элементов наполнения в них с учетом пересечений и объединений кронштейнов.На самом сайте уже присутствовал полный каталог элементов модульной системы с обновляемым наличием и ценами, но требовался помощник в подборе элементов по конкретному проекту.
2Функционал 3D-конфигуратора
Было решено реализовать конфигуратор с упрощенным планировщиком помещения (возможность задания габаритов комнаты - ширина, глубина, высота и установка предметов наполнения интерьера - двери, окна, элементы наполнения гаражей и кладовых).
Интерфейс конфигуратора предоставляет пошаговую конкретизацию проекта клиента, в то же время позволяя без потери данных переключаться между шагами. На первом шаге пользователь выбирает габариты помещения, по желанию наполняет интерьер и задает на каждой стене габариты стеллажной системы - именно эти габариты (ширину и высоту) будет контролировать при заполнении конфигуратор.
3Размещение элементов наполнения
на следующем шаге пользователю необходимо в указанных габаритов расставить секции стеллажной системы - секции у производителя фиксированной ширины (480, 600 и 800 мм), также пользователь может формировать отступы в виде пустого места на стене. По умолчанию высота всех секций и отступ от пола идентичны, но при переходе к редактированию конкретной секции пользователь может изменить высоты для конкретной секции, реализуя разноуровневую стеллажную систему.
Для ускорения процесса и помощи клиентам был разработан также алгоритм автозаполнения - конфигуратор просчитывает на указанные габариты все варианты и формирует (при возможности) предложение для пользователя с учетом либо минимальной стоимости, либо максимальной прочности. Таким образом, пользователи могут и быстро автоматически заполнить стену секциями и произвести расстановку самостоятельно (либо скомбинировать оба варианта - получить автозаполнение секциями и далее отредактировать его по своему усмотрению). 
Далее пользователю необходимо наполнить секции элементами модульной системы. Конфигуратор позволяет добавлять наполнение несколькими способами - пользователь может идти от желаемого наполнения, выбрав соответствующий раздел и элемент из каталога наполнения, в этом случае конфигуратор подсвечивает на текущей стене все возможные варианты размещения элемента и клик на желаемом месте (подсвеченном полупрозрачном элементе) добавляет его в проект. Либо пользователь может наполнять конкретную секцию - нажав на секцию отображается тот же самый каталог, но пользователь добавляет уже элементы в конкретную секцию и может сразу же ее неполнить несколькими одинаковыми или разными элементами, что значительно ускоряет процесс (при условии, что пользователь представляет, что в этой секции планируется разместить, т.к. в каталоге наполнения в том числе присутствуют элементы, размещаемые сразу на две расположенные рядом секции, например, откидной стол на 1200мм) Были реализованы элементы наполнения под следующие разделы каталога продукции prometal:
- Полки
- Откидные столы
- Перфопанели
- Навесные шкафы
- Подвесы, модули для шин
- Рейлинги
На шаге "Цвета" пользователь может задать цвет окрашивания кронштейнов, соединителе, боковин шкафа и модулей. В отличии от инетрьерных декоративных предметов мебели, в сугубо функциональной стеллажной системе этот раздел имеет достаточно ограниченный функционал и не предполагает окрашивания отдельных элементов в разные цвета - задается только общий цвет на весь проект. 
4PDF-спецификация и добавление в корзину
На последнем шаге пользователю предоставляется полная спецификация по элементам, подсвечивается (при необходимости), необходимость отпила - если в проекте присутствуют габаритные размеры вертикалей, требующие отпила, то их необходимо отпилить самостоятельно при сборке системы. спецификация доступна как общим перечнем, так и с делением по секциям для удобства восприятия.
Далее пользователь может либо сохранить проект, либо сохранить и распечатать PDF-спецификацию, содержащую несколько ракурсов визуализации и полный состав элементов, либо добавить все элементы проекта в корзину сайта (сайт реализован на 1С-Битрикс Управление сайтом и добавление в корзину позволяет продолжить дальнейший подбор аксессуаров и/или изменение состава корзины через основной сайт и корзину Битрикс). 
Таким образом, конфигуратор стеллажной системы органично встроен в сайт на 1С-Битрикс и позволяет снизить нагрузку на менеджеров компании, визуализировать клиенту его будущую стеллажную систему, ускорить процесс оформления заказа.
Оглавление
Оглавление
Нужен похожий проект?
Расскажите о задаче — покажем близкие по смыслу работы и предложим решение со сроками и бюджетом.
Похожие проекты
Отраслевые решения на основе этого опыта:
Разработка планировщика террасы для производителей террасной доски
План террасы по размерам, раскладка доски, лестницы и подсистема в 3D, спецификация материалов и цена — живой пример на странице.
Смотреть демо
Разработка 3D-конфигуратора забора для производителей ограждений
Участок, ворота и евроштакетник в 3D, смета материалов и расчёт цены — живой пример конфигуратора забора.
Смотреть демо
Разработка планировщика участка и забора для производителей ограждений
Клиент рисует свой участок, ставит ворота и калитки — планировщик строит забор, считает смету и цену.
Смотреть демо
Разработка конфигуратора ландшафтных решений: дорожки, озеленение, МАФ
План участка, дорожки и площадки из тротуарной плитки, растения и малые формы в 3D, смета и цена — живой пример конфигуратора ландшафта.
Смотреть демо
Разработка 3D-конфигуратора игрового компьютера и рабочей станции
Системный блок в 3D: корпус, плата, процессор, память, видеокарты, охлаждение и подсветка — с проверкой совместимости и расчётом мощности.
Смотреть демо
Разработка конфигуратора детской площадки: покрытие, оборудование, зоны безопасности
План участка, резиновое покрытие, качели, горки, карусели и тренажёры с зонами безопасности, МАФ в трёх коллекциях, 3D и смета — живой приме...
Смотреть демо
