GKA Docks
GKA Docks — производитель модульных понтонных конструкций: причалы, пирсы, площадки и переходные мостики для яхт-клубов, марин, баз отдыха и частных набережных.
Какие KPI поставил клиент
Дать менеджеру возможность собирать понтонную конструкцию из каталога прямо в браузере — drag-and-drop, как в конструкторе
Считать цену, число соединительных комплектов и габариты на лету по мере сборки — без ручных смет в Excel
Показывать готовую конструкцию в фотореалистичном 3D на воде — клиент видит результат ещё до изготовления
С какой проблемой пришёл клиент
GKA Docks проектирует и производит модульные понтонные конструкции — причалы, пирсы, площадки и переходные мостики для яхт-клубов, марин и загородных комплексов. Каждый заказ уникален: своя комбинация прямоугольных, угловых и трапециевидных понтонов, трапов, ограждений и креплений.
До конфигуратора смету по каждому проекту менеджер собирал вручную. Это долго, а главное — легко ошибиться в количестве соединительных комплектов и торцевых заглушек: их число зависит от того, как именно блоки стыкуются между собой. Клиент при этом не видел будущую конструкцию, и согласование растягивалось.
- Точный подсчёт крепежа зависит от геометрии стыковки — ручной расчёт ненадёжен
- Клиент не может оценить конструкцию до изготовления
- Визуализация, смета и сохранение проекта жили в разных инструментах
- Нужна интеграция с внутренней CRM — клиенты и проекты
Что мы сделали
2D-редактор на HTML5 Canvas
Разработали редактор с drag-and-drop из каталога, привязкой к сетке, поворотами, мультивыделением, undo/redo и слоями (вода/пирс). Прямоугольные, угловые и трапециевидные понтоны, трапы, ограждения и крепления отрисовываются точными формами.
Умная стыковка и автофурнитура
Реализовали «магнитную» стыковку: при перетаскивании блок сам подтягивается к соседу по точкам соединения с точностью 0,02 м. Активаторы автоматически добавляют скрытый крепёж (полукости) при правильном совмещении — менеджер не считает фурнитуру вручную.
Автоматические расчёты
Всю бизнес-логику вынесли в чистые функции: подсчёт соединительных комплектов по фактическим стыкам точек (а не по всем примыканиям блоков), торцевых заглушек, габаритов и итоговой цены. Расчёт пересобирается мгновенно при каждом изменении конструкции.
3D-превью и экспорт сметы
Собрали сцену на Three.js + React Three Fiber: вода, пляж или пирс, мягкие тени, наклон трапов под углом. Добавили экспорт сметы в Excel с изображениями товаров и скриншоты сцены до 3200px. Конфигурация сохраняется и открывается по ссылке, а проект привязывается к клиенту во внешней CRM.
Использованные технологии
Факторы успеха
Магнитная стыковка с автофурнитурой
Точки соединения и активаторы сами ставят скрытый крепёж при совмещении блоков — смета всегда точна, а менеджеру не нужно держать геометрию стыков в голове.
Честный подсчёт комплектов
Соединители считаются по реально состыкованным точкам, а не по всем соприкосновениям блоков — клиент платит ровно за тот крепёж, который действительно нужен.
2D-сборка → 3D без переключений
Один и тот же проект редактируется в 2D и тут же смотрится в фотореалистичном 3D на воде — решение принимается, когда клиент уже видит результат.
Алексей Геруцкий
Руководитель разработки, PRIMO Agency
«Самым сложным здесь был не 3D, а геометрия стыковки. Понтоны соединяются через точки с фиксированным шагом, и количество крепежа зависит от того, как именно блоки прилегают друг к другу. Мы вынесли эту логику в чистые функции с property-based тестами — поэтому смета, которую видит клиент на экране, совпадает с тем, что реально едет на производство.»
Хотите такие же результаты?
Оставьте заявку — проведём бесплатный аудит и составим стратегию роста для вашего бизнеса