three.js
Geometria
Szukaj…
Uwagi
Przykłady działają od wersji Three.js R79 (wersja 79).
TRZY.BoksGeometria
THREE.BoxGeometry buduje pola takie jak prostopadłościany i kostki.
Kostki
Kostki utworzone za pomocą THREE.BoxGeometry miałyby tę samą długość dla wszystkich stron.
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();
Zwróć uwagę na funkcję „renderowania”. To renderuje sześcian 60 razy na sekundę.
Pełny kod (z 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>
Prostopadłościany
var geometry = new THREE.BoxGeometry( 1, 1, 1 ); linii var geometry = new THREE.BoxGeometry( 1, 1, 1 ); daje nam kostkę. Aby utworzyć prostopadłościan, wystarczy zmienić parametry - określają odpowiednio długość, wysokość i głębokość sześcianu.
Przykład:
...
//Longer cuboid
var geometry = new THREE.BoxGeometry( 2, 1, 1 );
...
Więcej (dowód, że sześcian jest trójwymiarowy)
Sześcian może wydawać się tylko kwadratem. Aby udowodnić, że jest bez wątpienia trójwymiarowy, dodaj następujące wiersze kodu do funkcji „renderowania”:
...
cube.rotation.x += 0.05;
cube.rotation.y += 0.05;
...
I patrz, jak wesoła kostka obraca się wokół ... i wokół ... i wokół ...
Kolorowy
Nie dla ludzi o słabych nerwach...
Jednolity kolor dla całej kostki to ... zielony. Nudny. Aby każda twarz miała inny kolor, musimy przekopać się do powierzchni geometrii.
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);
UWAGA: Metoda barwienia twarzy nie jest najlepszą metodą, ale działa dobrze (wystarczająco).
Notatki
Gdzie jest canvas w treści dokumentu HTML?
Nie ma potrzeby ręcznego dodawania canvas do ciała. Kolejne trzy linie
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
utwórz renderer, jego canvas i dodaj canvas do DOM.
TRZY Cylinder geometrii
TRZY Cylinder buduje cylindry.
Cylinder
Kontynuując poprzedni przykład, kod do utworzenia skrzynki można zastąpić poniższym.
//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 );
Aby zbudować od zera, oto kod.
//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();
Więcej (dowód, że cylinder jest trójwymiarowy)
Cylinder może wydawać się po prostu ... dwuwymiarowy. Aby udowodnić, że jest bez wątpienia trójwymiarowy, dodaj następujące wiersze kodu do funkcji „renderowania”:
...
cylinder.rotation.x += 0.05;
cylinder.rotation.z += 0.05;
...
A szczęśliwy, jasny cylinder obracałby się losowo na ciemnym, czarnym tle ...