Библиотека для создания 3D графики "Three.js"

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

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

Из этого урока вы узнаете:

• Что из себя представляет Three.js?
• Немного теории про Three.js
• Создание простейшей сцены
• Возможности Three.js

1) Что из себя представляет Three.js?

Three.js работает на основе WebGL. WebGL - это библиотека, которая позволяет строить 3D графику в браузере посредством Canvas HTML5. Работа с ней довольно сложная, т.к. она использует язык программирования шейдеров, имеющий Си-подобный синтаксис. Поэтому появилась Three.js - она выполняет те же функции, что и WebGL, но гораздо проще и на JavaScript. Над библиотекой работает большое количество разработчиков, она регулярно обновляется и улучшается.

2) Немного теории про Three.js

В Three.js есть 3 основных элемента:

• Scene - сцена, на которой находятся все создаваемые объекты
• Camera - камера, которая снимает и отображает объекты на сцене
• Renderer - рендер позволяет показывать снятую камерой сцену

Камеры бывают разные: Perspective Camera, Orthographic Camera, Stereo Camera, Cube Camera. Основные - это Perspective и Orthographic. Первая используется для создания полноценных 3D сцен, а вторая, для 2.5D.

Также в Three.js бывает разное освещение:

• Ambient Light - при таком освещение все объекты будут освещены одинаково, теней в данном случае не будет.
• Directional Light - освещение в определенном направление, при таком освещении будут появляться тени
• Point Light - точечный источник света
• Spot Light - свет будет излучаться из одного направления вдоль конуса, расширяемого по мере увеличения расстояния

Объекты, которые мы создаем на сцене, называются Mesh. Mesh - это класс, который возвращает нам объекты в зависимости от переданных параметров. У Mesh 2 аргумента:

• Geometry - аргумент, который описывает форму объекта - его грани, закругления, положения вершин
• Material - аргумент, который описывает внешний вид объекта - его цвет, текстуру, прозрачность

3) Создание простейшей сцены

Теперь мы можем перейти к создание простой сцены, чтобы понять, как на практике работать с Three.js.

Для начала, необходимо добавить библиотеку к себе в проект. Скачать её можно с официального сайта.

Ссылка на официальный сайт: https://threejs.org/

Также можно добавить библиотеку себе через CDN.

CDN ссылка: https://threejs.org/build/three.js

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

Теперь создадим ещё один тег script, в котором будем писать наш JavaScript код. В этом теге создадим сцену и камеру.

Здесь мы создали 2 переменных - сцену и камеру. Сцена создается одной строчкой без параметров. В камеры мы передаем следующие параметры:

• Первый аргумент - это угол зрения (FOV). Стандартное значение - 75
• Второй аргумент - это соотношение сторон (aspect ratio). Мы взяли отношение ширины экрана к высоте.
• Третий и четвертый аргументы - минимальное и максимальное расстояние от камеры, которое будет рендериться.

Теперь нужно добавить и настроить рендеринг.

В первой строчке мы создали объекта рендера. Второй строчкой мы задали ему размер, равный размеру видимой области страницы. И третьей строчкой мы добавили его на страницу.

Пока все, что вы увидите - черный экран. Ведь мы ещё не добавили ни одного объекта. Давайте этим займемся.

Здесь мы задаем геометрию для нашего будущего объекта. Мы использовали метод BoxGeometry, который задает геометрию для куба. В аргументе указаны размеры сторон по осям X, Y, Z.

Далее зададим цвет нашему объекту.

Тут в аргументе мы передаем цвет материала.

Теперь нам нужно создать Mesh. Это будет объект, который мы уже сможем добавить на сцену.

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

Чтобы сейчас увидеть куб, достаточно ввести такую команду в конце нашего кода:

renderer.render(scene, camera);

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

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

Здесь мы создали функцию. Внутри функции у нас requestAnimationFrame - это встроенный в браузер метод, который создает плавные синхронные анимации. С каждым кадром положение нашего куба по оси x и y будут увеличиваться на 0.01, тем самым вращая куб.

Если вы все сделали верно, то результат будет такой:

Кроме куба, есть ещё другие примитивы. Кроме того, есть возможность загружать свои 3D модели. Более подробно о данной библиотеке можно почитать, например, здесь: https://threejsfundamentals.org/threejs/lessons/ru/

3) Возможности Three.js

Возможности у данной библиотеки огромные. Кто-то создает интерактивные промо-сайты, уникальные 3D эффекты для сайтов, есть разработчики, которые разрабатывают игры на Three.js. На главном сайте библиотеки можно ознакомиться с десятками готовых проектов, в которых использовался Three.js

Ссылка на сайт библиотеки с примерами: https://threejs.org/

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

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

До скорой встречи!

Ссылка на канал: https://t.me/sitodel