Задача
Дом, который ещё не построен, обычно продают пачкой рендеров и PDF с планировками. Покупатель смотрит одно отдельно от другого и сам складывает в голове: где дверь, куда выходит гостиная, далеко ли спальня от кухни.
Здесь задача была в том, чтобы план и дом стали одним целым. Страница начинается с листа, который архитектор отдал бы в печать, и этот же чертёж при прокрутке превращается в здание, поэтому планировка понятна ещё до того, как вы зашли в первую комнату.
Это наш собственный концепт, а не заказ клиента, и работа над ним продолжается. За две недели он прошёл четыре полные версии; сама идея с планом этажа появилась только на четвёртый день.
Что сделали
Первый экран — лист чертежа
Страница открывается планом первого этажа: стены чёрным, названия комнат, площади и размеры, в углу штамп с масштабом и номером листа. Ничего здесь не выглядит объёмным, и это нарочно.
Этот план — не картинка. Это сама 3D-модель дома, разрезанная на высоте 1,2 метра и показанная строго сверху через очень длинный объектив, поэтому чертёж и здание — буквально одно и то же. Каждая стена на листе — это стена, мимо которой потом пройдёт камера.
Прокрутка поднимает разрез, и стены растут
Раз план — это разрез модели, никакого фокуса, чтобы сделать его объёмным, не нужно. Прокрутка поднимает высоту разреза, и читатель видит, как стены вырастают из бумаги.
Потом объектив укорачивается, камера опускается к входной двери и заходит внутрь. Дальше прогулка идёт вглубь дома, а не облетает его снаружи: прихожая, гостиная, обеденный стол, патио, стеклянная галерея, спальня, ванная и сад.
Каждая комната — линейный чертёж, пока вы до неё не дошли
Комнаты впереди камеры остаются нарисованными тонкой чёрной линией по белому, как страница проекта. Когда камера приходит, по комнате пробегают настоящие материалы: камень, дуб, орех, мрамор, лён, штукатурка.
Так мысль первого экрана живёт всю прогулку. Читатель ни разу не смотрит на готовый рендер — он видит, как чертёж становится домом, комната за комнатой.
Дом с мебелью, оливой и светом под вечер
Дом должен ощущаться как дом за несколько миллионов: большие комнаты, настоящая мебель, утопленный диван у камина, длинный обеденный стол, олива в патио и бассейн за садом. Свет — низкое солнце под вечер, оно и даёт комнатам глубину.
Всё это, от стен до стульев и дерева, — геометрия, написанная кодом. Никакого файла из Blender за этим домом нет. Поверхности — бесплатные сканы CC0 с Poly Haven.
Прогулка кончается там, где началась
После сада камера поднимается над крышей, показывает весь дом сверху уже построенным, и план возвращается листом. Последний экран говорит это одной строкой: каждое здание начинается плоским, наши такими не остаются.
Под этой строкой одна кнопка, и она открывает чат в WhatsApp. Никакой формы в конце такой прогулки нет.
Техническая часть
Дом рисуется прямо в браузере, поэтому основная работа ушла в модель, вес текстур и стабильную картинку, пока движется камера. Вот что лежит под прогулкой.
Модель
План — это разрез модели
План этажа рисуется из 3D-модели: разрез на 1,2 м, вид сверху через очень длинный объектив, который сплющивает её в чертёж.
Семнадцать помещений, все в коде
От гаража и винной комнаты до главной спальни и сада каждая стена, каждый предмет мебели и олива собраны в коде.
three.js, GSAP и Lenis, без сборки
Сцена работает на three.js, прогулка привязана к прокрутке через GSAP ScrollTrigger и сглажена Lenis. Сайт — обычные файлы, которые отдаются как есть: сцена и прогулка вместе занимают около 130 КБ скрипта.
Вес и загрузка
Тринадцать материалов CC0 в двух размерах
Ноутбук грузит полный набор из тринадцати материалов, около 39 МБ, а телефон — тот же набор вчетверо меньше по пикселям, около 13 МБ. Poly Haven
Экран загрузки, который не врёт
Проценты считают 41 файл, который сцена действительно запрашивает, а последнюю десятую оставляют на подготовку сцены, поэтому число никогда не откатывается назад.
Запасной вариант вместо пустой страницы
Дому нужен WebGL 2. Браузер без него или тот, что посреди прогулки теряет графический контекст, получает кадр дома и ролик прогулки, и визит всё равно показывает, о чём страница.
Стабильная картинка
Один бюджет пикселей на всю прогулку
Вместо того чтобы переключать размер отрисовки между комнатами — из-за этого картинка дёргалась, — прогулка рисует постоянные 2,4 мегапикселя на ноутбуке и 1,5 на телефоне.
Мерцание найдено и убрано
Потолок мерцал после остановки прокрутки; причиной оказалась солнечная пыль в воздухе, поэтому пыль убрали, а солнце и его лучи оставили.
Что получилось
- Одна прокрутка проводит читателя от печатного плана через семь комнат дома.
- Весь дом — геометрия в коде, одетая в тринадцать бесплатных материалов CC0.
- Телефон скачивает примерно треть тех текстур, что берёт ноутбук.
- Устройство, которое не тянет дом, получает кадр и ролик прогулки, а не пустую страницу.
Страница отвечает на вопрос, на который один план не отвечает никогда, — каково стоять в этом доме, — и при этом план никуда не девается. Для архитектора или девелопера это разница между покупателем, который читает чертёж, и покупателем, который проходит по своей будущей гостиной.
