[WebGL] Cubos Rebotando en Espacio 3D

Desarrollando con Three.js tenemos muchas posibilidades en cuanto a la modificacion de los atributos de los objetos que dibujamos en el espacio 3D, atributos como la posicion (x,y,z) de los elementos o la rotacion (x,y,z) de los mismos.

Lo que hacemos en el siguiente ejemplo es ir modificando ciclicamente la posicion “x” de los primeros dos cubos , la posicion “z” del tercer cubo y la rotacion “z” de todoslos 3 cubos, logrando una animacion un tanto fantastica que ilustra la modificacion y cambio continuo de los atributos de los objectos creados en el plano 3D.

El Ejemplo lo Pueden ver funcionando Aqui.

El ejemplo esta provado en la ultima version del navegador Google Chrome por lo que no se realmente el resultado en otros navegadores.

[WebGL] Los Planetas con Three.js

Ya que estamos con iniciado a hacer desarrollos con Three.js, les presento este proyecto de el sol y los planetas que seria un bonito trabajo de astronomia o geografia o simplemente para lo que sea.

Actualmente los planetas estan fijos pero conforme vallamos avanzando en el desarrollo de Graficos 3D con Three.js le iremos agregando mas posibilidades de animacion al sistema …

El proyecto lo podremos ver Aqui.

[WebGL] Desarrollando un Cubo con Three.js

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();

Leer más

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

Quiero dar una introduccion a este articulo que lei en html5rocks.com para que empezemos a crear nuestros desarrollos de Graficos en 3D Con la ayuda de la libreria Three.js.

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.

Leer más