Работа с three.js — Часть I — Простое введение в three.js

[Пост также доступен на quaintitative.com]

По сравнению с Processing или p5.js, three.js поначалу может показаться немного пугающим. Основной причиной этого является код, необходимый для настройки 3D-сцены. В остальном, это действительно не намного сложнее.

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

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

Сначала мы импортируем основную библиотеку three.js, а также библиотеку OrbitControls.js. Библиотека three.js имеет основные функции, а библиотека OrbitControls.js позволит нам вставлять элементы управления для масштабирования, панорамирования и поворота представления.

<script type="text/javascript" src="./three.js"></script>
<script type="text/javascript" src="./OrbitControls.js"></script>

Настройте сцену, объявив -

  • сцена var scene = new THREE.Scene();
  • камера var camera = new THREE.PerspectiveCamera( 100, window.innerWidth / window.innerHeight, 10, 1000 );
  • визуализатор var renderer = new THREE.WebGLRenderer( { antialias: true } );
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 100, window.innerWidth / window.innerHeight, 10, 1000 );
camera.position.z = 30;
var renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setClearColor( 0xCC7FE0, 1 );

document.body.appendChild( renderer.domElement );

Другие вещи в приведенном выше коде используются для установки параметров этих переменных, например. установка положения камеры по оси z camera.position.z = 30;. Последняя строка самая важная. Он добавляет средство визуализации в тело документа HTML, чтобы мы могли видеть, что рисуем на экране.

Затем мы объявляем экземпляр OrbitControl.

var orbit = new THREE.OrbitControls( camera, renderer.domElement );
orbit.enableZoom = false;

И объявите и добавьте немного света на сцену.

var ambientLight  = new THREE.AmbientLight( '#FFE7FF' ),
	hemiLight     = new THREE.HemisphereLight('#FFE7FF', '#FFE7FF', 0.5 ),
	light         = new THREE.PointLight( '#FFE7FF', 1, 100 );

hemiLight.position.set( 0, 0, 10 );
light.position.set( 0, 0, 0 );

scene.add( hemiLight );
scene.add( light );

Обратите внимание, что мы добавляем элемент в сцену каждый раз, когда создаем ее. Функция «set» на самом деле предназначена только для установки координат x, y и z каждого элемента, который мы добавляем в сцену (свет, камера).

Теперь мы начинаем создавать объекты внутри сцены. Добавим одну сферу.

var group = new THREE.Group();
var geometry = new THREE.SphereGeometry( 3, 32, 32 );
var material = new THREE.MeshBasicMaterial( { color: 0xffffff, opacity:0.7, transparent:true } );
var sphere_one = new THREE.Mesh( geometry, material );
sphere_one.position.x = 0;
sphere_one.position.y = 0;
sphere_one.position.z = 0;

group.add( sphere_one );

Строки выше -

  • объявить новую группу — это позволяет нам создать подгруппу элементов внутри сцены
  • объявить новую геометрию для сферы с радиусом 3 и 32 гранями
  • объявите новый базовый материал белого цвета (#ffffff), прозрачный с непрозрачностью 0,7.
  • и с помощью геометрии и материала создайте сферу.

Затем мы устанавливаем положение сферы и добавляем ее в группу.

Скрипт делает то же самое еще для двух сфер из разных материалов.

Затем мы добавляем всю группу в сцену.

scene.add( group );

Затем мы визуализируем сцену и анимируем ее.

var render = function () {
				requestAnimationFrame( render );
				orbit.update();
				group.rotation.x += 0.03;
				group.rotation.y += 0.02;
				group.rotation.z += 0.01;
			   
				renderer.render( scene, camera );
			};

В каждом кадре группа элементов вращается.

Полный код здесь.

playgrd.com || facebook.com/playgrdstar || instagram.com/playgrdstar/