Three.js уроки

Создание простой сцены на three.js

Цель этого раздела дать краткое введение в Three.js. Мы создадим сцену с вращающимся кубом. Рабочий пример приведен в нижней части страницы.

Подготовка

Для начала нам необходимо подключить библиотеку Three.js к своей странице. Скачать её можно с официального сайта. Сохраните следующий HTML шаблон в файл на вашем компьютере, вместе с копией Three.js в JS / директории.

<!DOCTYPE html> <html> <head> <meta charset=utf-8> <title>Мое первое приложение на three.js</title> <style> body { margin: 0; } canvas { width: 100%; height: 100% } </style> </head> <body> <script src=»js/three.js»></script> <script> // Наш JavaScript будет идти здесь </script> </body> </html>

Вот и все. Весь нужный нам код будем добавлять в пустой тег <script>

Создание сцены

Для того, чтобы отобразит что-нибудь с Three.js, нам нужны три вещи:

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

Давайте добавим в наш шаблон код приведенный ниже

var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); var renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement );

Разберем код. Мы создали сцену, нашу камеру и средства визуализации. Есть несколько различных камер в Three.js. На данный момент, давайте использовать PerspectiveCamera.

  • Первый атрибут является углом обзора (обычно используют угол от 45 до 75 градусов).
  • Второй атрибут соотношение сторон. В большенстве случаев вы будете использовать результат деления ширины элемента на его высоту, иначе можно получить искаженное изображение.
  • Следующие два атрибута ближнего и дальнего отсечения плоскости. Что это означает, что объекты дальше от камеры, чем значение далеко или ближе, чем вблизи не будет оказано. Вам не придется беспокоиться об этом сейчас, но вы можете захотеть использовать другие значения в ваших приложениях, чтобы получить более высокую производительность.

Далее создаем объект рендер и передаем в его метод SetSize параметры ширину и высоту. Рендер сгенерирует для нашего приложения тег canvas с параметрами width и height. Метод SetSize также принемает третий параметр (тип Boolean), по умолчанию FALSE. Если поставить TRUE то в canvas добавятся стили ширины и высоты.

<canvas width=»200″ height=»200″ style=»width: 200px; height: 200px;»></canvas>

После создания рендера нам нужно указать где нужно отобразить тег canvas. В нашем случае мы добавляем его в тег body.

Пришло время создать наш куб и добавить его на сцену.

var geometry = new THREE.BoxGeometry( 1, 1, 1 ); var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } ); var cube = new THREE.Mesh( geometry, material ); scene.add( cube ); camera.position.z = 4;

Чтобы создать куб, нужно воспользоваться объектом BoxGeometry. Это объект, который содержит в себе вершины и грани куба.

Далее нам нужен материал чтобы придать кубу цвет. Three.js поставляется с несколькими материалами, мы воспользуемся MeshBasicMaterial. Передадим в него атрибут цвета color со значением 0x00ff00. Цвет передается в шестнадцатеричном формате.

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

Далее нужно отодвинуть камеру, так как все объекты после метода scene.add() по умолчанию добавляются с координатами (0,0,0), из-за этого камера и куб будут в одной точке.

Рендеринг сцены

Для того чтобы увидеть анимацию нам понадобится так называемый цикл рендеринга.

function render() { requestAnimationFrame( render ); renderer.render( scene, camera ); } render();

Это цикл вызывает метод для рисования сцены 60 раз в секунду. Если вы новичок в написании игры в браузере, вы можете сказать: «почему бы нам не создать команду setinterval? Дело в том, что мы могли бы, но метод requestanimationframe имеет ряд преимуществ. Пожалуй, самым важным является то, что он приостанавливается, когда пользователь переходит на другую вкладку браузера, следовательно не тратит драгоценные вычислительные мощности и срок службы батареи.

Анимирование куба

Если вставить весь код выше в файл, вы должны увидеть зеленое поле. Давайте заставим его вращаться.
Добавьте следующий код прямо над renderer.render( scene, camera ).

cube.rotation.x += 0.05; cube.rotation.y += 0.05;

Этот код будет выполняться каждый кадр (60 раз в секунду), и заставит куб вращаться. В принципе, все, что вы хотите переместить или изменить во время работы приложения, должно пройти через цикл рендеринга.

Результат

Поздравляем! Вы уже завершили свое первое приложение three.js.

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

Мое первое приложение на three.js on jsbin.com

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 вектора. Без этого камера ничего не увидит.

3. DOM

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

document.body.appendChild( renderer.domElement );

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

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

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

IPhone 6+ от Jeremie P

Как правило, вы можете использовать приложения, такие как 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( ‘http://myurl.com/file/iphone6.dae’, loadCollada);

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

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

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

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

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

Вдохновение

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

https://paperplanes.worldhttps://throughthedark.withgoogle.com (оденьте наушники)http://carvisualizer.plus360degrees.com/threejs

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

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

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

  • WebGL с THREE.js текстуры и частицы
  • THREE.js для разработки игр
  • WebGL с основами THREE.js

Титры

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *