Автор: 希彼赫
Попробовать онлайн О проекте
FLORA переносит страны чемпионата мира и их знаковые цветы в тёплый выставочный зал: аргентинская жакаранда, голландский тюльпан, японская хризантема, колумбийская каттлея — каждый цветок это 3D-модель, созданная с помощью Tripo, на вращающейся подставке, которую можно крутить и рассматривать вблизи.
Архивные карточки в стиле «жидкого стекла» описывают научное название, семейство, время цветения, символику и культурные заметки каждого цветка; панель флагов переключает страны одним кликом, а с камерой можно листать жестами рук. Ассеты следуют единому протоколу поставки (ориентация +Z, начало координат у основания стебля), а недостающие места автоматически заполняют процедурные дублёры.
Ключевые моменты
- Перетаскивайте, чтобы вращать каждый экспонат на подставке; двойной клик — крупный план
- Переключайте страны одним кликом по панели флагов или листайте жестами рук перед камерой
- Архивные карточки в стиле «жидкого стекла» показывают научное название, семейство, время цветения, символику и культурные заметки
- Отсутствующие ассеты автоматически заменяются процедурными дублёрами по тому же протоколу — ни один постамент не пустует
Технический разбор
3D-экспонаты · Tripo text-to-3D
Шесть национальных цветов зала — каттлея, георгин, стрелиция, хризантема, жакаранда и тюльпан — целиком созданы в Tripo text-to-3D, экспортированы в GLB и подгружаются в зал по мере необходимости через GLTFLoader.
Каждый цветок выдан по одной конвенции: лицом к +Z, начало координат у корня стебля, высота около одной единицы. А если какой-то экспонат вдруг пропадёт, код по той же конвенции вырастит процедурную замену и поставит её на постамент — витрина никогда не пустует.
Тёплый свет · IBL через RoomEnvironment
В зале не расставлено ни одного светильника: весь тёплый свет даёт RoomEnvironment из Three.js — он генерирует карту окружения, благодаря которой PBR-материалы моделей Tripo естественно раскрывают блики и мягкое рассеяние. Никакой настройки ламп по одной — одна карта окружения, и свет готов.
Музейные таблички · CSS3DRenderer
Научные названия, семейства и культурные заметки на табличках — это настоящие DOM-элементы, которые вращаются синхронно с 3D-сценой через CSS3DRenderer. Польза самая практическая: текст остаётся чётким с любого расстояния, его можно выделить и скопировать, и даже эффект «жидкого стекла» написан обычным CSS.
Листание жестами · MediaPipe Hands
Помимо клика по панели флагов внизу, по залу можно листать и бесконтактно: MediaPipe Hands читает руку через камеру, взмах — и вы у стенда следующей страны. Весь зал можно обойти, не касаясь мыши.
