Изучаем Three JS.

Примеры использования Three JS очень часто можно встретить в сети. Связано это с
развитием web-технологий и с учащением использования в различных проектах 3D-
графики.
Это одна из библиотек JavaScript, которая служит вспомогательным
инструментом при работе с 3D-графикой в WebGL.
WebGL — это специализированная библиотека JavaScript, цель которой — это
создание 3D графики, для ее воспроизведения во всех известных современных
браузерах. Данная библиотека применяет в своей работе Си-подобный синтаксис
языка программирования GLSL и работу с шейдерами. Из-за этого сам процесс
работы с WebGL считается очень трудоемким и сложным, что отпугивает многих
новичков. А библиотека Three JS была придумана, чтобы облегчить рабочий процесс
с WebGL.

Three JS в работе

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

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

О некоторых основных понятиях этой библиотеки нужно остановиться
подробнее.

О «камере» в Three JS

В Three JS применяется 4 вида камер:

• Перспективная;
• Стерео-камера;
• Орфографическая;
• Кубическая.

В основном пользуются «Перспективной» и «Орфографической» камерами.

1. Перспективная. Это самый распространенный вид камеры, которая позволяет
   просматривать сцену по образу человеческого глаза. То есть, эта камера
   показывает, как видел бы сцену глаз человека, тем самым получается, что при
   удалении камеры от объектов — они уменьшаются.
2. Орфографическая. У этой камеры отсутствует «уменьшение» объектов при
   удалении камеры от них. Поэтому удалять ее можно бесконечно.

Освещение в Three JS

Еще один важный момент — это как реализовано «освещение» сцен в Three JS.
Если бы не было освещения сцен, то присутствовал бы эффект «темной комнаты» и
толком ничего не было бы видно. Поэтому «свет» помогает лучше визуализировать
сцену и придает ей реалистичности. «Свету» можно придать любой оттенок цвета,
если это необходимо.
«Освещение» разделяется на несколько типов:

1. Фоновый свет. Освещает все объекты сцены в заданном оттенке, не создает
   теней, так как у него нет определенного направления.
2. Направленный свет. Направляется на конкретный объект и происходит в
   определенном направлении, поэтому отбрасывает тень от объектов. Похож на
   «солнечный луч».
3. Точечный свет. «Светит» из одной точки и на все объекты. Имеет эффект
   «электрической лампочки». Отбрасывает тени от объектов.
4. Конусный цвет. Светит из одной точки, но в каком-то направлении, имеет
   форму «конуса», то есть при удалении от источника цвета, световой луч
   «расширяется».

Примеры Three JS

Библиотека Three JS обладает очень широкими функциональными возможностями.
Невозможно в рамках одной статьи все их проговорить. Чтобы понять, на что она
способна , можно посмотреть примеры сцен и объектов, которые создали
при помощи этой библиотеки.
Примеры Three JS

• Персонажи для игр в движении;
• Простыня колышется на ветру;
• Макет дома и трамвайчик рядом в движении;
• Пришелец: начало;
• Робот идет;
• Объемный текст в движении;

• Бюст человека;
• Шары, которые постоянно двигаются;
• Шары, преломляющие изображение;
• Крутящиеся геометрические фигуры;
• BoomBox;
• Еще немного бюстов людей.

Многие представленные примеры Theree JS, можно «покрутить» и просмотреть с
разных сторон. А в сети встретить еще достойные примеры Three JS вообще не
проблема. Кстати, «внутри» этой библиотеки уже реализовано множество готовых
фигур, которые можно использовать в своих проектах

Возможно вам будет интересно почитать статью “Неисправленная ошибка в коде. Последствия.”

Заключение

Над Three JS работает большое сообщество программистов, из-за этого она
постоянно развивается и ее популярность в 3D-сфере только растет. Используя
возможности этой библиотеки, можно создавать 3D объекты любой сложности.
Уровень их реализации будет зависеть от вашей вовлеченности в процесс и желании
реализовать все качественно. Нельзя сказать, что применять и работать с этой бибдиотекой легко и просто, но конечный результат стоит того, что и демонстрируют примеры Three JS, которые мы привели чуть выше.