[Перевод] Изучаем Three.js.Глава 1: Создаем нашу первую 3D-сцену, используя Three.js29.05.2014 10:18

Всем привет! Хочу начать вольный перевод замечательной книги «Learning Three.js- The JavaScript 3D Library for WebGL». Я уверен, что эта книга будет интересна не только новичкам, но и профессионалам своего дела. Ну не буду долго затягивать вступление, только приведу пример того, что мы совсем скоро сможем делать:

Создаем структуру HTML страницыПервое, что нам нужно сделать, это создать пустую HTML страницу, которую можно будет использовать в качестве основы для всех наших примеров. Это HTML структура представлена следующим образом: Example 01.01 — Basic skeleton

В этом листинге представлена структура очень простой HTML-страницы, только с парой элементов. В блоке мы загружаем внешние библиотеки JavaScript, которые мы будем использовать в примерах. Например, в приведенном листинге мы пытаемся подключить две библиотеки: Three.js и jquery-1.9.0.js. Также в этом блоке мы прописываем пару строк для CSS оформления. В предыдущем фрагменте вы можете увидеть немного JavaScript кода. Этот небольшой фрагмент кода использует JQuery при вызове безымянной JavaScript функции, когда страница полностью загружена. Мы поместим весь код Three.js внутрь этой функции.Three.js бывает двух версий: Three.min.js: Эту библиотеку вы обычно используете при открытии Three.js сайтов. Это минимизированная версия Three.js, созданная с использованием UglifyJS, которая в два раза меньше обычной библиотеки Three.js. Все примеры и код, используемый тут, основаны на проекте Three.js r60, который был выпущен в августе 2013 г. Three.js: Это нормальная библиотека Three.js. Мы будем использовать эту библиотеку в наших примерах, так как это делает отладку намного проще, потому что код становится более читабельнее. Если мы откроем только что написанную страницу в браузере, то будем не очень шокированы. Как и следовало ожидать, все, что мы увидим это пустая страница.

В следующем разделе вы узнаете, как добавить первые пару 3D-объектов на нашу сцену.

Рендеринг и просмотр 3D-объектов На этом этапе мы создадим нашу первую сцену и добавим пару объектов и камеру. Наш первый пример будет содержать следующие объекты: Плоскость — двумерный прямоугольник, который будет служить в качестве нашей основной площадки. Она будет отображаться как серый прямоугольник в середине сцены.Куб — трехмерный куб, который мы будем рендеритьв красный.Сфера — трехмерная сфера, которую мы будем рендерить в синий.Камера — она определяет, что мы увидим в выходных данных.Оси — х, у и z. Это полезный инструмент отладки, чтобы видеть, где рендерятся объекты.Сначала посмотрим, как это выглядит в коде, а потом постараемся разобраться. Так же мы добавим элемент

, который будет использоваться в качестве выхода статической графики

Единственное, что осталось сделать — это инициализировать статику и добавить ее в элемент

