Одна 3D-сцена под любую страницу — от бытовки до дома.
Базовый только холст — один WebGL-канвас на весь сайт. Всё остальное — модель, материалы, окружение, ракурс — сцена собирает под конкретную страницу. Вы внутри кейса, собранного из самого сайта: модель настоящая, её можно крутить.
Из «дешёвых контейнеров» — в сборные модули под задачу.
«Модуль 51» поставляет сборные модули фиксированной длины 6 м двух типоразмеров — шириной 3.0 и 2.5 м — и адаптирует их под задачу клиента: бытовка, КПП, торговая точка, дача, баня, склад, многомодульный жилой блок. До рестайла компания позиционировалась как «контейнерная».
Нужно было перевести коммуникацию в B2B-формат «сборные модули под задачу» и показать это не словами, а самим продуктом. Поэтому за контентом всех страниц живёт одна трёхмерная сцена: модель сборного блока меняет вид и материалы вслед за маршрутом — без прыжка между фоном-картинкой и реальным рендером.
Чёрный, off-white и ни одного лишнего цвета.
Нажмите на цвет — покажем, где он работает на карточке модуля.
Основной текст, заголовки и главная кнопка. Почти чёрный на холодном off-white: аудитория — прорабы, предприниматели, госзаказчики, поэтому подача рациональная — размеры, сроки, цена.
Фон страницы. Холодный off-white, в который без шва вливается светлый фон 3D-сцены — рендер не выглядит тёмным островом посреди сайта.
Чистый белый для карточек и панелей: блок типоразмера, плитки каталога, цена. Плоско, без скруглений и теней — только линия в 1px.
Чуть более глубокий фон: наведение на плитку каталога и кнопку меню. Состояние показано на полтона, а не цветом.
Приглушённый текст: подписи характеристик, пояснения, подпись поверх сцены.
Единственный акцент интерфейса — и тот используется скупо: состояние hover у главной кнопки. Никакого золота и декоративных курсивов.
Единственный яркий цвет живёт не в интерфейсе, а в 3D: угловые фитинги модуля. Интерфейс молчит — взгляд достаётся модели.
Бытовка стандарт
- Внешние размеры
- 6.0 × 3.0 × 2.8 м
- Площадь
- 18 м²
Шесть экранов
На каждом — та же сцена, но в своём режиме и со своего ракурса. Снято с живого сайта.
ГлавнаяОффер слева, модель справа: текст и 3D делят экран, а не спорят за негоОткрыть →
КаталогПять категорий плитками — от бытовок до жилых домов из нескольких модулейОткрыть →
Категория«Для бизнеса»: сцена сама переключается на торговый модуль и песочный фонОткрыть →
Карточка модуляТипоразмер крупно в шапке, характеристики, комплектация, опции в сметуОткрыть →
ДоставкаНа странице логистики модель поднимает кран-манипуляторОткрыть →
О компанииКамера подлетает к фасаду, рядом с модулем — три бригадные фигурыОткрыть →Десять режимов
На сайте клиента режим выбирает маршрут. Здесь — вы: нажмите на плитку, и сцена в хиро переключится.
Четыре шага
- 01Переход
Посетитель открывает раздел. Канвас живёт в корневом layout и не размонтируется — модель не инициализируется заново.
- 02postMessage
React-хост выводит из URL режим и пресет камеры и отправляет их в iframe со сценой.
- 03Материалы
Сцена плавно переключает материалы, окружение и видимость подгрупп: был контейнер — стала баня с трубой и купелью.
- 04Камера
Ракурс меняется за 800 мс по easeInOut. В покое камера медленно «дышит» и замирает, когда модель крутит человек.
Размер — крупно в шапке.
Два клиентских компонента с сайта. Оба рабочие — понажимайте.
- Внешние размеры
- 6.0 × 3.0 × 2.8 м
- Площадь
- 18 м² (полезная ~15 м²)
Переключатель типоразмеров на карточке: клик мгновенно меняет габариты и площадь, без подзагрузки. Размер — главный коммерческий параметр, поэтому стоит первым.
Попробуйте 80291234567 или вставьте номер из буфера. Демо: ничего не отправляется.
Маска белорусского телефона поверх react-hook-form: принимает +375…, 8029…, чистые цифры и вставку из буфера, приводит к одному виду.
Шесть решений, на которых всё держится
Сцена живёт в отдельном документе: HMR Next-приложения не убивает WebGL-контекст и текстуры при правках кода.
На десктопе модель сдвинута в правую часть канваса — под контент-колонку слева, на мобиле — в верхнюю, под скролл текстом снизу.
Все страницы каталога пререндерятся через generateStaticParams. Клиентские — только сцена и лид-форма.
Одна схема даёт и валидацию лид-формы, и тип значений для react-hook-form.
Tailwind v4 с переменными палитры: сайт перевели из «editorial»-стиля в B2B-функциональный за один день.
Модель данных Product / ProductFormat / ProductOption заранее структурирована под будущий конфигуратор.
- Next.js 16
- React 19
- TypeScript
- Three.js r128
- Tailwind v4
- react-hook-form
- zod
- Vercel
Частые вопросы
Почему Three.js без React-обёрток?
Нужен был полный контроль над сценой и iframe-изоляцией. Сцена — самодостаточный документ на ванильном Three.js r128, хост общается с ней только через postMessage.
Что происходит с 3D при переходе между страницами?
Ничего не перезагружается. Один WebGL-канвас остаётся примонтированным при навигации, меняются только режим и ракурс — поэтому нет прыжка между фоном-картинкой и реальным рендером.
Как модель помещается рядом с текстом?
Камера рендерит кадр со смещением (setViewOffset): на десктопе модель уходит в правую часть экрана, на мобиле — в верхнюю, а текст скроллится поверх.
Чем удобна маска телефона?
Поле принимает любой ввод — +375…, 8029…, чистые цифры, вставку из буфера — и нормализует в +375 (XX) XXX-XX-XX. Zod проверяет точно по маске: полузаполненный номер отправить нельзя.
Где в сцене пасхалка?
На задней стене модели контейнера — «YARCHE.by» жёлтым. Видна, только если покрутить сцену. Логотип запечён в PNG, чтобы не таскать в iframe второй экземпляр шрифта (~50 КБ экономии на первом визите). Вернитесь в хиро и проверьте.
Контейнеров больше нет. Есть модули под задачу.
Сайт развёрнут, лид-форма работает, каталог наполнен: 8 модулей в пяти категориях. 3D-сцена стартует параллельно с DOM — контент-колонка готова раньше, чем сцена закончит инициализацию. Слово «контейнеры» убрано из всей копии: компания читается как поставщик и интегратор сборных модулей.