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.