Что это?

Threejs — это библиотека JavaScript, которая позволяет создавать 3D-объекты с помощью JavaScript и отображать их в браузере. Threejs можно разбить на три важные части, которые позволяют браузеру обрабатывать его код.

Что я буду обсуждать

Я создал это руководство, чтобы объяснить новым пользователям общую концепцию работы Threejs. Я начал с приблизительного понимания того, как собрать все вместе, хотя на самом деле я не понимал, как все это работает вместе. Я надеюсь, что эти концепции помогут вам лучше понять инструменты, которые дает нам Threejs.

Наша сцена

Создание наших объектов

Для нашей сцены мы создаем свои объекты, которые Threejs обрабатывает и добавляет к ней. Объект можно создать тремя способами, его можно создать с помощью математического процесса, такого как создание сферы и правильное создание ее сторон. Затем у нас есть точечная система, в которой вершины создаются через x, y и z, создавая очень точные и сложные модели. Последний метод — загрузка модели, это делается путем создания модели в любой сторонней 3D-программе, такой как Blender, которая чаще всего используется из-за простой системы экспорта.

Применение сетки

После создания объекта вы должны применить к нему сетку. Сетка — это просто текстура для просмотра фактического объекта. Хотя, как упоминалось ранее, если ваш объект создан с помощью математического процесса или вершин, им может быть присвоен каркас, который позволяет нам просматривать точки соединения без применения сетки. Что касается модели, загруженной через Blender, вы должны ввести ее текстуры и информацию о модели для функции Threejs loader.load() для ее создания. Для получения дополнительной информации я включу ссылку на документацию, в которой подробно рассказывается о том, как работает loader.load().

https://threejs.org/docs/index.html?q=load#manual/ru/introduction/Загрузка-3D-моделей

Изменение созданных объектов

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

Object.castShadow = разрешить объекту отбрасывать тень
Object.receiveShadow = разрешить объекту получать тени
Object.rotation.x или .y = изменить ось X или Y объектов
Object.position.x или .y или .z = изменить положение объектов x, y или z в сцене

Включение теней для нашей сцены

Для включения теней мы добавляем в свойства сцены

this.threejs.shadowMap.enabled = true

this.threejs.shadowMap.type = THREE.PCFSoftShadowMap

Для справки this.threejs = new THREE.WebGLRenderer мы более подробно рассмотрим рендерер позже.

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

Краткое упоминание shadowMap.type имеет четыре типа, каждый из которых имеет математические уравнения, которые рассчитывают резкость теней, это, конечно, зависит от того, какой вы решите использовать (BasicShadowMap, PCFShadowMap (по умолчанию), PCFSoftShadowMap и VSMShadowMap).

Добавляем свет в нашу сцену

Освещение — сложная тема, в той же форме создаются тени. Несмотря на то, что Threejs делает этот процесс очень простым для понимания и изучения, у него более длинная кривая обучения при создании идеальных сцен освещения. Я рекомендую, если вы хотите узнать об освещении, использовать документацию от NVIDIA, поскольку у них есть много исследований по этому вопросу. Для наших целей мы будем использовать простую идеологию, чтобы создать красивое освещение для нашей сцены.

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

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

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

PointLight: этот источник света создает точку, вокруг которой излучается свет. Чаще всего используется для создания эффекта факела, поскольку свет излучает заданный ему цвет во всех направлениях вокруг себя.

RectAreaLight: этот источник света, как следует из названия, создает свет в прямоугольнике. Чаще всего используется на окнах в играх, где стекло непрозрачно, но мы все равно хотим, чтобы свет проходил сквозь него в прямоугольном направлении.

SpotLight: этот свет, как следует из названия, в буквальном смысле испускает луч света в виде конуса, который увеличивается в размерах по мере того, как он движется дальше, хотя его интенсивность уменьшается по мере увеличения расстояния. Чаще всего используется для точечного света и фонарей.

Добавление к нашей сцене

Теперь, когда мы рассмотрели, как создавать объекты, мы должны добавить их к нашей фактической сцене, используя scene.add(). Это также можно использовать с помощью for loops для создания ряда случайно расположенных объектов в сцене. Вы также можете группировать объекты вместе, чтобы все они могли изменяться одновременно. Это очень полезно при создании слоев объектов и попытке доступа только к определенной группе объектов.

Наш рендерер

Магия

Здорово! Мы добавили наши объекты на сцену, теперь как мы на самом деле видим наши объекты. Эта магия осуществляется через Threejs, который создает наши объекты и передает их в браузер. Они загружаются через выбранный нами рендерер, наиболее известный и используемый — WebGLRenderer.

КАМЕРА!!! 😱

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

Теперь, чтобы понять, как камера делает то, что она делает, мы должны просмотреть диаграмму выше. Мы начинаем с дальней плоскости отсечения, которая, по сути, представляет собой то, как далеко назад сцена будет работать в унисон с нашим средством визуализации, чтобы отобразить то, что мы можем считать конечной точкой. Затем у нас есть реальная сцена, где у нас есть сферы и плитки, вы можете представить это так, как будто наши объекты на самом деле находятся в сцене, это наше «3D-пространство». Наконец, у нас есть ближняя плоскость отсечения, это компиляция дальней плоскости отсечения и сцены, которую видит наша камера.

Анимация

Рендерер отображает нашу сцену на камеру и загружает ее в постоянном движении, создавая эффект того, что мы называем анимацией. Общее эмпирическое правило — придерживаться 60 кадров в секунду. Используя это знание, мы знаем, что наша сцена постоянно работает и меняет свое «состояние» 60 раз в секунду. Обычно это хорошее время, чтобы добавить к вращению или движению объектов, чему я научился, так это придерживаться небольшого количества увеличивающихся значений на объекте. Что касается моделей, загружаемых через Blender, то они обычно имеют циклы анимации, которые может использовать Threejs.

Вывод

Я надеюсь, что смог помочь и поделиться своими знаниями достаточно хорошо, чтобы вы поняли, как много вещей в Threejs могут работать одновременно вместе. Есть много классных методов создания и анимации объектов. В качестве примера я создал простую объектную сцену, которая изначально генерировала 256 сфер. При наведении курсора они меняли цвет. При выборе мы устанавливаем его состояние для вращения и даем возможность перемещаться или возвращаться в случайное положение в пределах заданной границы. Спасибо, что читаете мою среду и получайте удовольствие от создания сцен Threejs!