Модуль 51 — лендинг с интерактивной 3D-сценой
Лидген-сайт с трёхмерной сценой, которая живёт за контентом всех страниц. WebGL-канвас не размонтируется при навигации — 3D-модель плавно меняется по маршрутам.
containers-web.vercel.app →10
режимов 3D-сцены
WebGL
Three.js + Next.js
1
холст на все страницы
Клиент: Модуль 51 (Минск), сборные модульные здания · Год: 2026
Лидген-сайт с трёхмерной сценой, которая живёт за контентом всех страниц. Один WebGL-канвас остаётся примонтированным при навигации — 3D-модель сборного блока плавно меняет вид и материалы в зависимости от маршрута. Никаких прыжков между фоном-картинкой и реальным рендером.
Стек
| Слой | Технология |
|---|---|
| Фреймворк | Next.js 16 (App Router), React 19, TypeScript |
| 3D | Three.js (vanilla, без React-обёрток) — нужен полный контроль над сценой и iframe-изоляцией |
| Формы | react-hook-form + zod |
| Стили | Tailwind v4 |
| Хостинг | Vercel, auto-deploy с main |
Что внутри
- 10 режимов 3D-сцены: контейнер, КПП, банный модуль, дачный домик, мини-маркет, фуд-поинт, жилой блок «квадратом», склад, доставка краном, страница «о компании»
- Камера со своим пресетом на каждой странице — плавные 800мс-переходы между ракурсами
- Изоляция Three.js в iframe — HMR Next-приложения не убивает WebGL-контекст при правках кода
- Каталог 5 категорий с переключателем типоразмеров (6×3.0 / 6×2.5 м) без перезагрузки
- Маска белорусского телефона в лид-форме — нормализует любой ввод в
+375 (XX) XXX-XX-XX - Перепозиционирование бренда — клиент из «дешёвых контейнеров» переведён в B2B-формат «сборные модули под задачу»
Хотите похожий проект?
Обсудим задачу, рассчитаем стоимость и сроки. Бесплатная консультация по любому из направлений digital.
Обсудить проект →