вступление

Эта статья представляет собой обзор терминов и понятий, связанных с созданием 3D-графики в Интернете непосредственно в обычном веб-браузере с помощью Three.js. С 3D, как и с любой другой темой, все может довольно быстро усложниться, если вы будете очень глубоко вникать во все детали. Я попытаюсь сделать наоборот и предоставить простой обзор всех концепций, с которыми вы столкнетесь, изучая, как создавать 3D в обычном веб-браузере.

Что такое Three.js?

Three.js — это библиотека JavaScript и API, которые позволяют создавать и отображать анимированную трехмерную графику в веб-браузере с помощью WebGL.

WebGL (библиотека веб-графики) сама по себе является API Javascript для рендеринга 2D- и 3D-графики в браузере.

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

Three.js мыслит как программа для 3D-моделирования.

Я собираюсь разбить изучение Three.js на 3 этапа:

  1. Узнайте, как мыслят программы 3D-моделирования
  2. Узнайте, как делать основные вещи, которые делает программа 3D-моделирования, НО с javascript, используя Three.js
  3. Погружайтесь настолько глубоко, насколько вы хотите, в детали и тонкую настройку, чтобы получать все более впечатляющие и профессиональные результаты.

Three.js мыслит как программа 3D-моделирования. Есть несколько концепций, которые широко используются почти во всех программах 3D-моделирования, и как только вы поймете эти концепции, вы увидите, что Three.js просто повторяет их, но с javascript в веб-браузере.

Три главные концепции: как мыслят программы 3D-моделирования

1 — Геометрия объекта — это отдельная тема

Если бы вы были в кромешной темноте в комнате без света, вы бы ничего не увидели, но это не изменило бы геометрию объектов в комнате.

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

2 — Камера/глаз

То, как мы видим вещи, зависит от наших глаз, которые имеют определенное фокусное расстояние.

Если вы используете камеру GoPro с объективом типа «рыбий глаз», вы увидите, что объекты искажаются/выглядят иначе, чем если бы вы просто смотрели глазами. В программе 3D-моделирования вы можете установить фокусное расстояние и положение камеры. Когда вы работаете в программе 3D-моделирования, вы находитесь в бесконечно большом пространстве, и вы можете расположить камеру в любом месте. Как если бы вы снимали фильм, и вам нужно расположить камеру определенным образом, вы просто перемещаете камеру, пока не получите нужный кадр.

3 — Свет

То, как вещи освещены, определяет то, как мы их воспринимаем. Цвет объекта определяется тем, сколько света он поглощает и сколько отражает обратно. Когда мы делаем 3D-изображения, нам нужно вручную добавлять все элементы, которые мы считаем само собой разумеющимися в реальной жизни. Вам нужно добавить и определить источники света, чтобы объекты были видны. Точно так же, как в вашем доме есть разные типы света, вы можете решить, какой тип освещения добавить в свою сцену.

Есть 2 основные категории:

  • Окружающее освещение, которое касается всего, например: свет от Солнца
  • Точечное освещение, похожее на прожектор или фонарик, направленный в определенном направлении.

Все типы освещения могут иметь свой собственный цвет и интенсивность, установленную по вашему желанию.

Текстура и цвет

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

Оси и системы координат

Объекты в 3D находятся в системе координат с 3 осями: X, Y, Z.
X и Y вы наверняка помните из школьных графиков. Ось Z — это третья ось, направленная вверх.

Моделирование против рендеринга

Вы услышите, что термины «моделирование» и «рендеринг» иногда используются взаимозаменяемо, но на самом деле это две разные вещи.

Моделирование

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

Рендеринг

Рендеринг — это процесс создания изображения вашего объекта, где он выглядит реалистично… на самом деле вы могли бы также сделать его мультяшным, но у сцены есть материалы, цвета, освещение и тени. На этапе рендеринга вы определяете, какие характеристики материала будет иметь ваш объект и, в свою очередь, как свет будет взаимодействовать с объектом. Если вы сделаете свою кружку стеклянной, через нее будет проходить свет, и вы сможете увидеть все, что находится за ней. Тени, которые будут отбрасываться от стеклянной кружки, будут отличаться от теней, отбрасываемых от фарфоровой кружки. Также на этом этапе вы бы установили источники света — откуда исходит свет? Насколько интенсивен свет?

Обычно для выполнения каждого из этих шагов требуется две отдельные программы: программа 3D-моделирования для моделирования объектов и программа рендеринга, которая вычисляет, как свет взаимодействует с объектами в сцене, и дает вам окончательное изображение.

Три.js

Теперь, когда мы поговорили об основных концепциях 3D-моделирования и рендеринга, давайте поговорим о Three.js.

Three.js может выполнять базовое 3D-моделирование, но в целом Three.js выполняет больше работы, которую вы выполняете в программе рендеринга — импортирует 3D-объект, добавляет источники света, указывает тип и местоположение камеры, а затем, наконец, рендерит сцену. . Поэтому для более сложных форм вы будете импортировать 3D-объекты, созданные в отдельной программе 3D-моделирования. Blender очень популярен в сообществе Three.js. Я лучше всего знаком со SketchUp, поэтому я буду использовать его для сложных вещей, но в этом примере мы будем использовать базовые инструменты 3D-моделирования, предоставляемые Three.js.

Пример вращающегося куба

Вот CodePen того, что мы будем создавать:

https://codepen.io/jeffbushdesign/pen/OJvpXpV

HTML

  • Шаблон HTML5
  • Основные стили на теле и холсте
  • Ссылка на Three.js из CDN
  • Ссылка на файл main.js, содержащий магию 3D

JS

Файл javascript — это то место, куда вы поместите все материалы Three.js. Все, что вы делаете в 3D, требует следующих трех вещей:

  • сцена
  • камера
  • визуализатор

Существуют разные типы камер. Перспективная камера имитирует работу наших глаз. Наши глаза всегда передают перспективу, именно поэтому края дороги кажутся сходящимися, когда дорога романтично уходит вдаль 😍 . PerspectiveCamera принимает следующие параметры: Поле зрения, Аспект, Ближняя плоскость, Дальняя плоскость.

Сглаживание: true удаляет пиксельные артефакты по краям того, что мы моделируем.

Далее мы установим размер рендерера равным размеру окна и поместим его в документ:

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

По умолчанию и камера, и куб помещаются в центр системы координат, поэтому, если мы хотим видеть куб, нам нужно переместить камеру:

Теперь мы добавим функцию анимации, которая будет перерисовывать сцену каждый раз при обновлении монитора.

Если мы посмотрим сейчас, мы увидим квадрат. «Но разве все это не было связано с 3D?» Причина, по которой мы видим здесь квадрат, заключается в том, что камера находится прямо перед кубом и ничего не движется.

Мы можем добавить немного анимации, чтобы увидеть движение куба и показать, что он на самом деле трехмерный. Это повернет куб на 0,01 в обоих направлениях x и y.

Вот все вместе:

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

Несмотря на то, что что-то подобное просто, удивительно, что это можно сделать в браузере! Получайте удовольствие, создавая вещи в 3D!

Узнайте больше о Three.js

  • https://threejs.org/ → Основная документация для Three.js. В дополнение к очень хорошей документации есть страница с кучей примеров отличных вещей, которые люди создали с помощью Three.js.
  • https://bruno-simon.com/ → Какой учебник по Three.js был бы полным без ссылки на что-то от Бруно Саймона? Он разработчик, который сделал несколько крутых вещей с Three.js.
  • https://threejs-journey.com/# → Это курс Бруно Саймона Three.js за 95 долларов… очень заманчиво🤔

Рекомендации