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

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


В этой серии из двух статей мы создадим простую 3D-игру про летающий самолётик при помощи Three.js, библиотеки, упрощающей работу с WebGL. WebGL — для многих тёмный лес из-за сложности и синтаксиса GLSL. Но благодаря Three.js реализация 3D в браузере стала гораздо проще. 

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

Итак, начнём!

HTML и CSS

В этом руководстве упор будет сделан на библиотеку Three.js. Посетите сайт и GitHub-репозиторий, чтобы узнать про неё больше.

Сперва мы импортируем библиотеку в заголовке HTML :

Затем добавим элемент-контейнер для хранения сцены:

Стилизуем её следующим образом:

Собственно, с разметкой и стилями мы закончили!

JavaScript

Three.js очень легко использовать, есть у вас есть базовые знания по JavaScript. Давайте разберем код, который мы будем использовать.

Цветовая палитра

Я считаю правильным всегда определяться с палитрой цветов прежде, чем писать код. В этом проекте я выбрал следующие цвета:

Структура кода

Хотя JavaScript-код и бывает громоздким, его структура весьма проста. Все основные действия нужно поместить в функцию init:

Настройка сцены

Для создания проекта на Three.js нам нужен следующий минимальный набор:

  1. Сцена: представьте её, как площадку, на которую нужно добавить каждый объект для отрисовки.
  2. Камера: в нашем случае мы будем использовать перспективную камеру, но могли бы взять и ортогональную.
  3. Рендерер: он отрисует всю сцену, используя WebGL.
  4. Один или несколько объектов: в нашем случае — самолёт, море и небо (несколько облаков).
  5. Один или несколько источников света: доступно несколько видов источников. Мы будем использовать полусферический источник для атмосферы и направленный — для теней.

Сцена, камера и отрисовщик создаются в функции createScene:

Поскольку размер экрана может изменяться, нам нужно обновлять размер отрисовщика и соотношение сторон камеры:

Источники света

Настройка освещения — это один из самых сложных этапов создания сцены. Источники света задают настроение всей сцены, поэтому работать с ними нужно очень внимательно. На данном этапе мы просто настроим освещение таки образом, чтобы видеть все объекты.

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

Создание объекта в Three.js

Если вы разбираетесь в создании 3D-моделей, то можете импортировать в проект свои модели. Мы же создадим объекты из примитивов Three.js, чтобы понять, как они устроены.

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

Простой цилиндр для моря

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

Теперь давайте сделаем море чуть более привлекательным, а волны — более реалистичными:

Итак, давайте подытожим, что нужно для создания объекта. Нам нужно:

  • создать геометрическую модель;
  • создать материал;
  • передать их в меш;
  • добавить меш на сцену.

Следуя этим простым шагам, мы можем создать множество разных примитивных объектов и объединить их в более сложные фигуры.

В следующих этапах мы займёмся именно этим.

Объединяем простые кубы для создания сложной фигуры

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

Теперь, когда мы создали облако, мы заполним им всё небо, разместив его копии случайным образом на оси z:

Ещё сложнее: создаём самолёт

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

Самолёт выглядит слишком просто, не так ли? Не волнуйтесь, в дальнейшем мы сделаем его куда более привлекательным!

Разместим самолёт на сцене:

Отрисовка

Мы создали несколько объектов и разместили их на сцене. Но если вы запустите игру, то ничего не увидите! А всё потому, что мы забыли отрисовать сцену. Делается это очень просто:

Анимация

Давайте оживим нашу сцену, настроив вращение пропеллера самолёта, моря и облаков.

Для этого нам понадобится бесконечный цикл:

Мы можете заметить, что вызов отрисовщика перенесён в цикл. Мы сделали это потому, что каждое изменение объекта нужно отрисовывать заново.

Следуй за мышью: настройка взаимодействия

Сейчас наш самолёт помещён в центре сцены. Мы же хотим, чтобы он следовал за мышью.

После загрузки документа нам нужно добавить слушатель движений мыши. Для этого мы изменим функцию init следующим образом:

Кроме того, мы создадим новую функцию для обработки движений мыши:

Нормализовав положение мыши, мы можем корректно перемещать самолёт.

Снова изменим цикл, добавив в него функцию для обновления положения самолёта:

Поздравляю, теперь вы можете управлять самолётом мышью! Вот что у нас получилось: демонстрация, часть 1.

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