Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Three.js
Webdesign

Руководство для новичка по Three.js

by
Difficulty:IntermediateLength:ShortLanguages:

Russian (Pусский) translation by Masha Kolesnikova (you can also view the original English article)

Сложность Web меняется ежедневно, и его возможности растут так же быстро, особенно с 3D-рендерингом. WebGL (Web Graphics Library) - это JavaScript API для рендеринга интерактивной 3D и 2D графики. Three.js by Ricardo Cabello - это библиотека, построенная поверх WebGL, обеспечивающая совместимость с различными браузерами.

Three.js для WebGL - это то же самое, что jQuery для JavaScript, предлагая декларативный синтаксис, который все так любит, и абстрагируя от головных болей связанных с 3D в браузере. Давайте рассмотрим его, проведем общий обзор синтаксиса и посмотрим, как же нам начать работу, если вы новичок в мире 3D.

Над чем мы работаем

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

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

Для удобства мы будем работать в CodePen; Начните с ссылки на Three.js (CDN 126Kb) с вашей вкладки JS.

Мы начинаем с создания сцены, точно так же как вы начинаете с чистого холста в Photoshop. Сцена определяется с переменной до того, как будет создан какой-либо другой код. Итак, в вашей панели JS добавьте:

Камеру!

Нам понадобится возможность взглянуть на нашу удивительную сцену - поэтому нам понадобится камера. Существует множество камер, с которыми поставляется Three.js, такие как PerspectiveCamera, StereoCamera, OrthographicCamera и CubeCamera. Для наших целей мы будем использовать PerspectiveCamera, так как она предназначена для имитации того, как видит человеческий глаз. Точно так же, как мы определяем сцену с переменной, мы делаем то же самое, чтобы определить камеру:

Наша PerspectiveCamera принимает четыре аргумента: fov, aspect, near и far.

  • fov (поле зрения) - это то, насколько вы можете видеть вокруг центра камеры. Подумайте о широкоугольном объективе на камере по сравнению со стандартным объективом.
  • aspect - отношение fov, или, другими словами, ширина к высоте экрана (например, 4: 5, 16: 9).
  • Последние два, near и far, являются плоскостями твердого тела. Вместе они управляют отображением объекта на основе его расстояния от камеры. near это ближайший объект или часть объекта, которые могут быть в камере, в то время как все еще визуализируются, far - это самый далекий объект, который может быть от камеры и при этом все еще отображаться. Вместе они определяют угол обзора камеры.
viewing frustum
Просмотр усеченного конуса

Вот пример аргументов PerspectiveCamera:

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

Эта строка является локальным положением объекта. Это задает координаты x, y и z вектора. Без этого камера ничего не увидит.

2. WebGLRenderer

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

WebGLRenderer также может принимать свойства и значения, передаваемые в качестве объекта.

Существует несколько пар property : value, которые можно использовать, - они перечислены в документации, на случай если вы решите погрузиться глубже  (что-то я настоятельно рекомендую сделать).

С помощью средства визуализации мы можем установить методы для дальнейшей настройки нашего творения, такие как setSize; метод, который вы будете использовать почти в каждом проекте Three.js.

Есть много других методов, которые вы можете использовать, но для наших целей мы будем придерживаться setSize().

3. DOM

Теперь, когда мы определили наш необходимый размер, нам понадобится способ присоединить его к DOM.

Свойство domElement - это то, где рендеринг выводит свой результат в виде элемента canvas. Хотя я использую document.body, вы можете добавить элемент canvas везде, где захотите. Это действительно зависит от вас, где вы хотите разместить свое творение на основе ваших конкретных потребностей проекта.

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

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

iphone 6 by Jeremie P
IPhone 6+ от Jeremie P

Как правило, вы можете использовать приложения, такие как SketchUp или даже Blender, для рисования 3D-объектов, однако существует высокая кривая обучения 3D-приложениям для рисования - кривая, которая, безусловно, выходит за рамки этой статьи.

Если вам нравится Piña Collada

Чтобы вставить наш 3D-объект в сцену, мы должны использовать ColladaLoader. Следует отметить, что любой графический объект, который вы решили использовать, должен, как правило, быть в пределах 1-2 МБ и должен быть файлом Collada, готовым для использования с Three.js: это файлы, которые заканчиваются расширением .dae. Если вы откроете файл Collada, вы увидите, что он написан на самом деле в XML.

Мы начинаем с определения ColladaLoader с помощью переменной и вызова метода вместе с определением другой переменной для представления 3D-графики.

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

Для следующего шага мы будем использовать метод load, передадим ему URL-адрес нашего файла Collada, а затем вызываем нашу функцию по имени в качестве второго аргумента:

Если вы хотите больше узнать о ColladaLoader, вы можете просмотреть исходный код на GitHub.

4. Render Loop

Наконец, мы на последнем шаге в создании нашей графики; Нам нужно создать так называемый «цикл рендеринга». Так как мы пока что еще ничего не рендерим.

«Цикл рендера» - это то, что заставит рендерер рисовать сцену шестьдесят раз в секунду. Следующая функция оживит наше творчество (лучшая часть всего процесса).

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

Итоговый продукт

Результатом всей этой работы является приятный рендеринг 3D-iPhone, который вы можете вращать, поворачивать и увеличивать и уменьшать:

Есть еще несколько действий, которые были включены в финальную версию сцены, так что советую вам еще углубиться в панель JavaScript нашего демо.

Например; Освещение (AmbientLight, HemisphereLight, PointLight), TrackballControls, AxisHelper и событие изменения размера окна. Некоторые из упомянутых элементов не содержат документации, такой как TrackballControls, но вы можете найти все свойства, доступные в основном JS-файле на GitHub. Есть и другие действительно крутые элементы управления, которые вы можете использовать, и которые также перечислены в GitHub.

Вдохновение

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

httpspaperplanesworld
https://paperplanes.world
httpsthroughthedarkwithgooglecom grab your headphones
https://throughthedark.withgoogle.com (оденьте наушники)
httpcarvisualizerplus360degreescomthreejs
http://carvisualizer.plus360degrees.com/threejs

Дальнейшее чтение

Рэйчел Смит написала отличную статью по CodePen о WebGL, и я настоятельно рекомендую почитать ее, когда у вас будет свободное время. Учебник написан довольно простым языком и представляет собой подробное объяснение того, как Three.js создает сцену, геометрию, освещение, материалы и анимацию, которые я, конечно, не мог охватить в этой короткой статье.

Вы также можете:

Титры

Эта статья была бы невозможна без щедрой помощи от Slay сообщества Animation at Work, поэтому я хотел бы поблагодарить Стивена Шоу, Джеффа Айера, Луи Хебрэгтса, Нейла Пулмана, Эли Фитча и Криса Джонсона.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.