En una entrada anterior hablamos de lo que era Three.js , continuaremos nuestro viaje por la senda del desarrollo 3D esta vez desarrollando un cubo, lo haremos con el poder que nos presta Three.js la libreria esta aqui lista para agregar al proyecto.
Hay muchos conceptos y detalles 3D que aun vamos a ignorar en este articulo, los guardaremos para despues ya que tengamos un poco mas de practica en el desarrollo de objetos basicos con Three.js.
Bueno lo primero que haremos sera tomar nuestro contenedor y crear nuestra escena, en el articulo anterior ya hablamos de ellos, pero esperamos en un articulo futuro hablar de esto con mucho mas detalle.
container = document.getElementById( 'container' ); scene = new THREE.Scene();
Ahora vamos a iniciar nuestra camara , vamos a dar las cordenadas de inicio de la camara y vamos a agregar nuestra camara a la escena. la medida que usaremos sera de 500px x 500px.
camera = new THREE.PerspectiveCamera( 70, 500 / 500, 1, 1000 ); camera.position.x = 0; camera.position.y = 0; camera.position.z = 600; scene.add( camera );
Para hacer un cubo debemos notar que un cubo tiene 6 lados, por tanto le podemos poner un color a cada lado y debemos darle un tipo de material a los lados del cubo por ahora usaremos un color aleatorio y un material basico , Creamos un array de materiales para despues agregarselos al contrucctor del Cubo :
var materials = [];
for ( var i = 0; i < 6; i ++ ) {
materials.push( new THREE.MeshBasicMaterial( { color: Math.random() * 0xfffff0 } ) );
}
Ahora toca construir el cubo , darle sus medidas en este caso cada lado del cubo sera de 200px cada uno, le agregamos sus materiales , asignamos la rotacion inicial del cubo ya que por default esta en 0,0,0 (x,y,z) y agregarlo a la escena :
cube = new THREE.Mesh( new THREE.CubeGeometry( 200, 200, 200, 1, 1, 1, materials ), new THREE.MeshFaceMaterial() ); cube.rotation.y = 1; cube.rotation.x = 0.25; scene.add( cube );
Ahora vamos a iniciar nuestro motor de render (renderizador), le aplicamos sus medidas de 500×500 , lo agregamos al contenedor con el atributo appendChild del contenedor e iniciamos el dibujado de el objeto.
renderer = new THREE.CanvasRenderer(); renderer.setSize( 500, 500); container.appendChild( renderer.domElement ); renderer.render(scene,camera);
Con esto hemos terminado nuestro cubo y debemos tener un resultado como el de la imagen superior … el ejemplo funcionando esta aqui para major informacion del ejemplo consulte su codigo fuente … que en este cado nos resulto muy sencillo.
