three.js
Geometrías
Buscar..
Observaciones
Los ejemplos funcionan a partir de three.js R79 (revisión 79).
TRES.
THREE.BoxGeometry construye cajas como cuboides y cubos.
Cubitos
Los cubos creados con THREE.BoxGeometry usarían la misma longitud para todos los lados.
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();
Observe la función 'render'. Esto hace que el cubo 60 veces por segundo.
Código 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>
Cuboides
La línea var geometry = new THREE.BoxGeometry( 1, 1, 1 ); nos da un cubo. Para hacer un cuboide, simplemente cambie los parámetros, ellos definen la longitud, la altura y la profundidad del cubo respectivamente.
Ejemplo:
...
//Longer cuboid
var geometry = new THREE.BoxGeometry( 2, 1, 1 );
...
Más (demostrando que el cubo es tridimensional)
El cubo puede parecer solo un cuadrado. Para probar que es, sin lugar a dudas, tridimensional, agregue las siguientes líneas de código a la función 'render':
...
cube.rotation.x += 0.05;
cube.rotation.y += 0.05;
...
Y mira como el cubo feliz gira alrededor ... y redondo ... y redondo ...
Vistoso
No para el débil de corazón...
El color uniforme para todo el cubo es ... verde. Aburrido. Para hacer que cada cara tenga un color diferente, tenemos que excavar en las caras de la geometría.
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: El método de colorear las caras no es el mejor método, pero funciona bien (suficiente).
Notas
¿Dónde está el canvas en el cuerpo del documento HTML?
No es necesario añadir un canvas al cuerpo manualmente. Las siguientes tres lineas
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
cree el renderizador, su canvas y agregue el canvas al DOM.
TRES.Geometría de cilindros
TRES.CilindrosGeometría construyen cilindros.
Cilindro
Continuando con el ejemplo anterior, el código para crear el cuadro podría reemplazarse con el siguiente.
//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 );
Para construir desde cero, aquí está el código.
//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();
Más (demostrando que el cilindro es tridimensional)
El cilindro puede parecer justo ... bidimensional. Para probar que es, sin lugar a dudas, tridimensional, agregue las siguientes líneas de código a la función 'render':
...
cylinder.rotation.x += 0.05;
cylinder.rotation.z += 0.05;
...
Y el cilindro brillante y feliz giraría al azar, en medio de un fondo negro oscuro ...