, как показано ниже: functioninitStats () { var stats = new Stats (); stats.setMode (0); stats.domElement.style.position = 'absolute'; stats.domElement.style.left = '0 px'; stats.domElement.style.top = '0 px'; $(»#Stats-output»).append (stats.domElement); returnstats; } Эта функция инициализирует статику. Интерес вызывает функция setMode (). Если мы передадим в нее 0, то будем измерять FPS, а если передадим 1, то будет измеряться время рендеринга. Для этого примера нас интересует FPS, поэтому мы передадим 0. В начале нашей безымянной функции jQuery мы будем вызывать эту функцию для включения статики: $(function () { var stats = initStats (); … } И еще одна деталь для функции render (): function render () { stats.update (); … requestAnimationFrame (render); renderer.render (scene, camera); } Если вы запустите код с этими дополнениями, то увидите статику в верхнем левом углу, как показано на следующем скриншоте:

Анимация куба С помощью метода requestAnimationFrame () и настроенной статики у нас появилась возможность размещать наш анимационный код. В этом разделе мы будем расширять возможности функции render () кодом, который будет вращать наш красный куб вокруг своей оси. Давайте начнем со следующего: functionrender () { … cube.rotation.x += 0.02; cube.rotation.y += 0.02; cube.rotation.z += 0.02; … requestAnimationFrame (render); renderer.render (scene, camera); } Это выглядит просто, не так ли? Все что мы сделали — это увеличили свойство rotation каждой оси на 0,02 каждый раз при вызове функции render (), и куб будет плавно вращаться вокруг своей оси. Сделаем так, чтобы синий шар подскакивал, но это будет немного сложнее.Подскакивание шара Для отскока шара мы добавим еще пару строк кода в нашу функцию render () следующим образом: var step=0; function render () { … step+=0.04; sphere.position.x = 20+(10*(Math.cos (step))); sphere.position.y = 2 +(10*Math.abs (Math.sin (step))); … requestAnimationFrame (render); renderer.render (scene, camera); } У куба мы изменили его свойство rotation; для сферы мы намерены изменить ее свойство position на сцене. Мы хотим, чтобы сфера подпрыгнула от одной точки сферы и приземлилась в другой точке сцены, переместившись по некоторой кривой. Для этого мы должны изменить свою позицию по оси х и положение по оси у. Функции Math.cos () и Math.sin () помогают нам в создании гладкой траектории с помощью переменной step. Здесь я не буду вдаваться в подробности как это работает. Пока все что вам нужно знать это то, что step+=0.04 определяет скорость подпрыгивания нашей сферы. На следующем скриншоте показана сцена с включенной анимацией:

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

Использование библиотеки dat.GUI делает экспериментирование более простым Пара ребят из Google создали библиотеку под названием dat.GUI (вы можете найти документацию на нее на сайте), которая позволяет вам легко создавать компоненты пользовательского интерфейса. В этой части главы мы будем использовать эту библиотеку, добавляя пользовательский интерфейс к нашему примеру, что позволит нам: контролировать скорость вращения прыгающего шара управлять вращением куба Так же как и для других библиотек, мы сначала добавим dat.GUI в элемент на нашей странице, используя следующий код: Следующее что нам необходимо сделать — это сконфигурировать JavaScript объект, который будет анализировать свойства, которые мы хотим изменить, используя библиотеку dat.GUI. В основной части нашего кода мы добавим следующий JavaScript объект: var controls = new function () { this.rotationSpeed = 0.02; this.bouncingSpeed = 0.03; } В этом объекте мы определим два свойства: this.rotationSpeed и this.bouncingSpeed вместе с их значениями по умолчанию. Далее мы передаем этот объект в новый объект dat.GUI и определяем диапазон этих двух свойств, как показано ниже: vargui = new dat.GUI (); gui.add (controls, 'rotationSpeed',0,0.5); gui.add (controls, 'bouncingSpeed',0,0.5); Свойства rotationSpeed и bouncingSpeed оба установлены в диапазоне от 0 до 0,5. Все, что нам нужно сейчас сделать — это убедиться, что внутри цикла нашей функции render мы ссылаемся на эти два свойства напрямую, так что, когда мы вносим изменения с помощью пользовательского интерфейса dat.GUI, они сразу же влияют на вращение и скорость подскакивания наших объектов. Это делается следующим образом: function render () { … cube.rotation.x += controls.rotationSpeed; cube.rotation.y += controls.rotationSpeed; cube.rotation.z += controls.rotationSpeed; step+=controls.bouncingSpeed; sphere.position.x = 20+(10*(Math.cos (step))); sphere.position.y = 2 +(10*Math.abs (Math.sin (step))); … } Теперь, при запуске нашего примера, вы увидите простой пользовательский интерфейс, который можно использовать для управления скоростью подпрыгивания и вращения объектов:

Использование ASCII эффектов На протяжении этой главы мы работали над созданием довольно прогнозируемого 3D-рендеринга с использованием самых современных функций браузера. Three.js также имеет несколько интересных функций, которые вы можете использовать для того, чтобы сделать отображение более необычным. Перед тем как закончить эту главу, я хочу познакомить вас с одним из этих эффектов: ASCII эффект. С этим эффектом вы можете изменить нашу анимацию, сделав ее в стиле ретро арт-ASCII, обойдясь всего парой строк кода. Для этого мы должны будем изменить несколько последних строк нашего главного цикла: $(»#WebGL-output»).append (renderer.domElement); На следующие: var effect = new THREE.AsciiEffect (renderer); effect.setSize (window.innerWidth, window.innerHeight); $(»#WebGL-output»).append (effect.domElement); Мы также должны будем сделать небольшие изменения в цикле функции рендеринга. Вместо вызова метода renderer.render (scene, camera), необходимо вызвать метод effect.render (scene, camera). В результате всего этого мы получим следующее:

Надо признать, что это не очень полезная функция, но было приятно показать вам, как легко можно расширять различные части Three.js благодаря его модульности.

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