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

Прежде чем использовать файл three.js, его нужно где-то отобразить. Сохраните следующий HTML в файл на своем компьютере вместе с копией файла three.js в каталоге js/ и откройте его в браузере.

Скачать three.js

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>My first three.js app</title>
		<style>
			body { margin: 0; }
		</style>
	</head>
	<body>
		<script src="js/three.js"></script>
		<script>
			// Our Javascript will go here.
		</script>
	</body>
</html>

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

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

Чтобы иметь возможность отображать что-либо с помощью three.js, нам нужны три вещи: сцена (scene), камера (camera) и рендерер (renderer), чтобы мы могли отображать сцену с помощью камеры.

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

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

В three.js есть несколько различных камер. Пока что будем использовать PerspectiveCamera.

Первый атрибут — это поле зрения field of view (FOV). FOV — это площадь сцены, которая видна на дисплее в любой момент времени. Значение выражается в градусах.

Второй — соотношение сторон aspect ratio. Почти всегда нужно использовать ширину элемента, деленную на высоту, иначе вы получите тот же результат, что и при воспроизведении старых фильмов на широкоэкранном телевизоре — изображение будет выглядеть сжатым.

Следующие два атрибута — ближняя (near) и дальняя (far) плоскость обрезания. Это означает, что объекты, расположенные дальше от камеры, чем значение far, или ближе, чем near, не будут отображаться. Сейчас вам не нужно беспокоиться об этом, но вы можете захотеть использовать другие значения в своих приложениях для повышения производительности.

Далее следует рендерер. Именно здесь происходит волшебство. В дополнение к WebGLRenderer, который мы используем здесь, three.js поставляется с несколькими другими, часто используемыми как запасные варианты для пользователей со старыми браузерами или для тех, у кого по каким-то причинам нет поддержки WebGL.

Помимо создания экземпляра рендерера, нам также необходимо задать размер, в котором мы хотим, чтобы он отображал наше приложение. Хорошо использовать ширину и высоту области, которую мы хотим заполнить нашим приложением — в данном случае это ширина и высота окна браузера. Для приложений, требующих высокой производительности, вы также можете задать setSize меньшие значения, например window.innerWidth/2 и window.innerHeight/2, которые заставят приложение рендериться в четверть размера.

Если вы хотите сохранить размер вашего приложения, но отобразить его с меньшим разрешением, вы можете сделать это, вызвав setSize с false в качестве updateStyle (третий аргумент). Например:

setSize(window.innerWidth/2, window.innerHeight/2, false)

отрисует ваше приложение с половинным разрешением, учитывая, что ваш <canvas> имеет 100% ширину и высоту.

И последнее, но не менее важное, мы добавляем элемент renderer в наш HTML-документ. Это элемент

«Это все хорошо, но где же обещанный кубик?»

Давайте добавим его сейчас.

const geometry = new THREE.BoxGeometry( 1, 1, 1 );
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
const cube = new THREE.Mesh( geometry, material );
scene.add( cube );

camera.position.z = 5;

Для создания куба нам понадобится BoxGeometry. Это объект, который содержит все точки (вершины vertices) и заливку (грани faces) куба. Мы рассмотрим это подробнее в будущем.

В дополнение к геометрии нам нужен материал, чтобы окрасить ее. Three.js поставляется с несколькими материалами, но мы пока будем придерживаться MeshBasicMaterial. Все материалы принимают объект свойств, которые будут к ним применяться. Чтобы все было очень просто, мы предоставим только атрибут цвета 0x00ff00, то есть зеленый. Это работает так же, как цвета работают в CSS или Photoshop (шестнадцатеричные цвета hex colors).

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

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

Рендеринг (визуализация) сцены

Если вы скопируете код сверху в HTML-файл, который мы создали ранее, вы ничего не увидите. Это потому, что мы еще ничего не отобразили. Для этого нам нужен так называемый цикл рендеринга или анимации (render or animate loop).

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

Это создаст цикл, который заставляет рендерер рисовать сцену при каждом обновлении экрана (на обычном экране это означает 60 раз в секунду). Если вы новичок в написании игр в браузере, вы можете сказать: «Почему бы нам просто не создать setInterval?».

Дело в том, что мы могли бы, но requestAnimationFrame имеет ряд преимуществ. Возможно, самое важное из них заключается в том, что он приостанавливается, когда пользователь переходит на другую вкладку браузера, а значит, не тратит драгоценную вычислительную мощность и заряд батареи.

Анимация куба

Если вы вставите весь приведенный выше код в файл, который вы создали перед началом нашей работы, вы должны увидеть зеленый квадрат. Давайте сделаем все это немного интереснее, повернув его.

Добавьте следующий код прямо над вызовом renderer.render в вашей функции animate:

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

Результат

Поздравляем! Вы завершили работу над своим первым приложением three.js. Оно простое, но нужно с чего-то начинать.

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>My first three.js app</title>
		<style>
			body { margin: 0; }
		</style>
	</head>
	<body>
		<script src="js/three.js"></script>
		<script>
			const scene = new THREE.Scene();
			const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

			const renderer = new THREE.WebGLRenderer();
			renderer.setSize( window.innerWidth, window.innerHeight );
			document.body.appendChild( renderer.domElement );

			const geometry = new THREE.BoxGeometry( 1, 1, 1 );
			const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
			const cube = new THREE.Mesh( geometry, material );
			scene.add( cube );

			camera.position.z = 5;

			function animate() {
				requestAnimationFrame( animate );

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

				renderer.render( scene, camera );
			};

			animate();
		</script>
	</body>
</html>

Была ли эта страница полезной?