Работа с 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/