Majmar
Кальянная на Дубай-Крик с залом, террасой и кабаной
Поверните объёмный чертёж павильона, выберите стол прямо на модели, подберите время с учётом примерных броней и подготовьте текст запроса для своей компании.
Three.js
Задача
По меню и форме бронирования не понять, где будешь сидеть и какие правила действуют для компании. Гостю нужно увидеть пространство, выбрать место и узнать условия до того, как связаться с заведением.
Дальше по странице
Как устроен сценарий
Осмотреть павильон
Модель зала, террасы и кабаны можно вращать, а при выборе зоны камера сама перелетает к ней.
Выбрать стол
Нажмите на стол на модели: появятся число мест, примерное свободное время на сегодня и то, подают ли за ним кальян.
Подготовить запрос
Перетащите время по шкале, где отмечены примерные брони, укажите число гостей и микс, затем скопируйте текст запроса. Стол при этом не бронируется.
Ключевые решения
3D-сцена не мешает прокрутке
Колесо мыши листает страницу, а для приближения модели нужно зажать Ctrl или ⌘. На телефоне вертикальный свайп тоже прокручивает страницу и не вращает модель.
Три языка в одной вёрстке
Русская, английская и арабская версии собраны в одной вёрстке на логических свойствах CSS, поэтому арабская читается справа налево без отдельного макета.
KadrШкола моушн-дизайна на монтажном таймлайне