На 3D-сайте жилого проекта модель здания в реальном времени становится главным инструментом выбора и покупки жилья. Вместо галереи визуализаций и отдельной таблицы цен покупатель вращает модель, наводит курсор на окно и видит число комнат, площадь, цену и статус именно этой квартиры. После применения фильтров подсвечиваются только подходящие варианты. Если дом ещё не построен, такой просмотр позволяет почти ощутить себя у готового здания в сумерках.
Это и самый требовательный к разработке вариант.
Почему само здание - лучший инструмент продаж
Первые вопросы покупателя связаны с пространством: какая сторона здания солнечная, что видно со стороны двора. Обычный список этого не объяснит, а модель сразу даёт ответы для каждой квартиры.
Основную задачу решают три способа взаимодействия:
- Выбор квартиры по окну. Каждое окно или балкон связаны с отдельной квартирой. При наведении курсора или нажатии появляются число комнат, площадь, сведения о балконе, террасе или другой открытой зоне, цена и статус.
- Подсветка свободных квартир. Одним переключателем можно приглушить проданные и забронированные квартиры и подсветить оставшиеся. Так покупатель видит ограниченность предложения без дополнительных рекламных текстов.
- Смена дневного и вечернего освещения. При утреннем свете легче понять ориентацию здания и виды из окон. В сумерках тот же вид становится главным атмосферным кадром.
Демонстрационный проект в Таллине
Чтобы проверить эти идеи, мы создали демонстрационный жилой проект в Таллине: историческое промышленное здание из кирпича, показанное в сумерках с помощью 3D в реальном времени. В нём предусмотрены:
| Возможность | Что позволяет делать |
|---|---|
| Каждое окно связано с квартирой | Подсказка при наведении: комнаты, площадь, балкон или другая открытая зона, цена и статус |
| «Подсветить свободные квартиры» | Переключатель, подсвечивающий только непроданные квартиры |
| Выбор фасада | Выбор стороны здания обновляет таблицу с фильтрами под моделью |
| Окрестности в минутах ходьбы | Время пешком до повседневных мест вместо общих эпитетов |
| 5 этапов строительства | От разрешения на строительство до передачи ключей, чтобы покупатель видел текущий этап |
| Форма обращения в отдел продаж | Выбор числа комнат и ползунок цены; выбранная квартира уже указана в форме |
| Облегчённая версия для слабых смартфонов | Вместо интерактивной модели - заранее отрендеренный зацикленный ролик |
Это демонстрационный проект, а не выведенный на рынок жилой комплекс, поэтому результатов его работы у нас нет. Он показывает, как меняются элементы интерактивного модуля выбора квартир, когда вместо статичной визуализации используется живая 3D-сцена.
Что нужно для 3D-визуализации жилого проекта
Модель
Начните с CAD- или BIM-модели архитектора и переработайте её для сайта. Строительная модель слишком тяжёлая: для веб-версии оставляют фасад, окна, балконы и упрощённый участок, а мелкие детали переносят в текстуры. Результат обычно передают в glTF, стандартном формате 3D для веба. Геометрию сжимают с помощью Draco, текстуры - с помощью KTX2/Basis.
Каждое окно или балкон выделяют в отдельный объект модели, имя которого совпадает с ID квартиры. Именно это простое правило позволяет выбирать квартиру по окну.
Данные
Цены в самой модели не хранятся. Во время работы сайт загружает таблицу квартир из CRM, headless CMS или общей электронной таблицы, сопоставляет ID квартир с объектами модели и окрашивает их по статусу. Когда отдел продаж бронирует квартиру, модель здания обновляется при следующей загрузке.
Освещение
Смену дня и сумерек можно показать с помощью двух заранее рассчитанных вариантов освещения и перехода между ними либо рассчитывать свет в реальном времени. Первый вариант легче и предсказуемее работает на смартфонах; второй даёт больше свободы для анализа солнечного освещения. Мы обычно рассчитываем свет заранее.
Как обеспечить быструю работу интерактивной 3D-модели здания
3D создаёт нагрузку, и на смартфонах она особенно заметна. По данным Utsubo, даже минифицированное ядро Three.js занимает около 600 КБ без кода самой сцены. С вспомогательными модулями, постобработкой и моделью суммарный объём может превысить 3 МБ. По критериям Google хороший LCP составляет не более 2,5 с (web.dev).
Как мы это решаем:
- Сначала HTML. Заголовок, цены, наличие и список квартир появляются в обычном HTML до запуска 3D. Utsubo советует «сначала отдавать страницу в HTML, а canvas подключать после».
- Статичный первый кадр. Сначала показываем изображение здания в сумерках; оно и становится элементом LCP.
- Загружаем сцену отложенно после первого отображения страницы и только тогда, когда первый экран попадает в поле зрения.
- Проверяем устройство и выбираем подходящую версию. На слабых смартфонах показываем заранее отрендеренный зацикленный ролик и 2D-модуль выбора квартир по фасаду с теми же данными. Пустой области вместо модели не будет.
- Задаём ограничения для сцены. Ограничиваем размер модели, память для текстур и число команд отрисовки. Проверяем результат на Android-смартфоне среднего класса, а не на рабочем ноутбуке студии.
Полный список проверок - в статье «Производительность 3D-сайта».
Когда стоит делать 3D-сайт жилого проекта
| Ситуация | Наше мнение |
|---|---|
| Продажа до завершения строительства, от 40 квартир, выразительная архитектура | Да: модель используется и на сайте, и в офисе продаж, и в роликах |
| Историческое или знаковое здание | Да: само здание становится основой рассказа |
| Менее 15 квартир, простое здание | Скорее нет: достаточно качественного модуля выбора квартир на основе визуализации |
| Нет надёжного прайс-листа или порядка обновления статусов | Сначала наладьте данные: 3D с устаревшей информацией хуже, чем сайт без 3D |
Какое бы решение вы ни выбрали, 3D дополняет полноценный сайт жилого комплекса. Планы, расположение, ход строительства и контакты должны оставаться доступными и без него.
