Автор: 桌子
Попробовать онлайн О проекте
Maya Bennett — 3D-резюме из шести разделов о вымышленном графическом дизайнере. Четыре фруктовые модели Tripo перемещаются между разделами о биографии, образовании, карьере и профессиональных навыках, а прокрутка двигает импортированную анимацию камеры вперёд или назад.
Слой WebGL отделён от HTML-резюме, поэтому историю можно читать и пропускать даже без 3D-сцены. Ниже шесть проектов по брендингу, упаковке и редакционному дизайну открываются в отдельных подробных представлениях, а Color Lab предоставляет доступ к настройкам освещения, фокуса и материалов, формирующим итоговый образ.
Ключевые моменты
- Прокрутите шесть разделов резюме: импортированная анимация камеры движется вместе с вами, а при прокрутке назад весь маршрут естественно воспроизводится в обратном направлении.
- Перетащите любую из четырёх парящих моделей фруктов, чтобы раскрутить её по инерции, а затем наблюдайте, как она возвращается на своё место в сцене.
- Откройте Color Lab, чтобы в реальном времени настроить экспозицию, глубину резкости, EXR-освещение и материал каждого фрукта.
- Перейдите к шести выбранным проектам по айдентике, упаковке и редакционному дизайну, каждый из которых открывается в отдельном подробном представлении.
Технический разбор
3D-ресурсы · фруктовые модели Tripo
Банан, помидор, клубника и яблоко поставляются как четыре GLB-ресурса, узлы сцены и материалы которых содержат идентификаторы Tripo. React Three Fiber загружает каждый ресурс через один общий компонент, а конфигурация сцены управляет масштабом, положением, парящим движением и смещениями фокуса.
Хореография прокрутки · GSAP + анимированная камера
GSAP ScrollTrigger сопоставляет ход прокрутки резюме с единой шкалой времени от 0 до 1. Импортированный GLB камеры нормализуется до пяти секунд и считывается на кадрах 0, 60, 120, 180, 240 и 300, поэтому каждый раздел останавливается в заданной точке и воспроизводится в обратном направлении при прокрутке вверх.
Взаимодействие с фруктами · перетаскивание с кватернионами и возврат
Движение указателя управляет кватернионным вращением и ограниченной угловой скоростью. После отпускания каждый фрукт ещё недолго вращается по инерции, затем затухание возвращает его в заданную позу и постепенно возобновляет автоматическое движение. Одинаковая траектория указателя работает с мышью и сенсорным экраном.
Кинематографическая обработка · EXR-свет, автофокус и Color Lab
EXR-небо освещает PBR-материалы через PMREM, а фиксированная камера с объективом 25 мм переводит фокус между группой из четырёх фруктов и активным объектом. BokehPass, свечение и цветокоррекция завершают кадр, а Color Lab позволяет управлять этими настройками в реальном времени.
