3D-конфигуратор зданий
из металлоконструкций

Аналитика

UI/UX дизайн

Frontend

Backend

До появления конфигуратора потенциальный заказчик, заходя на сайт, видел общее описание возможностей, но не мог предметно оценить ни внешний вид будущего здания, ни его стоимость. Единственным способом получить информацию по проекту были заявка с сайта, звонок или прямое обращение в отдел продаж.

Ключевые ограничения:

•

При наличии общего понимания задачи клиенту требовалась помощь менеджера, чтобы соотнести свои пожелания с конкретными техническими решениями — типом каркаса, вариантами обшивки и кровли.

•

Часть обращений поступала без точных технических параметров, что удлиняло переписку и увеличивало время обработки заявки. Это подсвечивало возможность для более структурированного сбора исходных данных ещё до подключения менеджера.

•

Имиджевый разрыв. Компания позиционируется как технологический лидер, но сайт не предлагал современных цифровых инструментов.

Разработать простой в использовании сервис, который:

•

Даст пользователю наглядный способ спроектировать здание из ЛСТК под свои задачи.

•

Повысит конверсию посетителей сайта в заявки за счет визуализации и прозрачности.

•

Улучшит качество входящих обращений — менеджер будет получать уже готовый набор параметров для зданий из ЛСТК.

•

Сможет работать как на сайте, так и на тач-панелях на офлайн-выставках.

Проект был построен вокруг инженерной документации заказчика. Все конструкции, размеры, зависимости и правила установки элементов опирались на реальные чертежи и спецификации.

Этап аналитики мы разделили на две части. Сначала команда разработки изучила предоставленные чертежи, формулы расчета нагрузок и каталоги конструктивных элементов. На этой основе было сформировано первичное техническое задание.

Затем начался этап верификации: мы уточняли детали с инженерами заказчика, фиксировали зависимости между параметрами — например, как ширина пролета влияет на доступную высоту здания или какой шаг стоек фахверка применяется при разных типах каркаса.

Параллельно проводили интервью с будущими пользователями системы: менеджерами по продажам и проект-менеджерами. Это помогло понять, какие параметры для них критичны.

Конфигуратор — отдельный подсайт, встроенный в основной сайт компании. Такой подход мы выбрали осознанно: основная часть сайта работает на привычном для клиента стеке (1С-Битрикс), а конфигуратор использует Nuxt, Three. js и WebGL для отрисовки трехмерной модели.

Разделение дало несколько преимуществ:

•

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

•

Производительность. Тяжелые вычисления и графика обрабатываются на стороне фронтенда, не создавая нагрузки на CMS.

•

Гибкость. При необходимости конфигуратор можно дорабатывать и масштабировать, не перестраивая остальную часть системы.

Для нас было принципиально важно, чтобы конфигуратор давал финансовый ориентир. Мы реализовали калькулятор, который учитывает все выбранные параметры, а также региональные нагрузки и климатические коэффициенты. Данные для расчета заведены в административную панель, что позволяет менеджерам актуализировать цены без участия разработчиков.

Трехмерная модель собрана из упрощенных геометрий: колонны, балки и фермы отображаются в виде стандартных профилей (двутавр, уголок, швеллер), без точных сечений и толщин — это инженерные детали, которые для визуального выбора несущественны и только замедлили бы работу.

Мы предусмотрели несколько режимов отображения: полный вид, каркас и разрез. Пользователь может менять ракурс (спереди, сзади, сверху, 3D) и включать размерную сетку. Доступны три уровня качества изображения, чтобы снизить нагрузку на слабых устройствах.

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

•

Возможность визуализации. Пользователь может пройти полный путь от выбора каркаса до итогового расчета и внешнего вида здания — внутри одного окна, без переключения между разделами.

•

Содержательные заявки. Теперь менеджер получает не общий запрос, а готовый набор параметров: тип каркаса, габариты, материалы, перечень дополнительных услуг.

•

Расчет стоимости. Система учитывает региональные нагрузки и актуальные цены, администрируемые через CMS.

•

Автономное решение. Независимость продукта от основного сайта позволяет легко обновлять контент и цены, а также дорабатывать и масштабировать конфигуратор без рисков для публичной части.

Руководитель проекта

Екатерина Мечинзова
Анна Павлова

Аналитик

Дмитрий Горохов

Дизайнеры

Анна Долганова
Елена Пономарева

Тимлид разработки

Андрей Головинов

Backend-разработчик

Frontend-разработчики

QA-специалисты

Анна Питернова
Альфия Исхакова

Системный администратор

Кирилл Шушкин