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