three.js
geometrie
Ricerca…
Osservazioni
Gli esempi funzionano a partire da three.js R79 (revisione 79).
THREE.BoxGeometry
THREE.BoxGeometry costruisce scatole come cuboidi e cubi.
Cubi
I cubi creati utilizzando THREE.BoxGeometry utilizzerebbero la stessa lunghezza per tutti i lati.
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();
Si noti la funzione 'rendering'. Questo rende il cubo 60 volte al secondo.
Codice completo (con 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>
parallelepipedi
La linea var geometry = new THREE.BoxGeometry( 1, 1, 1 ); ci dà un cubo Per creare un parallelepipedo, basta cambiare i parametri: definiscono rispettivamente la lunghezza, l'altezza e la profondità del cubo.
Esempio:
...
//Longer cuboid
var geometry = new THREE.BoxGeometry( 2, 1, 1 );
...
Altro (dimostrando che il cubo è tridimensionale)
Il cubo potrebbe sembrare solo un quadrato. Per dimostrare che è, senza dubbio, tridimensionale, aggiungere le seguenti righe di codice alla funzione 'render':
...
cube.rotation.x += 0.05;
cube.rotation.y += 0.05;
...
E guarda mentre l'allegro cubo gira intorno ... e intorno ... e intorno ...
Colorato
Non per i deboli di cuore...
Il colore uniforme per l'intero cubo è ... verde. Noioso. Per rendere ogni faccia di un colore diverso, dobbiamo scavare nei volti della geometria.
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);
NOTA: il metodo di colorare i volti non è il metodo migliore, ma funziona bene (abbastanza).
Gli appunti
Dov'è la canvas nel corpo del documento HTML?
Non è necessario aggiungere manualmente una canvas al corpo. Le seguenti tre linee
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
crea il renderer, la sua canvas e aggiungi la canvas al DOM.
THREE.CylinderGeometry
Cilindri di costruzione THREE.CylinderGeometry.
Cilindro
Continuando dall'esempio precedente, il codice per creare la scatola potrebbe essere sostituito con il seguente.
//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 );
Per costruire da zero, ecco il codice.
//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();
Altro (dimostrando che il cilindro è tridimensionale)
Il cilindro può sembrare solo ... bidimensionale. Per dimostrare che è, senza dubbio, tridimensionale, aggiungere le seguenti righe di codice alla funzione 'render':
...
cylinder.rotation.x += 0.05;
cylinder.rotation.z += 0.05;
...
E il felice cilindro luminoso girerebbe a caso, in uno sfondo nero e scuro ...