СОЗДАНИЕ СЦЕНЫ


В этом разделе мы кратко познакомимся с принципами работы библиотеки Three.js и создадим нашу первую сцену и вращающимся кубом. В самом низу страницы будет представлен рабочий пример.


Подготовка

Прежде чем начать, подключите библиотеку Three.js к своей странице. Скачать её можно с официального сайта.

Шаблон HTML страницы, на которой мы будем тренироваться, можно скопировать из примера ниже.

<!DOCTYPE html>
<html>
	<head>
		<meta charset=utf-8>
		<title>My first Three.js app</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>


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

В первую очередь для создания сцены необходимы три вещи

1. сама сцена

2. камера

3. рендерер(визуализатор)

создадим их, как показано в примере ниже


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.

Первый параметр, указанный при создании камеры - это вертикальный угол обзора или fov. Тип данных - float. Измеряется в градусах.

link

Второй параметр - соотношение сторон. Для того, чтобы куб или шар казались соответственно кубом и шаром на всех типах устройств, этот параметр должен моденржать в себе пропорцию сторон экрана этих устройств. На пример - window.innerWidth / window.innerHeight. Указывая этот параметр произвольно, вы рискуете получить не пропорциональные, сплющенные или вытянутые изображения на различных устройствах.

Третий и четвёртый параметры - ближняя и дальная плоскость отсечения зоны видимости. Т.е. на сцене визуализируются только те объекты, которые находятся на удалении от камеры в 0.1 и до 1000. Все то, что находится ближе к камере или дальше от неё, перестаёт отрисовываться. При помощи уменьшения этих параметров можно получить более лучшую производительность.

После того как мы создали камеру, перейдём к созданию рендерера. Именно в этом объекте происходит процедура отрисовки изображения на экране.

var renderer = window.WebGLRenderingContext ? new THREE.WebGLRenderer() : new THREE.CanvasRenderer();

кросплатформенное подключение. Но на ИЕ будет работать значительно медленней.

При создании рендерера, мы указываем размер области, в которой он будет работать. В нашем случае это window.innerWidth и window.innerHeight. Но можно и произвольно задать эти размеры. Например window.innerWidth/2, window.innerHeight/2. При указании третьего параметра как false - setSize(window.innerWidth/2, window.innerHeight/2, false), рендерер будет отрабатывать в области, равной половинн экрана. Однако растягиваться будет по всему элементу body, тем самым снижая качество картинки и улучшая проиводительность.

Добавим на сцену куб


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

camera.position.z = 25;
Если сейчас посмотреть на то, что у нас получилось, то мы увидим только чёрный экран.

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

В дополнении к геометрии, необходимо указать цвет метриала. Делается это таким же образом как и задавалась геометрия выше. Т.е. создаётся экземпляр объекта MeshBasicMaterial. Материал может быть текстурой, но сейчас мы задаём только цвет в hex формате { color: 0x00ff00 }.

Three.js имеет несколько объектов для создания материала. Но сейчас мы рассмотрим только MeshBasicMaterial.

Третье что нам понадобиться для создания куба - это экземпляр объекта Mesh.

Он соединяет Геометрию и Материал в конечный объект.

Далее мы добавляем готовый куб на сцену (по умолчанию в точку 0.0.0)

И что бы камера не оказалась внутри куба, мы отодвигаем её.

Рендерим сцену

Если сейчас скопировать весь код, то ничего не будет видно, потому что сцена ещё не актуализирована рендером Его надо добавить в цикле

function render() {

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


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

Анимируем куб.

На данный момент мы можем видеть только зеленый квадрат. Давайте заставим наш куб двигаться.

добавляем в фунцию render() следующий код


	cube.rotation.x += 0.1;
	cube.rotation.y += 0.1;
При запуски примера, вы увидите, что куб начал вращаться вокруг осей x и y.

Поздравляю! Вы только что создали своё первое three.js приложение.

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


<html>
	<head>
		<title>My first Three.js app</title>
		<style>
			body { margin: 0; }
			canvas { width: 100%; height: 100% }
		</style>
	</head>
	<body>
		<script src='js/three.js'></script>
		<script>
			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 );

			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 = 5;

			var render = function () {
				requestAnimationFrame( render );

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

				renderer.render(scene, camera);
			};

			render();
		</script>
	</body>
</html>
Яндекс.Метрика