Александр Джахангиров 3D-конфигуратор облицовки алюминиевыми панелями и ламелями с выбором цветов и расчетом материалов.
Задача
Компания AFK Leader, производитель алюминиевых панелей и ламелей, хотела предоставить клиентам удобный инструмент для визуализации и подбора материалов.
Основные задачи:
Создать интерактивный 3D-конфигуратор для выбора продукции (50+ артикулов).
Реализовать настройку параметров (ориентация, расстояние между ламелями, цвет по RAL).
Добавить расчет количества материала и стоимости.
Обеспечить отправку заявки с выбранными параметрами.
Сделать инструмент доступным как для десктопных, так и для мобильных пользователей.
Цель – повысить вовлеченность клиентов, упростить процесс заказа и сократить нагрузку на менеджеров.
Решение
Изучение ассортимента AFK Leader, определение ключевых параметров (типы панелей, цвета, способы монтажа).
Обсуждение с заказчиком функционала: визуализация, расчеты, отправка данных.
Выбор технологий
Использован Babylon.js для 3D-визуализации (гибкость, производительность, поддержка WebGL).
Интеграция с бэкендом через REST API для обработки заявок.
Адаптивный интерфейс на HTML/CSS/JS для работы на всех устройствах.
Разработка
Создание 3D-моделей панелей и ламелей с параметризацией (длина, ширина, цвет).
Реализация выбора типа продукции, настройки ориентации (вертикальная/горизонтальная), расстояния между элементами (10–200 мм).
Добавление палитры цветов RAL, эффектов (анодирование, сублимация).
Разработка калькулятора расхода материала на основе площади поверхности.
Настройка формы отправки заявки с сохранением конфигурации.
Тестирование
Проверка корректности отображения на разных устройствах.
Оптимизация производительности для плавной работы с 3D-графикой.
Тестирование отправки данных на сервер.
Результат
Полнофункциональный 3D-конфигуратор, доступный на сайте https://afkleader.ru/calculator/.
Клиенты могут:
Выбирать между панелями и ламелями.
Просматривать продукцию в интерьере и экстерьере.
Быстро выбирать артикул по профилю и упрощенному превью чертежа.
Настраивать расположение, цвет, покрытие.
Получать расчет материала и стоимости.
Отправлять заявку производителю.
Практическое применение:
Упрощение процесса заказа для клиентов – они видят результат до покупки.
Снижение количества уточняющих вопросов менеджерам.
Увеличение конверсии за счет интерактивности.
Работа выполнена в соавторстве
Вячеслав Горячев - 3D сцена, моделирование. Владислав Смирнов - программирование.
