YENNI
Все проекты

03 / 05

MONOLITH

Категория
Архитектура · 3D-веб-опыт
Язык сайта
Английский
Статус
Независимый концептуальный проект

Архитектурное бюро, которое исследуют через маршрут камеры, разобранную модель и библиотеку материалов.

Открыть сайт вживую
Fig. 01Главный экран — прибытие к Monolith House

Вопрос

Как показать здание на экране так, чтобы оно всё равно ощущалось весом?

Идея

Вымышленное экспериментальное архитектурное бюро с пятью монументальными концептуальными зданиями. Сайт ведёт себя как здание: к нему подходишь, переступаешь порог и поднимаешься над ним.

Визуальный язык

Бетон с отпечатком опалубки, косое солнце и графитовая бумага. Живая сцена Three.js ведёт камеру через семь этапов — прибытие, приближение, порог, коридор, зал, взгляд сверху — вместе с обычной прокруткой, не перехватывая её.

01

Маршрут в семи этапах

Прокрутка двигает камеру: от фасада через восьмиметровый коридор к взгляду сверху на весь дом. У каждого этапа одна короткая подпись — говорит само здание.

1 / 3

Fig. 03Этап 02 — фасад, измеренный тенью

2 / 3

Fig. 04Этап 04 — коридор, восемь метров сжатия

3 / 3

Fig. 05Этап 07 — взгляд сверху в конце маршрута
Fig. 06Разобранная аксонометрия — модель, раскрытая на пять слоёв

02

Разобрано слой за слоем

Разобранная аксонометрия делит дом на пять слоёв. Выберите точку обзора, откройте модель и выберите слой — в списке или прямо на чертеже, — чтобы прочитать, как он работает.

03

Материал и свет

Пять материалов изучены под низким утренним солнцем и высоким полуденным. Раздел о бюро объясняет практику тем же сдержанным голосом.

Fig. 07Библиотека материалов — открытый бетон под косым светом
Fig. 08Бюро — практика в одном абзаце

04

Архив

Пять концептуальных зданий — у каждого своя композиция, данные и досье, которое открывается по прямой ссылке.

Fig. 09Архив — «Five studies in weight and light»
Fig. 10Архив — Court of Silence, музей вокруг внутреннего двора
Fig. 11Архив — Limestone Residence, два смещённых объёма
Fig. 12Архив — Void Chapel, единственный вертикальный разрез света
Fig. 13Досье проекта — The Monolith House по прямой ссылке

05

Мобильная версия без компромиссов

На телефоне маршрут, архив и модель сохраняют свою логику и элементы управления.

Fig. 14Мобильная версия — главный экран
Fig. 15Мобильная версия — этап коридора
Fig. 16Мобильная версия — модель

06

Указатель и контакты

Указатель исследований в виде таблицы с превью при наведении и раздел контактов, сохраняющий чертёжный язык.

Fig. 17Указатель исследований — пять зданий в одной таблице
Fig. 18Контакты — «Begin with the site»

07

Финальный кадр

Сайт заканчивается так же, как начинается, — названием в монументальном масштабе.

Fig. 19Финальный экран — название в монументальном масштабе

Детали дизайна

  1. 01Монохромная бетонная палитра с техническими, чертёжными пометками
  2. 02Архитектурные плиты, отрендеренные из того же 3D-набора
  3. 03Крупный шрифт, широкие поля и строгая сетка

Взаимодействие

  1. 01Семиэтапный маршрут камеры, привязанный к обычной прокрутке
  2. 02Вращение мышью или стрелками, разобрать / собрать, выбор слоя
  3. 03Заранее отрендеренные кадры вместо WebGL, если он недоступен

Технологии

  • React 19
  • TypeScript
  • Vite
  • Three.js
Открыть сайт вживую
Все проекты
Следующий проект — 04 / 05KŌIKEIЕда и гостеприимство · Интерактивное меню← Предыдущий: FRESH SALT

1 / 1