Интерактивный 3D-веб-опыт для Prescott & Davies Law
В этом проекте смоделированная в Blender статуя Фемиды помещена в сцену three.js, превращая классический сайт юридической фирмы в интерактивный 3D-опыт, ориентированный на десктоп. При загрузке страницы пользователей встречают анимации камеры и освещения вокруг статуи, после чего они переходят в отдельные 3D-сцены, связанные с каждой практикой.
Краткий обзор инструментов, которые мы использовали, и конкретных результатов, которые мы реализовали — от 3D-моделирования в Blender до работающей реализации на three.js в браузере.
Hero-сцена с 3D-Фемидой
Смоделированная в Blender статуя Фемиды располагается в центре hero-блока, отрисовывается с помощью three.js и плавно вращается, задавая тон всему опыту.
Отдельные 3D-сцены для каждой практики
Каждое юридическое направление (консалтинг, договоры, уголовное право, трудовое право, недвижимость) запускает собственную GLTF-модель и контент с анимированными переходами между объектами.
Двухсценная архитектура three.js
Одна сцена отведена главному hero-блоку с Фемидой, а вторая обслуживает модели отдельных услуг — у каждой своя камера и свой рендерер.
Синхронизированная вступительная анимация камеры и освещения
При первой загрузке камера движется от основания статуи вверх к лицу, а вращение модели и свет анимируются на общей tween-таймлинии.
Освещение, реагирующее на мышь, и кастомный курсор
Направленный и заполняющий свет мягко реагируют на движение мыши, а кастомный курсор со шлейфом добавляет тонкий слой интерактивности поверх всего макета.
Ориентация на десктоп и сценарий загрузки
Модели со сжатием Draco загружаются через кастомный менеджер загрузки и оверлей, а мобильные посетители видят специальное уведомление о том, что опыт оптимизирован для десктопа.
Давайте создадим вместе
Развивайте свой бизнес с решениями креативной студии dodbyte — свяжитесь с нами прямо сейчас