/ three.js

Primeros pasos con ThreeJS

ThreeJS es una librería escrita en JavaScript y que gracias a los nuevos elementos de HTML5 como el canvas, SVG y WebGL ayuda a crear y mostrar gráficos en 3D. Con el paso del tiempo he visto librerías o Engines como GlgE, SceneJS, PhiloGL pero me ha gustado mucho Three porque es liviana, tiene buena documentación y sobre todo da mucha libertad o para mi así lo parece.

Para poder usar esta librería basta con bajarla, ponerla como si fuese otro archivo y sobre todo tener los 3 elementos básicos del mundo 3D, un escenario, una cámara y el procesamiento de estos 2 para que puedan funcionar, es decir, el render.

Así que básicamente para poder utilizar esta librería se necesita esos 3 elementos, lo cual el Three cuenta con 3 métodos.

[crayon theme=”monokai” toolbar=”false” lang=”js”]
var escena, camara, render;

function ini(){
escena = new THREE.Scene();
camara = new THREE.PerspectiveCamera();
render = new THREE.WebGLRenderer();
}
[/crayon]

Estos son los 3 elementos principales para empezar a trabajar con el Three, aun que si solamente hicieramos eso nos mostraria errores, por que el metodo PerspectiveCamera hay que pasarle unos parametros, mas aparte lo mas importante un modelo, aun que fuese una caja pero seria necesario para visualziar algo.

Asi que haremos algo interesante, hagamos un simple ejercicio.

[crayon theme=”monokai” toolbar=”false” lang=”js”]
(function(win, doc){
var escena, camara, render, obj;
var ejemplo01 = {
ini : function(){
obj = doc.getElementById(‘ejemplo01’);

escena = new THREE.Scene();
camara = new THREE.PerspectiveCamera(75, 750 / 480, 1, 10000);
render = new THREE.WebGLRenderer();

camara.position.z = 1000;
render.setSize(750, 480);

obj.appendChild(render.domElement);
},
animacion : function(){
requestAnimationFrame(this.animacion.bind(this));

render.render(escena, camara);
}
};

doc.addEventListener(‘DOMContentLoaded’, function(){
ejemplo01.ini();
ejemplo01.animacion();
}, false);
})(window, document);
[/crayon]

Como pueden ver, esta los elementos necesarios para empezar a trabajar con Three, pero no veremos nada, asi que vamos agregar un cubo, pero antes de hacerlo debo aclarar que en Three cada modelo debe contener 3 elementos e igual derivados del OBJ THREE, esto es una geometria, un material el cual se usara para la geometria y despues la cosa que los une en este caso el MESH.

Ahora si solamente me apego al codigo anterior y lo modificamos quedaria asi.

[crayon theme=”monokai” toolbar=”false” lang=”js” mark=”3,8-11,17-21,31-33″]
(function(win, doc){
var escena, camara, render, obj;
var box, material, mesh;

var ejemplo01 = {
ini : function(){
obj = doc.getElementById(‘ejemplo01’);
var param = {
color : 0xFF0000,
wireframe : true
};

escena = new THREE.Scene();
camara = new THREE.PerspectiveCamera(75, 750 / 480, 1, 10000);
render = new THREE.WebGLRenderer();

box = new THREE.BoxGeometry(100, 100, 100);
material = new THREE.MeshBasicMaterial(param);
mesh = new THREE.Mesh(box, material);

escena.add(mesh);

camara.position.z = 1000;
render.setSize(750, 480);

obj.appendChild(render.domElement);
},
animacion : function(){
requestAnimationFrame(this.animacion.bind(this));

// Para poder verla le agregamos rotacion.
mesh.rotation.x += 0.01;
mesh.rotation.y += 0.02;

render.render(escena, camara);
}
};

doc.addEventListener(‘DOMContentLoaded’, function(){
ejemplo01.ini();
ejemplo01.animacion();
}, false);
})(window, document);
[/crayon]

ilich

Programador Mexicano con 14 años de experiencia, ha incursionado en diferentes áreas ampliando su experiencia. Aprendí programación por que quería hacer mi propio video juego aun que he toca

Read More