Hangar 3D Configurator — 3D-калькулятор ангаров и логистики
Web + Windows
Цифровой калькулятор для Hebei Guanjia Ltd. — от размеров ангара и WebGL-модели до спецификации, логистики из Китая и готового коммерческого предложения.
React 18Three.js 0.158React Three Fiber 8Electron 28ExcelJSPHP + MySQL
Менеджер терял время между таблицей, чертежом, логистикой и расчётом маржи
В продаже быстровозводимых зданий клиент ожидает быстрый ответ: как выглядит объект, сколько металла и панелей потребуется, сколько машин нужно и какой будет итоговая стоимость. Раньше эти части предложения рассчитывались отдельно и могли расходиться после изменения одного параметра. Мы создали единый параметрический контур, где одна конфигурация управляет геометрией, спецификацией, упаковкой, маршрутом и коммерческим расчётом.
Задача
Ускорить подготовку сложного технического предложения
Решение
Связать 3D-модель, материалы, логистику и цену
02 / Боль → решение
Убрали разрывы между инженерной конфигурацией и продажей
01
Пересчёт занимает слишком долго
Изменение ширины, шага рам или типа панели заставляет вручную обновлять несколько таблиц.
Как решили
Связали все вычисления с одной параметрической моделью: геометрия, массы, площади и крепёж обновляются согласованно.
02
Цена и 3D могут расходиться
Визуализация живёт отдельно от ведомости материалов, поэтому клиент видит одну комплектацию, а КП считает другую.
Как решили
React Three Fiber строит WebGL-сцену из тех же параметров, которые получает расчётное ядро.
03
Логистика считается отдельно
Упаковка панелей, количество фур и погранпереход требуют ручной сверки и повторного ввода данных.
Как решили
Добавили алгоритм пачек, drag-and-drop распределение по машинам и сравнение маршрутов через Хоргос, Майкапчагай и Бахты.
04
Предложение трудно объяснить клиенту
Таблица не показывает будущий объект, а версии расчёта теряются в переписке.
Как решили
Сформировали фирменный Excel и короткую ссылку на интерактивную 3D-модель с возможностью восстановить JSON-конфигурацию.
03 / Информационная архитектура
Путь пользователя собран вокруг содержательной задачи
Параметры здания→Расчётное ядро→3D-геометрия→Ведомость материалов→Упаковка и фуры→Маршрут и налоги→Excel + 3D-ссылка
Архитектура подтверждена предоставленной документацией, структурой приложения и реальными экранами продукта.
04 / Ключевой UX
Одно изменение одновременно перестраивает объект и коммерческую модель
Менеджер задаёт габариты, секции, схему кровли, тип стали, панели, ворота и окна. Система сразу пересчитывает рамы, фермы, колонны, связи, прогоны, площади, крепёж и доборные элементы. В той же рабочей сессии можно проверить загрузку транспорта, выбрать маршрут, применить курс валют, пошлину, НДС, растаможку и маржу.
Управление параметрамиГеометрия, конструктивная схема и материалы в единой боковой панелиЛогистика и итоговая стоимостьМасса, фуры, маршрут, пошлина, НДС, доставка и прибыль
05 / Контентная модель
Расчёт разделён на модули, но использует одну конфигурацию проекта
BuildingConfig
Геометрия
Ширина, высота, кровля, секции, шаг рам и тип стали
Envelope
Панели и проёмы
Стены, кровля, раскладка, окна, ворота и доборные элементы
Bill of materials
Спецификация
Длины, площади, массы, количества и крепёж
PackagePlan
Упаковка
Пачки с учётом типа, длины, толщины, поддона и лимитов фуры
CommercialModel
Экономика
Цена товара, курс, пошлина, НДС, оформление, логистика и маржа
SharedConfig
Совместная работа
JSON, LZ-String, короткий URL, переходы и восстановление проекта
06 / Технический стек
Визуализация, расчёты, документы и совместная работа развиваются независимо
React 18 + Vite 5Компонентное приложение, hooks и быстрая production-сборкаThree.js 0.158 + R3F 8Параметрическая WebGL-сцена, камера, слои и прозрачностьExcelJSЗаполнение фирменных XLSX-шаблонов для металла и панелейdnd-kitРучная корректировка пачек и распределения по транспортуPHP + PDO + MySQLREST-подобный сервис коротких ссылок и статистики переходовElectron 28 + NSISWindows-приложение с изолированным preload-контекстом
07 / Интерактивные сценарии
Интерфейс помогает закончить задачу без лишних переходов
Orbit controls
Вращение, масштабирование и перемещение камеры
Layer control
Каркас, панели, проёмы и узлы с отдельной видимостью
Live recalculation
Мгновенное обновление геометрии и ведомости
Truck planning
Автоматическая упаковка и ручной drag-and-drop
08 / Доставка продукта
Один расчёт можно открыть в браузере, восстановить из файла или передать клиенту
Калькулятор работает в браузере и как Windows-приложение. Конфигурация сохраняется в JSON, сжимается LZ-String для передачи через ссылку и восстанавливается без повторного ввода. Статическая web-сборка готова для Vercel, Netlify или PHP/Plesk; desktop-сборка формирует NSIS-установщик. Административный модуль показывает опубликованные ссылки и переходы.
React + WebGLweb-клиент
LZ-Stringкомпактная ссылка
NSISWindows installer
XLSXкоммерческий документ
Расчёты позиционируются как предварительная оценка для подготовки предложения. Они требуют инженерной проверки и не заменяют конструктивный проект, расчёт несущей способности или рабочую документацию. Цифры в административном экране — демонстрационные.
09 / Контрольный контур
Коммерческий модуль показывает клиенту структуру цены, а менеджеру оставляет контроль ставок
Стоимость собирается последовательно: товары, крепёж, доборные элементы, пошлина, НДС, оформление, логистика и прибыль. Менеджер может корректировать ставки и площади, сравнивать маршруты и формировать документ из фирменного шаблона без переноса данных в стороннюю таблицу.
Цена материалов связана с текущей конфигурацией
Маршрут можно выбрать автоматически или зафиксировать вручную
Количество фур зависит от массы и упаковки
Маржа и обязательные платежи видны отдельными строками
Коммерческий расчётРеальный экран подготовки предложения
10 / Техническая проверка
Технический контур покрывает весь цикл предварительной продажи
01
Параметрическая геометрия
Лёгкая и тяжёлая сталь, односкатная и двускатная кровля, внутренние колонны и секции.
02
Автопереключение
При ширине более 20 м проект переходит в режим тяжёлой стали; предел интерфейса — 40 м.
03
Раскрой панелей
Экономичный и унифицированный варианты для торцевых стен.
04
Транспорт
Пачки учитывают длину, толщину, поддон и ограничения автомобиля.
05
Коммерция
Таможня, НДС, оформление, логистика и прибыль считаются последовательно.
06
Экспорт
ExcelJS заполняет XLSX-шаблон, а JSON восстанавливает исходную конфигурацию.
11 / Реальные интерфейсы
Ключевые сценарии показаны на работающих экранах продукта
Контроль опубликованных моделейКороткие ссылки и статистика переходов с демонстрационными данными3D-модель в движенииРеальная WebGL-модель: вращение ангара и проверка геометрии
12 / Результат
Менеджер получает единый инструмент для разговора с клиентом: показывает объект в 3D, меняет параметры в реальном времени, объясняет состав материалов, сравнивает доставку и выпускает согласованное коммерческое предложение.
Продукт сокращает ручные операции и риск расхождений между визуализацией, спецификацией и ценой. Фактическую экономию времени и рост конверсии следует измерить на эксплуатации.
React 18Three.js 0.158React Three Fiber 8Electron 28ExcelJS
Следующий проект
Нужен калькулятор, который превращает сложный продукт в понятное коммерческое предложение?
Разберём аудитории, контент, интеграции и поисковый спрос. Спроектируем структуру и технический контур до начала дизайна.
