[WebGL] Introduccion a Three.js – Javascript 3D

Usaremos Three.js para crear desarrollos en 3D en nuestro navegador de la mano de Javascript. Con esto vamos a crear camaras, objetos luces , materiales y mas , y tendremos la opcion de renderizar , lo caul significa que podremos elegir entre HTML5 Canvas , WebGL o SVG.Para crear cosas asombrosas con Three.js vamos a necesitar gastar mucho tiempo en leer ejemplos y hacerles ingenieria inversa.

http://www.html5canvastutorials.com/libraries/Three.js

Como Podemos Notar en las letras en negrita de el codigo de arriba : Buenos A partir de Aqui empezamos con es script de contruccion de el elemento 3d que vamos a desarrolla como ejemplo :

Estas son las variables que representaran el largo y ancho del renderizador y el aspecto Que es necesario para la camara

Ancho = 800;
Alto = 600;
Aspecto = Ancho / Alto;

Seleccionamos el contenedor donde vamos a insertar el resultado obtenido

contenedor = document.getElementById('container');

Iniciamos nuestro renderizador y posteriormente le asignamos sus medidas El renderizador es quien dibujara nuestros elementos en el lienzo de HTML

var renderer = new THREE.WebGLRenderer();
renderer.setSize(Ancho,Alto);

Creamos la camara y le ponemos los valores de inicializacion le pasamos como parametros Los parametros mas importantes de PerspectiveCamera que son los primeros 2 , El primero El angulo de la camara y el segundo el aspecto, la relacion entre largo y ancho …Los otros valores pueden ser los mismos para otros desarrollos

 var camera = new THREE.PerspectiveCamera(45, Aspecto, 0.1, 10000);

Asignamos valores al enfoque de la camara dado que los por default son 0,0,0

camera.position.y = -450;
camera.position.z = 400;
camera.rotation.x = 45 * (Math.PI / 180);

Iniciamos la Escena esta sera la que contendra todos los elementos relacionados de Nuestro desarrollo

var scene = new THREE.Scene();

Agregamos el renderizador al contenedor… es decir a la pagina WEB

contenedor.appendChild(renderer.domElement);

Ya tenemos listo la escena y estamos listos para crear nuestro objeto , lo que haremos sera una esfera roja.Para ello Usamos SphereGeometry la cual lleva como parametros el radio , el numero de segmentos y el numero de anillos.Por ello las variables radius , segments y rings, cuando hablamos de THREE.MeshLambertMaterial nos referimos al material del que estara hecho nuestro objeto, por ahora usaremos este pero en posteriores post hablaremos mas hacerca de esto.

La linea scene.add(sphere) agrega nuestra esfera a la escena para su posterior dibujo…

var radius = 150, segments = 50, rings = 50;
var sphereMaterial = new THREE.MeshLambertMaterial({ color: 0xCC0000 });
var sphere = new THREE.Mesh(new THREE.SphereGeometry(radius,segments,
 rings),
 sphereMaterial);
scene.add(sphere);

Ahora Vamos A darle iluminacion al ambiente para ello usaremos un punto de luz… de color blanco , es decir new THREE.PointLight( 0xFFFFFF ) al cual le damos sus cordenadas x,y,z es decir el lugar donde estara la luz en nuestro plano 3D. Igualmente la linea scene.add(pointLight) significa la agregacion de el punto de luz a la escena.

var pointLight = new THREE.PointLight( 0xFFFFFF );

pointLight.position.x = 200;
pointLight.position.y = -100;
pointLight.position.z = 200;
scene.add(pointLight);

Ahora ya tenemos todo listo ahora vamos a dibujar iniciar el renderizado y por fin el objeto plasmado en la pagina.

renderer.render(scene, camera);