Создание игры «Aviator»: изучаем основы 3D-анимации c Three.js. Часть вторая. Наводим красоту

Рассказывает Карим Маалул 


Почти готово!

Как вы уже убедились в прошлой части, Three.js сильно облегчает работу с WebGL. Вам не нужны обширные знания для настройки сцены и отрисовки сложных объектов. Пока что вы изучили несколько основных принципов, но пора двигаться дальше. 

В этой части мы улучшим визуальное качество сцены, сделаем движение самолёта гораздо более плавным и добавим эффект волн.

Самолёт на прокачку

Наш самолёт пока что очень прост. Пока что мы умеем только создавать объекты и комбинировать их, но мы пока не умеем подгонять их под свои нужды.

Например, куб можно изменить, сдвинув его вершины. В нашем случае нужно сделать его более похожим на фюзеляж. Вот что должно получиться:

Вот пример того, как изменять фигуры. Если вы изучите исходный код самолёта, то найдёте там ещё несколько других объектов и более приятный пропеллер. Ничего сложного.

Но кто управляет самолётом?

Посадить пилота в самолёт — как два куба добавить.

Но нам нужен не просто пилот, а крутой пилот с причёской, развевающейся на ветру. Звучит сложно, но поскольку мы работаем с низкополигональными моделями, реализация не вызовет проблем.

Давайте взглянем на код:

Чтобы волосы двигались, добавьте эту строку в цикл:

Ловим волны

Вы наверняка заметили что море больше похоже не на море, а на поверхность, по которой проехались катком.

Морю нужны волны. Это можно реализовав, используя две ранее использованные техники:

  • перемещение вершин;
  • цикличное движение каждой вершиныt.

Для создания волн мы будем вращать каждую вершину цилиндра вокруг её начальной позиции, задавая её случайные угловую скорость и радиус вращения. Да, придётся вспомнить тригонометрию 🙁

Изменим море:

Добавим эту строчку в цикл, как мы сделали с волосами:

Наслаждайтесь волнами!

Улучшаем освещение сцены

В первой части руководства мы уже настроили освещение. Настало время сделать его более мягким. Для этого мы используем рассеянное освещение.

В функции createLights добавим следующее:

Не бойтесь экспериментировать с цветами и интенсивностью рассеянного света.

Мягкий полёт

Наш маленький самолёт уже следует за движениями мыши, но это не похоже на полёт. Нужно, чтобы он мягче изменял своё положение. В этой, последней части руководства мы займёмся именно этим.

Этого можно достичь, добавляя в каждом кадре часть расстояния между самолётом и целью. Общий вид кода таков (не добавляйте его в программу, это лишь шаблон):

Для большей реалистичности вращение самолёта также должно изменяться в зависимости от направления движения. Если самолёт быстро поднимается, то он должен быстро вращаться против часовой стрелки. Если он медленно опускается, то должен медленно вращаться по часовой стрелке.

Вот реализация всех рассуждений в функции updatePlane:

Теперь движение самолёта выглядит гораздо элегантней и реалистичней. Изменяя дробные величины, можно регулировать резкость движений.

Вот как выглядит наш проект: демонстрация, часть 2

Отлично!

Что дальше?

Вы изучили базовые, но универсальные приёмы Three.js, которые позволяют вам создавать простые сцены. Вы научились создавать объекты из примитивов, анимировать их и настраивать освещение сцены.

Следующим этапом, который не вошёл в этой руководство по причине использования сложных техник, будет реализация игры, в которой используются такие понятия, как коллизии, сбор предметов и управление уровнями. Изучите исходный код: там вы найдёте уже изучите приёмы и новые, более сложные, в которых вам предстоит разобраться.

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

Перевод статьи «The Making of "The Aviator": Animating a Basic 3D Scene with Three.js»