Сайт, в котором 3D-город стал меню
Задача
Заказчик хотел получить не очередной типовой сайт инженерной компании, построенный вокруг стандартного перечня услуг. Главной особенностью проекта должно было стать интерактивное меню на основе 3D-модели.
Нам предстояло соединить в одном решении две задачи.
Первая — создать яркий и запоминающийся образ компании, способный выделить её среди других участников технического рынка.
Вторая — сделать 3D-механику практически полезной. Пользователь должен был не просто рассматривать модель, а с её помощью находить подходящее направление работы и переходить к нужному разделу сайта.
Сложность заключалась в том, чтобы совместить полноценную трёхмерную сцену, анимацию и необычный пользовательский сценарий с обычными функциями коммерческого сайта: рассказом о компании, калькулятором проекта, описанием проектного отдела, командой и примерами выполненных работ.
Решение
В основу концепции легла простая идея: клиенту легче узнать свой объект, чем разбираться в длинном списке инженерных систем.
Поэтому вместо традиционного каталога услуг мы создали целый город, объединяющий различные сценарии применения климатического оборудования. В нём представлены частные дома, современные жилые комплексы, офисы, кафе и рестораны, склады, гаражи, магазины, производственные и небольшие помещения.
Пользователь попадает в трёхмерный мир и вращает его при помощи мыши или сенсорного экрана. При повороте города в определённом секторе появляется тематическая карточка. Из неё можно перейти к соответствующему направлению и посмотреть решения для выбранного типа объекта.
Вращение сцены связано с анимацией транспорта: положение автомобиля изменяется синхронно с поворотом камеры. Благодаря этому город воспринимается как единое живое пространство, а не как статичная модель, установленная на фоне сайта.
Для усиления эффекта присутствия мы добавили движущийся транспорт, воду, окружающий ландшафт и переключение дневного и ночного режима. При смене времени суток изменяются освещение, атмосфера и светящиеся элементы сцены.
Одновременно мы сохранили привычную навигацию. Через обычное меню пользователь может сразу открыть калькулятор, проектный отдел, информацию о команде или реализованные проекты. Это позволило объединить эмоциональный 3D-сценарий и понятную структуру коммерческого сайта.
Что было сделано
Проект выполнен командой под ключ:
— разработана концепция сайта и пространственной навигации;
— спроектирована структура интерактивного города;
— выполнены 3D-моделирование, сборка и оформление сцены;
— подготовлены и оптимизированы модели для работы в веб-браузере;
— созданы материалы, освещение, окружение и анимация;
— разработана логика появления разделов при вращении города;
— реализована синхронизация положения камеры, движения автомобиля и контекстных карточек;
— запрограммировано переключение дневного и ночного режима;
— выполнено программирование интерактивной части на Babylon.js и WebGL;
— разработаны интерфейс, вёрстка и внутренние страницы;
— выполнена интеграция 3D-сцены в полноценный сайт заказчика.
Часть базовых моделей — отдельные дома, автомобили и персонажи — была приобретена на специализированных площадках по коммерческим лицензиям. Команда адаптировала эти ассеты, оптимизировала их для браузера и объединила с созданными элементами в самостоятельную городскую сцену. Композиция города, визуальная система, анимация, программная логика и пользовательское взаимодействие были разработаны специально для этого проекта.
Технологическая реализация
Интерактивная часть работает непосредственно в браузере и не требует установки отдельного приложения или плагина.
Основой 3D-сцены стал движок Babylon.js. Для управления городом использована орбитальная камера с заданными ограничениями приближения и угла обзора. Положение камеры преобразуется в координату на круговой шкале, по которой синхронно управляются движение автомобиля и появление тематических разделов.
Город, транспорт и окружение были подготовлены в формате GLB. Для воды, освещения и смены времени суток разработаны отдельные визуальные режимы. Интерфейсные элементы объединены с 3D-сценой средствами JavaScript, HTML и CSS.
Особое внимание уделялось тому, чтобы трёхмерная механика оставалась частью навигации, а не превращалась в отдельную демонстрацию, не связанную с остальным сайтом.
Результат
Проект был доведён от идеи до полноценной рабочей реализации и запущен на домене заказчика.
В результате появился многостраничный сайт, объединяющий:
— интерактивное меню в виде трёхмерного города;
— восемь сценариев применения инженерных систем;
— тематические переходы из 3D-сцены;
— калькулятор проекта;
— раздел проектного отдела;
— информацию о команде;
— каталог реализованных работ;
— обычное резервное меню для прямого доступа к разделам.
Главный результат проекта — сложная инженерная услуга получила понятный визуальный образ. Вместо абстрактного перечня оборудования пользователь видит знакомую среду и выбирает тот тип объекта, который соответствует его ситуации.
Проект показывает, что браузерная 3D-графика может использоваться не только как эффектная иллюстрация, но и как основа информационной архитектуры коммерческого сайта.
Работа выполнена в соавторстве
Роман Поликарпов
Команда 3D-студии Arguv
Презентация проекта
