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

Three.js - это кроссбраузерная библиотека JavaScript / API, используемая для создания и отображения анимированной трехмерной компьютерной графики в веб-браузере. Он работает во всех браузерах и построен на основе WebGL (Web G raphics L ibrary), другого API JavaScript для рендеринга трехмерной графики в любой совместимый веб-браузер без использования плагинов.

Three.js - одна из многих популярных высокоуровневых библиотек для создания сложных компьютерных 3D-анимаций, которые отображаются в браузере без каких-либо традиционных браузерных приложений или плагинов. Другие популярные библиотеки включают GLGE, SceneJS и PhiloGL.

Давайте построим вращающийся куб

Для начала создадим 3 файла для CSS, HTML и JS. Библиотека Three.js - это отдельный файл JavaScript, поэтому его можно включить локально или в удаленной копии. В этой статье мы будем использовать локальную копию в нашем three.js файле внутри js папки.

В тело index.html включите исходные теги скрипта:

<body>   
  <script src="js/three.js"></script>   
  <script>    // Your JavaScript code will go here.   </script>  
</body>

В свой styles.css лист включите эти два свойства:

body { 
  margin: 0;
}
canvas {
  width: 100%; 
  height: 100%
}

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

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

Вы создаете экземпляры классов Scene, PerspectiveCamera и WebGLRenderer и устанавливаете их в качестве переменных. Для экземпляра PerspectiveCamera вы можете передать 4 атрибута:

  • Поле зрения - отображает ваши объекты с учетом расстояния от вашей точки обзора. Увеличение числа может уменьшить размер вашего объекта, создавая иллюзию того, что объект находится дальше от вас.
  • Соотношение сторон - частное, когда ширина элемента делится на высоту. Прямо сейчас ширина и высота установлены в соответствии с шириной окна вашего браузера.
  • Близко и далеко - ограничения, позволяющие отображать определенные объекты. Любые объекты, расположенные дальше от камеры, чем значение far, или объекты, расположенные ближе, чем значение near, не визуализируются. Эти атрибуты в основном используются для производительности.
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 );

Мы также создаем экземпляр класса WebGLRenderer, устанавливая размер равным ширине и высоте окна браузера. Затем мы добавляем элемент рендеринга в наш HTML-документ, который использует элемент canvas для отображения сцены.

Создать форму

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

  1. Создать геометрию
  2. Создайте материал и сетку
  3. Добавить сетку в сцену
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( { color: 0xFF6633 } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );
camera.position.z = 5;

Для других типов фигур это объекты, которые нужно использовать для их создания:

  • Сфера - СфераГеометрия
  • Куб - BoxGeometry
  • Конус - КонусГеометрия
  • Цилиндр - ЦилиндрГеометрия

Визуализация и анимация куба

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

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

Смотреть! Вот апельсиновый куб!

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

function render() {
  requestAnimationFrame( render );
  cube.rotation.x += 0.025;
  cube.rotation.y += 0.025;
  renderer.render( scene, camera );
}
render();

Вот и все! Теперь у вас есть оранжевый вращающийся куб. Лучше прядильщика, не так ли?

Ресурсы