Создание простой сцены с помощью Three.js
В 3D сцене любой игры, даже самой простой, есть стандартные сущности, такие как поверхности, расположенные в координатной системе, камера, для того, чтобы их видеть, света и материалы, для того, чтобы они лучше выглядели, анимации, чтобы их оживить и тд. Three.js, как и любая другая 3D библиотека, предоставляет встроенные функции, которые помогут вам в реализации 3D. В этой статье мы покажем вам основы использования Three, включая настройку среды, структуру необходимого HTML, фундаментальные объекты Three и как создать простейшую сцену.
Примечание: Мы выбрали Three, потому что это одна из самых популярных WebGL библиотек и она достаточно проста в освоении. Это не значит, что она самая лучшая, вы можете выбрать любую другую, например CopperLicht, GLGE, O3D и тд.
Настройка среды
Чтобы начать разработку с Three.js, нужно:
- Удостовериться, что вы используете современную версию браузера с поддержкой WebGL, например, Firefox или Chrome.
- Создать папку для экспериментов.
- Сохранить копию последней версии библиотеки Three.js в вашей папке.
- Открыть документацию Three.js в отдельной вкладке.
HTML структура
Здесь находится HTML структура, которую мы будем использовать:
doctype html> html> head> meta charset="utf-8" /> title>MDN Games: Three.js demotitle> style> body margin: 0; padding: 0; > canvas width: 100%; height: 100%; > style> head> body> script src="three.min.js"> script> script> var WIDTH = window.innerWidth; var HEIGHT = window.innerHeight; /* весь наш JavaScript-код будет после этого комментария */ script> body> html>
Прежде чем продолжить, скопируйте этот код в новый файл и сохраните в вашей рабочей директории под именем index.html .
Renderer
Renderer это инструмент для отрисовки сцены в браузере. Есть 2 вида таких инструментов: WebGL по умолчанию, другие — Canvas, SVG, CSS, и DOM. Они различаются по тому как все рендерится. Несмотря на различия в них, для пользователя все будет выглядеть одинаково. Поэтому, вы можете выбрать запасной вариант на случай, если браузер пользователя не поддерживает выбранную вами технологию.
var renderer = new THREE.WebGLRenderer( antialias: true >); renderer.setSize(WIDTH, HEIGHT); renderer.setClearColor(0xdddddd, 1); document.body.appendChild(renderer.domElement);
Создаём новый WebGL renderer, устанавливаем размер так, чтобы он занимал все пространство страницы, прикрепляем DOM-элемент к странице. Вы могли заметить параметр antialias в первой строке — если он установлен в true , то границы объектов сглаживаются. Метод setClearColor() устанавливает цвет фона (мы установили в 0xDDDDDD, светло-серый, значение по умолчанию — чёрный).
Добавьте этот код в ваш элемент .
Сцена
Сцена (scene) это место, где все происходит. Когда создаются новые объекты, они добавляются в сцену, чтобы их можно было увидеть. В three.js роль сцены выполняет объект Scene . Давайте создадим его, добавив следующих код:
var scene = new THREE.Scene();
Позже, мы будем использовать метод .add() для добавления объектов в сцену.
Камера
У нас есть сцена, теперь необходимо создать камеру. С помощью следующих строк мы добавим камеру, установим её позицию в координатной системе и направим её на нужную нам точку, где расположено то, что мы хотим видеть:
var camera = new THREE.PerspectiveCamera(70, WIDTH / HEIGHT); camera.position.z = 50; scene.add(camera);
Добавьте следующий код в программу.
Существует несколько типов камер: кубическая (Cube), ортографическая (Orthographic), но самая простая — перспективная (Perspective). Чтобы инициализировать её, нужно установить угол обзора и соотношение сторон: Первое нужно для указания того, как широко мы видим, последний для того, чтобы эти объекты имели правильные пропорции. Объясним поподробнее, что означают числа, что мы установили:
- Мы установили поле зрения в 70, с этим можно поэкспериментировать: чем больше число, тем больше угол обзора, тем шире мы видим. Представьте обычную камеру и камеру с эффектом fish eye, Которая позволяет увидеть больше. Значение по умолчанию 50.
- Соотношение сторон установлено в соотношение сторон окна браузера. Можно установить, например, в 16 ⁄ 9. Значение по умолчанию 1.
- Координата z , равная 50, это дистанция от камеры до начала координат сцены вдоль оси z . Мы установили такое значение, чтобы увидеть объекты в сцене. Значения x и y по умолчанию равны 0.
Стоит поэкспериментировать с этими значениями, чтобы лучше разобраться в том, как они влияют на отрисовку сцены.
Примечание: значения позиции (например координата z) безразмерны, устанавливайте их так, чтобы вам было удобно с ними работать.
Отрисовка сцены
Всё уже готово, но мы пока что ничего не видим. Хотя мы настроили рендерер, нам всё равно нужно запустить рендеринг. Функция render() выполнит эту работу с небольшой помощью requestAnimationFrame() , которая заставляет сцену постоянно перерисовываться в каждом кадре:
function render() requestAnimationFrame(render); renderer.render(scene, camera); > render();
На каждом новом кадре вызывается функция render() , а renderer рендерит scene и camera . Сразу после объявления функции мы в первый раз вызываем её, чтобы запустить цикл, после чего он будет использоваться бесконечно.
Ещё раз, добавьте этот новый код ниже ваших предыдущих дополнений. Попробуйте сохранить файл и открыть его в браузере. Теперь вы должны увидеть серое окно. Поздравляем!
Geometry
Now our scene is properly rendering, we can start adding 3D shapes. To speed up development, Three.js provides a bunch of predefined primitives, which you can use to create shapes instantly in a single line of code. There’s cubes, spheres, cylinders, and more complicated shapes available. Detail like drawing required vertices and faces, for a given shape, is handled by the Three framework, so we can focus on higher level coding. Let’s start, by defining the geometry for a cube shape, adding the following just above the render() function:
var boxGeometry = new THREE.BoxGeometry(10, 10, 10);
In this case, we define a simple cube that is 10 x 10 x 10 units. The geometry itself is not enough though, we also need a material that will be used for our shape.
Material
A material is what covers an object, the colors, or textures on its surface. In our case, we will choose a simple blue color to paint our box. There are a number of predefined materials which can be used: Basic, Phong, Lambert. Let’s play with the last two later, but for now, the Basic one should be enough:
var basicMaterial = new THREE.MeshBasicMaterial( color: 0x0095dd >);
Add this line below the previously added.
Our material is now ready, what next?
Mesh
To apply the material to a geometry, a mesh is used. This takes on a shape, and adds the specified material to every face:
var cube = new THREE.Mesh(boxGeometry, basicMaterial);
Again, add this line below the one you previously added.
Добавление куба в сцену
Сейчас мы создали куб, используя ‘geometry’ и ‘material’. Последнее, что мы должны сделать — добавить куб на сцену. Добавьте в код эту строку:
.add(cube);
Если вы сохраните код и обновите вкладку браузера, вы увидите квадрат, а не куб, потому, что он стоит ровно напротив камеры и мы видим только одну сторону. У объектов есть полезное свойство — мы можем изменять их как хотим. Например, вы можете вращать его и масштабировать, сколько угодно. Что давайте немного повернём его, чтобы видеть больше сторон. Добавить в конец кода эту строку:
.rotation.set(0.4, 0.2, 0);
Поздравляю, вы создали объект в 3D-среде! This might have proven easier than you first thought? Here’s how it should look:
Весь код который мы создали:
More shapes and materials
Now we will add more shapes to the scene, and explore other shapes, materials, lighting, and more. Let’s move the cube to the left, to make space for some friends. Adding the following line just below the previous one:
.position.x = -25;
Now onto more shapes and materials. What might you input to add a torus, wrapped in the Phong material? Try adding the following lines, just below the lines defining the cube.
var torusGeometry = new THREE.TorusGeometry(7, 1, 6, 12); var phongMaterial = new THREE.MeshPhongMaterial( color: 0xff9500 >); var torus = new THREE.Mesh(torusGeometry, phongMaterial); scene.add(torus);
These lines will add a torus geometry; the TorusGeometry() method’s parameters define, and the parameters are radius , tube diameter , radial segment count , and tubular segment count . The Phong material should look more glossy than the box’s simple Basic material, though right now our torus will just look black.
We can choose more fun predefined shapes. Let’s play some more. Add the following lines, below those defining the torus:
var dodecahedronGeometry = new THREE.DodecahedronGeometry(7); var lambertMaterial = new THREE.MeshLambertMaterial( color: 0xeaeff2 >); var dodecahedron = new THREE.Mesh(dodecahedronGeometry, lambertMaterial); dodecahedron.position.x = 25; scene.add(dodecahedron);
This time, we are creating a dodecahedron, a shape containing twelve flat faces. The parameter, DodecahedronGeometry(), defines the size of the object. We’re using a Lambert material, similar to Phong, but should be less glossy. Again it’s black, for now. We’re moving the object to the right, so it’s not in the same position as the box, or torus.
As mentioned above, the new objects currently just look black. To have both, the Phong and Lambert materials properly visible, we need to introduce a source of light.
Lights
There are various types of light sources available in Three.js. The most basic is PointLight , which works like a flashlight, shining a spotlight in a defined direction. Add the following lines, below your shape definitions:
var light = new THREE.PointLight(0xffffff); light.position.set(-10, 15, 50); scene.add(light);
We define a white point of light, set its position a little away from the center of the scene, so it can light up some parts of the shapes, finally adding it to the scene. Now everything works as it should, all three shapes are visible. You should check the documentation for other types of lights, like Ambient, Directional, Hemisphere, or Spot. Experiment placing them on our scene, to see how they affect it.
This looks a little boring though. In a game, something is usually happening. We might see animations and such. So let’s try breathing a little life into these shapes, by animating them!
Анимация
Мы можем использовать ‘rotation’, чтобы поменять положение куба. Также мы можем масштабировать фигуры или изменять их положение. Чтобы создать анимацию нужно внесённые изменения внести в цикл рендеринга, чтобы изменения происходили в каждом кадре.
Вращение
Вращать фигуры просто. Вы просто добавляете или отнимаете значение по оси вращения. Добавьте эту строку кода сразу после: requestAnimationFrame() invocation inside the render function:
.rotation.y += 0.01;
This rotates the cube on every frame, by a tiny bit, so the animation looks smooth.
Scaling
We can also scale an object. Applying a constant value, we would make it grow, or shrink just once. Let’s make things more interesting. First, we implement a helper variable, called t, for counting elapsed time. Add it right before the render() function:
var t = 0;
Now let’s increase the value by a given constant value, on each frame of the animation. Add the following lines, just below the requestAnimationFrame() invocation:
+= 0.01; torus.scale.y = Math.abs(Math.sin(t));
We use Math.sin , ending up with quite an interesting result. This scales the torus, repeating the process, as sin is a periodic function. We’re wrapping the scale value in Math.abs , to pass the absolute values, greater or equal to 0. As sin is between -1 and 1, negative values might render out torus in unexpected way. In this case it looks black half the time.
Now, onto movement.
Moving
Aside from rotation, and scaling, we can additionally move objects around the scene. Add the following, again just below our requestAnimationFrame() invocation:
.position.y = -7 * Math.sin(t * 2);
This will move the dodecahedron up and down, by applying the sin() value to the y axis on each frame, and a little adjustment to make it look cooler. Try changing these values, to see how it affects the animations.
Conclusion
Here’s the final code:
You can also see it on GitHub and fork the repository, if you want to play with it locally. Now you understand the basics of Three.js, you can jump back to the parent page, 3D on the Web (en-US) .
You could also try learning raw WebGL, to gain a better understanding of what’s going on underneath. See our WebGL documentation.
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
This page was last modified on 3 авг. 2023 г. by MDN contributors.
Your blueprint for a better internet.
Что такое Three JS
Three.js — это 3D-библиотека, которая пытается максимально упростить получение 3D-контента на веб-странице.
Three.js часто путают с WebGL, поскольку чаще всего, но не всегда, three.js использует WebGL для рисования 3D. WebGL — это система очень низкого уровня, которая рисует только точки, линии и треугольники . Чтобы сделать что-то полезное с WebGL, обычно требуется довольно много кода, и именно здесь на помощь приходит three.js. Он обрабатывает такие вещи, как сцены, свет, тени, материалы, текстуры, 3D-математику и все, что вам придется писать самостоятельно, если бы вы использовали WebGL напрямую.
В руководствах по Three Js предполагается, что вы уже знаете JavaScript. Смотрите здесь краткий список вещей, которые вы, как ожидается, уже знаете . Большинство браузеров, поддерживающих three.js, обновляются автоматически, поэтому большинство пользователей смогут запускать этот код. Если вы хотите, чтобы этот код работал в действительно старых браузерах, посмотрите на транспилятор, такой как Babel .
Ниже — море, созданное с помощью ThreeJs. Отсюда.
Изучая большинство языков программирования, люди первым делом заставляют компьютер печатать «Hello World!». Для 3D одна из самых распространенных первых вещей — это создание 3D-куба.
Давайте попробуем дать вам представление о структуре приложения three.js. Приложение three.js требует, чтобы вы создали кучу объектов и соединили их вместе. Вот диаграмма, которая представляет небольшое приложение three.js.
Структура Three Js
На что следует обратить внимание в приведенной выше диаграмме.
Есть Renderer (отрисовка). Возможно, это главная цель three.js. Вы передаете данные Scene (Сцены) и данные Camera (Камеры), программа визуализирует (отрисовывает) часть 3D-сцены, которая находится внутри усеченного конуса камеры, в виде 2D-изображения на холсте.
Существует граф сцены , который представляет собой древовидную структуру, состоящую из различных объектов, таких как Scene объект, несколько Mesh объектов, Light объекты, Group, Object3D и Camera объекты. Объект Scene определяет узел графа сцены и содержит такие свойства, как цвет фона и туман.
Эти объекты определяют иерархическую структуру родительского/дочернего дерева и представляют, где появляются объекты и как они ориентированы.
Дети расположены и ориентированы относительно своего родителя.
Например, колеса автомобиля могут быть дочерними элементами автомобиля, поэтому перемещение и ориентация объекта автомобиля автоматически приводит в движение колеса. Подробнее об этом можно прочитать в статье о сценографах.
Mesh объекты представляют рисунок конкретного Geometry( Геометрическая фигура: сфера, куб. ) с конкретным Material. И Material объекты, и Geometry объекты могут использоваться несколькими Mesh объектами. Например, чтобы нарисовать два синих куба в разных местах, нам могут понадобиться два Mesh объекта для представления положения и ориентации каждого куба. Нам понадобится только один Geometry для хранения данных вершин куба, и нам понадобится только один Material, чтобы указать синий цвет. Оба Mesh объекта могут ссылаться на один и тот же Geometry объект и на один и тот же Material объект.
Geometry объекты представляют данные вершин некоторой части геометрии, такой как сфера, куб, плоскость, собака, кошка, человек, дерево, здание и т. д. Three.js предоставляет множество видов встроенных геометрических примитивов . Вы также можете создавать пользовательскую геометрию , а также загружать геометрию из файлов.
Material объекты представляют свойства поверхности, используемые для рисования геометрии , включая такие вещи, как используемый цвет и степень блеска. И Material также может ссылаться на один или несколько Texture объектов, которые можно использовать, например, для переноса изображения на поверхность геометрии.
Texture объекты обычно представляют собой изображения, загруженные из файлов изображений , сгенерированные из холста или визуализированные из другой сцены.
Lightобъекты представляют различные виды огней .
Например, если мы захотим сделать небольшой объект, допустим, «Hello, cub!», наша установка будет выглядеть как на рисунке ниже.
Сначала загрузим three.js
Важно, чтобы вы вставили type=»module» тег сценария. Это позволяет нам использовать import ключевое слово для загрузки three.js. Существуют и другие способы загрузки three.js, но начиная с r106 рекомендуется использовать модули. Преимущество модулей в том, что они могут легко импортировать другие необходимые им модули. Это избавляет нас от необходимости вручную загружать дополнительные скрипты, от которых они зависят.
Далее нам нужен тег
Мы попросим three.js отрисовать этот холст, поэтому нам нужно найти его.
После того, как мы просматриваем холст, мы создаем файл WebGL Renderer. Рендерер — это то, что отвечает за фактическое получение всех данных, которые вы предоставляете, и их рендеринг (отрисовку) на холсте. В прошлом были другие рендереры, такие как CSS Renderer, Canvas Rendererа в будущем может появиться WebGL2 Renderer или WebGPU Renderer. На данный момент есть тот WebGLRenderer , который использует WebGL для рендеринга 3D на холсте.
Обратите внимание, что здесь есть некоторые эзотерические детали. Если вы не передадите холст в three.js, он создаст его для вас, но затем вам придется добавить его в свой документ. Место его добавления может меняться в зависимости от вашего варианта использования, и вам придется изменить свой код, поэтому я считаю, что передача холста в three.js кажется немного более гибкой. Я могу разместить холст где угодно, и код найдет его, тогда как если бы у меня был код для вставки холста в документ, мне, вероятно, пришлось бы изменить этот код, если бы мой вариант использования изменился.
Далее нам понадобится камера. Мы создадим Perspective Camera.
const fov = 75;
const aspect = 2; // холст по умолчанию
const near = 0.1;
const far = 5;
const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
Fov является сокращением от field of view. В данном случае 75 градусов по вертикали. Обратите внимание, что большинство углов в three.js указаны в радианах, но по какой-то причине перспективная камера принимает градусы.
Aspect является аспектом отображения холста. Мы рассмотрим детали в другой статье , но по умолчанию размер холста составляет 300×150 пикселей, что делает соотношение сторон 300/150 или 2.
Near и far представляют пространство перед камерой, которое будет визуализировано. Все, что находится до или после этого диапазона, будет обрезано (не отрисовано).
Эти четыре параметра определяют «усеченную вершину» . Усеченная пирамида — это трехмерная фигура, похожая на пирамиду с отрезанным концом. Другими словами, подумайте о слове «усеченный конус» как о другой трехмерной форме, такой как сфера, куб, призма, усеченный конус.
Высота ближней и дальней плоскостей определяется полем зрения. Ширина обеих плоскостей определяется полем зрения и аспектом.
Все, что находится внутри определенной усеченной пирамиды, будет нарисовано. Ничего снаружи не будет.
По умолчанию камера смотрит вниз по оси -Z, а +Y вверх. Мы поместим наш куб в начало координат, поэтому нам нужно немного отодвинуть камеру от начала координат, чтобы что-то увидеть.
Другие примеры в левой колонке страницы, если смотрите на экране телефона, а не на мониторе.
3D-моделирование в браузере с помощью three.js
Сегодня браузеры предоставляют нам возможности, о которых мы не могли и мечтать 5 или 10 лет назад. Используя ресурсы браузера, можно создавать целые игровые 3D-миры и интерактивные сайты, обеспечивающие эффект присутствия.
Сейчас, когда одна из социальных сетей приобрела компанию, работающую в сфере разработки виртуальной реальности, самое время начать работать с 3D. Поразительно, но теперь мы можем, используя чистый JavaScript, работать с 3D, включая сетку и материалы.
Конечно, несмотря на то, что все это возможно, 3D-моделирование требует написания большого количества кода. И вот здесь в работу включается three.js, позволяя нам создавать 3D-окружения просто и с помощью меньшего количества кода.
Совместимость с браузерами
К сожалению, будучи новой технологией, 3D поддерживается не всеми браузерами. В настоящее время мы ограничены браузерами Chrome, Safari и Firefox.
Пройдет время, и поддержка технологии со стороны IE станет лучше, но в настоящее время вам потребуется запасной вариант решения для поклонников Microsoft.
Приступаем к работе
Первым делом перейдите на сайт three.js и скачайте последнюю версию библиотеки.
Затем подключите библиотеку в секции head вашего документа, как вы делаете это со всеми остальными JavaScript-файлами — и все готово.
Создаем первую сцену
Чтобы отрендерить что-либо с помощью three.js, сначала необходимо создать сцену, добавить камеру и настроить рендерер. Начнем со сцены:
var scene = new THREE.Scene(); Теперь нам нужна камера. Представьте, что камера — это точка, с которой пользователь смотрит на сцену. Three.js предоставляет широкие возможности настройки камеры, но для простоты мы будем использовать перспективную камеру:
var camera = new THREE.PerspectiveCamera(100, window.innerWidth / window.innerHeight, 0.1, 1000); Этот метод принимает 4 параметра: первый — это вертикальный угол обзора, второй — соотношение сторон кадра (я рекомендую всегда ориентироваться на видимую область документа (вьюпорт — прим. переводчика)), третий — расстояние до передней плоскости отсечения и, наконец, четвертый — расстояние до задней плоскости отсечения. Последние два параметра определяют ограничения области рендеринга, чтобы объекты, расположенные слишком близко или слишком далеко, не отрисовывались, потому что это вызвало бы излишнее потребление ресурсов.
После этого необходимо настроить WebGL-рендерер:
var renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement ); Как видите, сначала необходимо создать объект рендерера, затем установить его размер в соответствии с размером видимой области документа и, наконец, добавить его на страницу, чтобы создать пустой элемент canvas , с которым мы будем работать.
Добавляем объекты
Теперь, когда мы настроили сцену, создадим наш первый 3D-объект.
Пусть, для примера, это будет обычный цилиндр:
var geometry = new THREE.CylinderGeometry( 5, 5, 20, 32 ); Этот метод принимает 4 параметра: первый — это радиус верхнего основания цилиндра, второй — радиус нижнего основания цилиндра, третий — высота, последний — это количество образующих цилиндр вертикальных сегментов.
Мы математически описали объект, теперь нам необходимо присвоить ему материал, так чтобы он имел визуальное представление на экране:
var material = new THREE.MeshBasicMaterial( color: 0x0000ff, wireframe: true> ); Этот код описывает материал, из которого «изготовлен» объект, в данном случае он синего цвета. Я установил параметр wireframe в значение true , потому что так можно будет лучше его разглядеть, когда мы добавим анимацию.
Наконец, нам необходимо добавить наш цилиндр в сцену, примерно так:
var cylinder = new THREE.Mesh( geometry, material ); scene.add( cylinder ); Последнее, что нам необходимо сделать перед тем, как отрендерить сцену, это настроить положение камеры:
camera.position.z = 20; Как видите, мы используем достаточно простой JavaScript-код, потому что всю сложную работу выполняет three.js, и нам не нужно о ней беспокоиться.
Рендеринг сцены
Если запустить полученный пример в браузере, то вы увидите, что ничего не происходит. Это потому, что мы не дали команду на рендеринг сцены. Чтобы отрендерить сцену, необходимо выполнить следующий код:
function render() < requestAnimationFrame(render); renderer.render(scene, camera); > render(); Теперь, если обновить страницу, вы увидите в окне цилиндр, но вряд ли скажете, что это впечатляет.
Чтобы действительно прочувствовать особенность 3D, необходимо анимировать объект, что можно сделать с помощью пары небольших изменений в функции render :
function render( ) < requestAnimationFrame(render); cylinder.rotation.z += 0.01; cylinder.rotation.y += 0.1; renderer.render(scene, camera); > render(); Обновите страницу и увидите анимированный в 3D цилиндр.
Заключение
Если хотите посмотреть пример и поэкспериментировать с кодом, вы можете сделать это здесь.
Как видите, для создания такой (впрочем, очень простой) сцены потребовалось меньше пары десятков строк кода, и не потребовалось реализовывать сложную математическую модель.
Обратите внимание на примеры на сайте three.js, там можно найти совершенно невероятные работы.
Эта удивительная JavaScript-библиотека снизила порог входа в 3D-моделирование до уровня, доступного каждому, кто владеет основами работы с JavaScript.
Оригинальная статья: Building 3D in the browser with Three.js Статью вычитывали: visitorFM, Vladimir Starkov, FMRobot, smolnikov
© 2013 Frontender Magazine
Кроме материалов, опубликованных под лицензией Creative Commons
Руководство для новичка по Three.js
Сложность 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 добавьте:
var scene = new THREE.Scene();
Камеру!
Нам понадобится возможность взглянуть на нашу удивительную сцену — поэтому нам понадобится камера. Существует множество камер, с которыми поставляется Three.js, такие как PerspectiveCamera , StereoCamera , OrthographicCamera и CubeCamera . Для наших целей мы будем использовать PerspectiveCamera , так как она предназначена для имитации того, как видит человеческий глаз. Точно так же, как мы определяем сцену с переменной, мы делаем то же самое, чтобы определить камеру:
var camera = new THREE.PerspectiveCamera();
Наша PerspectiveCamera принимает четыре аргумента: fov , aspect , near и far .
- fov (поле зрения) — это то, насколько вы можете видеть вокруг центра камеры. Подумайте о широкоугольном объективе на камере по сравнению со стандартным объективом.
- aspect — отношение fov , или, другими словами, ширина к высоте экрана (например, 4: 5, 16: 9).
- Последние два, near и far , являются плоскостями твердого тела. Вместе они управляют отображением объекта на основе его расстояния от камеры. near это ближайший объект или часть объекта, которые могут быть в камере, в то время как все еще визуализируются, far — это самый далекий объект, который может быть от камеры и при этом все еще отображаться. Вместе они определяют угол обзора камеры.
Вот пример аргументов PerspectiveCamera:
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
Не обязательно понимать каждое значение в данный момент, за исключением того, чтобы знать значения, которые могут быть переданы. Продолжим дальше, нам нужно установить положение камеры.
camera.position.set(x, y, z);
Эта строка является локальным положением объекта. Это задает координаты x, y и z вектора. Без этого камера ничего не увидит.
2. WebGLRenderer
Следующим важным компонентом является создание WebGLRenderer. Это часть, которая отвечает за магию отображения вашего творения.
var renderer = new THREE.WebGLRenderer();
WebGLRenderer также может принимать свойства и значения, передаваемые в качестве объекта.
var renderer = new THREE.WebGLRenderer(
alpha: true // remove canvas' bg color
Существует несколько пар property : value , которые можно использовать, — они перечислены в документации, на случай если вы решите погрузиться глубже (что-то я настоятельно рекомендую сделать).
С помощью средства визуализации мы можем установить методы для дальнейшей настройки нашего творения, такие как setSize ; метод, который вы будете использовать почти в каждом проекте Three.js.
// Make scene renderer the size of the screen
renderer.setSize(window.innerWidth, window.innerHeight);
Есть много других методов, которые вы можете использовать, но для наших целей мы будем придерживаться setSize() .
3. DOM
Теперь, когда мы определили наш необходимый размер, нам понадобится способ присоединить его к DOM.
document.body.appendChild( renderer.domElement );
Свойство domElement — это то, где рендеринг выводит свой результат в виде элемента canvas . Хотя я использую document.body , вы можете добавить элемент canvas везде, где захотите. Это действительно зависит от вас, где вы хотите разместить свое творение на основе ваших конкретных потребностей проекта.
Создание объекта
Для следующего шага нам нужно создать объект, так как все, что мы сделали до этого момента, это объявление сцены, камеры и средства визуализации. Для демонстрационных целей возьмем сотовый телефон из 3D Warehouse, чтобы мы могли создать предварительный просмотр продукта для людей, покупающих iPhone в Интернете.
Как правило, вы можете использовать приложения, такие как SketchUp или даже Blender, для рисования 3D-объектов, однако существует высокая кривая обучения 3D-приложениям для рисования — кривая, которая, безусловно, выходит за рамки этой статьи.
Если вам нравится Piña Collada
Чтобы вставить наш 3D-объект в сцену, мы должны использовать ColladaLoader . Следует отметить, что любой графический объект, который вы решили использовать, должен, как правило, быть в пределах 1-2 МБ и должен быть файлом Collada, готовым для использования с Three.js: это файлы, которые заканчиваются расширением .dae . Если вы откроете файл Collada, вы увидите, что он написан на самом деле в XML.
Мы начинаем с определения ColladaLoader с помощью переменной и вызова метода вместе с определением другой переменной для представления 3D-графики.
var dae, // graphic
loader = new THREE.ColladaLoader(); // loader
Это отличное начало, но у нас впереди еще много работы, чтобы отобразить наш телефон. Давайте сделаем функцию, которая будет делать именно это:
function loadCollada( collada )
dae = collada.scene;
scene.add(dae);
Для следующего шага мы будем использовать метод load , передадим ему URL-адрес нашего файла Collada, а затем вызываем нашу функцию по имени в качестве второго аргумента:
loader.load( 'https://myurl.com/file/iphone6.dae', loadCollada);
Если вы хотите больше узнать о ColladaLoader , вы можете просмотреть исходный код на GitHub.
4. Render Loop
Наконец, мы на последнем шаге в создании нашей графики; Нам нужно создать так называемый «цикл рендеринга». Так как мы пока что еще ничего не рендерим.
«Цикл рендера» — это то, что заставит рендерер рисовать сцену шестьдесят раз в секунду. Следующая функция оживит наше творчество (лучшая часть всего процесса).
function renderPhone()
requestAnimationFrame( renderPhone );
renderer.render(scene, camera);
renderPhone();
RequestAnimationFrame имеет ряд преимуществ. Наиболее важным является то, что он останавливается, когда пользователь переходит на другую вкладку браузера, в конечном счете, что позволяет не тратить зря тратить ресурсы системы.
Итоговый продукт
Результатом всей этой работы является приятный рендеринг 3D-iPhone, который вы можете вращать, поворачивать и увеличивать и уменьшать:
Есть еще несколько действий, которые были включены в финальную версию сцены, так что советую вам еще углубиться в панель JavaScript нашего демо.
Например; Освещение ( AmbientLight , HemisphereLight , PointLight ), TrackballControls , AxisHelper и событие изменения размера окна. Некоторые из упомянутых элементов не содержат документации, такой как TrackballControls , но вы можете найти все свойства, доступные в основном JS-файле на GitHub. Есть и другие действительно крутые элементы управления, которые вы можете использовать, и которые также перечислены в GitHub.
Вдохновение
Иногда вам нужно немного вдохновения, чтобы мозг мог быстро генерировать идеи. Ниже приведены некоторые из моих любимых демонстраций, использующих Three.js, которые превращают мечты в реальность.
Дальнейшее чтение
Рэйчел Смит написала отличную статью по CodePen о WebGL, и я настоятельно рекомендую почитать ее, когда у вас будет свободное время. Учебник написан довольно простым языком и представляет собой подробное объяснение того, как Three.js создает сцену, геометрию, освещение, материалы и анимацию, которые я, конечно, не мог охватить в этой короткой статье.
Вы также можете:
- WebGL с THREE.js текстуры и частицы
- THREE.js для разработки игр
- WebGL с основами THREE.js
Титры
Эта статья была бы невозможна без щедрой помощи от Slay сообщества Animation at Work, поэтому я хотел бы поблагодарить Стивена Шоу, Джеффа Айера, Луи Хебрэгтса, Нейла Пулмана, Эли Фитча и Криса Джонсона.