three.js
Geometries
Поиск…
замечания
Примеры работают с трёх.js R79 (пересмотр 79).
THREE.BoxGeometry
THREE.BoxGeometry строит коробки, такие как кубоиды и кубики.
Кубики
Кубы, созданные с использованием THREE.BoxGeometry, будут использовать ту же длину для всех сторон.
JavaScript
//Creates scene and camera
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
//Creates renderer and adds it to the DOM
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
//The Box!
//BoxGeometry (makes a geometry)
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
//Material to apply to the cube (green)
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
//Applies material to BoxGeometry
var cube = new THREE.Mesh( geometry, material );
//Adds cube to the scene
scene.add( cube );
//Sets camera's distance away from cube (using this explanation only for simplicity's sake - in reality this actually sets the 'depth' of the camera's position)
camera.position.z = 5;
//Rendering
function render() {
requestAnimationFrame( render );
renderer.render( scene, camera );
}
render();
Обратите внимание на функцию «рендеринга». Это дает куб 60 раз в секунду.
Полный код (с HTML)
<!DOCTYPE html>
<html>
<head>
<title>THREE.BoxGeometry</title>
<script src="http://threejs.org/build/three.js"></script>
</head>
<body>
<script>
//Above JavaScript goes here
</script>
</body>
</html>
кубоиды
Строка var geometry = new THREE.BoxGeometry( 1, 1, 1 ); дает нам куб. Чтобы создать кубоид, просто измените параметры - они определяют длину, высоту и глубину куба соответственно.
Пример:
...
//Longer cuboid
var geometry = new THREE.BoxGeometry( 2, 1, 1 );
...
Подробнее (доказательство того, что куб трехмерен)
Куб может показаться просто квадратом. Чтобы доказать, что он, без сомнения, трехмерный, добавляет следующие строки кода в функцию «render»:
...
cube.rotation.x += 0.05;
cube.rotation.y += 0.05;
...
И наблюдайте, как веселый куб вращается вокруг ... и круглый ... и круглый ...
красочный
Не для слабонервных...
Единый цвет для всего куба ... зеленый. Скучный. Чтобы каждое лицо было другого цвета, мы должны копать на лица геометрии.
var geometry = new THREE.BoxGeometry(3, 3, 3, 1, 1, 1);
/*Right of spawn face*/
geometry.faces[0].color = new THREE.Color(0xd9d9d9);
geometry.faces[1].color = new THREE.Color(0xd9d9d9);
/*Left of spawn face*/
geometry.faces[2].color = new THREE.Color(0x2196f3);
geometry.faces[3].color = new THREE.Color(0x2196f3);
/*Above spawn face*/
geometry.faces[4].color = new THREE.Color(0xffffff);
geometry.faces[5].color = new THREE.Color(0xffffff);
/*Below spawn face*/
geometry.faces[6].color = new THREE.Color(1, 0, 0);
geometry.faces[7].color = new THREE.Color(1, 0, 0);
/*Spawn face*/
geometry.faces[8].color = new THREE.Color(0, 1, 0);
geometry.faces[9].color = new THREE.Color(0, 1, 0);
/*Opposite spawn face*/
geometry.faces[10].color = new THREE.Color(0, 0, 1);
geometry.faces[11].color = new THREE.Color(0, 0, 1);
var material = new THREE.MeshBasicMaterial( {color: 0xffffff, vertexColors: THREE.FaceColors} );
var cube = new THREE.Mesh(geometry, material);
ПРИМЕЧАНИЕ. Метод окраски граней не лучший метод, но он работает хорошо (достаточно).
Заметки
Где canvas в теле документа HTML?
Нет необходимости добавлять canvas к телу вручную. Следующие три строки
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
создайте рендер, его canvas и добавьте canvas в DOM.
THREE.CylinderGeometry
THREE.CylinderGeometry строят цилиндры.
цилиндр
Продолжая предыдущий пример, код для создания окна можно заменить на приведенный ниже.
//Makes a new cylinder with
// - a circle of radius 5 on top (1st parameter)
// - a circle of radius 5 on the bottom (2nd parameter)
// - a height of 20 (3rd parameter)
// - 32 segments around its circumference (4th parameter)
var geometry = new THREE.CylinderGeometry( 5, 5, 20, 32 );
//Yellow
var material = new THREE.MeshBasicMaterial( {color: 0xffff00} );
var cylinder = new THREE.Mesh( geometry, material );
scene.add( cylinder );
Чтобы построить с нуля, вот код.
//Creates scene and camera
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
//Creates renderer and adds it to the DOM
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
//The Cylinder!
var geometry = new THREE.CylinderGeometry( 5, 5, 20, 32 );
//Yellow
var material = new THREE.MeshBasicMaterial( {color: 0xffff00} );
var cylinder = new THREE.Mesh( geometry, material );
scene.add( cylinder );
//Sets camera's distance away from cube (using this explanation only for simplicity's sake - in reality this actually sets the 'depth' of the camera's position)
camera.position.z = 30;
//Rendering
function render() {
requestAnimationFrame( render );
renderer.render( scene, camera );
}
render();
Подробнее (доказательство того, что цилиндр трехмерен)
Цилиндр может казаться просто ... двумерным. Чтобы доказать, что он, без сомнения, трехмерный, добавляет следующие строки кода в функцию «render»:
...
cylinder.rotation.x += 0.05;
cylinder.rotation.z += 0.05;
...
И счастливый яркий цилиндр вращается беспорядочно, среди темного, черного фона ...