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

2025

Северсталь

Аналитика

UI/UX дизайн

Frontend

Backend

«Северсталь Стальные Решения» — крупнейший высоко-технологичный производитель строительных металлокон-струкций в России и надежный партнер полного цикла для реализации проектов любой сложности и ответственности с самыми высокими требованиями к качеству и срокам. Продукция используется для возведения промышленных зданий и сооружений, складских и логистических комплексов, коммерческих зданий, спортивных и сельскохозяйственных объектов.

Сайт

Проблема

•

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

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

•

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

•

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

•

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

Цели

•

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

•

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

•

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

•

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

•

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

Реализация

•

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

Аналитика

•

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

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

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

Архитектура и стек

•

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

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

•

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

•

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

•

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

Проектирование

Мы сознательно отказались от сложного инженерного интерфейса в пользу последовательного, управляе-мого сценария. Пользователь двигается по шагам, на каждом из которых меняет один аспект здания и сразу видит результат на модели.

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

Параметры здания. Здесь выбирается тип каркаса (рамный, фермен-ный или би-металл), ширина пролета, длина и высота. Конфигуратор проверяет зависимости: например, для рамного каркаса при высоте 6 метров недоступен пролет в 12 метров. Система сама подставляет корректные значения и автоматически расставляет стойки фахверка, связевые блоки, стеновые и кровельные прогоны в соответствии с инженерными правилами.

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

Кровля. Выбирается тип обшивки —, сэндвич-панель или профлист. Для каждого варианта задается толщина утеплителя, влияющая на стоимость, и цвет.

Окна, двери, ворота. Пользователь выбирает тип объекта и его размер, после чего на модели появляются активные точки — места, куда можно установить элемент. Свободное перемещение по стене не предусмотрено, только в конструктивно допустимых позициях. Это исключает ошибки и гарантирует, что полученная конфигурация будет реализуема.

Услуги. Финальный этап — выбор дополнительных опций: доставка, монтаж, проектирование. Эти параметры не влияют на модель, но включаются в итоговый расчет.

Расчет стоимости

•

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

3D-визуализация

•

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

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

Сохранение проекта

•

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

Результаты

•

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

•

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

•

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

•

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