Собственная разработка WIIKO

Ниже — та же сцена, что на главной, только разваливается позже: куб можно рассмотреть собранным. У каждого из 26 кубиков своё тело в физическом движке. Прокрутите страницу: куб рассыплется, кубики ударятся друг о друга и улягутся сами. После этого наведите курсор — он и светит, и толкает, — а любой кубик можно взять мышью, потащить и бросить.

Курсор — источник света и физическое тело. Хватайте кубики и кидайте

Что это даёт

01

Настоящая физика, а не анимация

Столкновения, вес, трение и отскок считает движок. Объекты сталкиваются друг с другом и с руками пользователя, а не проигрывают заранее нарисованный ролик.

02

Курсор — часть сцены

Он освещает объекты и отбрасывает от них тени, а на этой странице ещё толкает их и берёт в руку: у курсора есть собственное тело в движке.

03

Прокрутка управляет сценой

Вниз — действие идёт вперёд, вверх — отматывается назад до кадра. Остановка на середине оставляет сцену там, где её застали.

04

Каждый раз по-другому

Сценарий разыгрывается заново на каждом заходе, поэтому вторая прокрутка не повторяет первую.

05

Любая модель

Логотип, изделие, упаковка, деталь. Из OBJ, GLB или FBX — модель разбирается на части, и каждая получает собственное тело в движке.

06

Не тормозит страницу

Сцена считается только когда она в кадре и вкладка активна. Тяжёлые вычисления уходят в паузы между кадрами.

07

Встраивается в существующий сайт

Отдельный блок на странице, а не переделка сайта. Работает и там, где 3D не поддерживается: на месте блока остаётся вёрстка без него.

Как проходит работа

01

Разбираем задачу

Что показываем, где на странице стоит, что должно происходить при прокрутке.

02

Готовим модель

Приводим геометрию к сцене, раскладываем на части, подбираем материалы и свет.

03

Собираем сцену

Поведение, физика, реакция на прокрутку и курсор, поведение на телефоне.

04

Встраиваем и передаём

Ставим на ваш сайт, отдаём исходники и показываем, как менять параметры.

Поставим такую сцену
на ваш сайт.

Напишите, что нужно показать. Если модели ещё нет — подскажем, в каком виде её проще получить.