Ejemplo de cubo en 3D con textura utilizando Three.js (javascript)

Three.js es una librería opensource de Javascript (con licencia MIT) que permite dibujar contenido tridimensional gracias a las capacitaciones que permiten HTML5 y los navegadores web actuales. A modo de prueba de concepto he modificado uno de los ejemplos de uso reorganizando el código y texturizando el cubo.

Ejemplo con render WebGL:

http://dangoyhamster.webcindario.com/cube_3d/index.html

Ejemplo con render Canvas:

http://dangoyhamster.webcindario.com/cube_3d/canvas.html

A continuación os voy a enseñar unas muestras del código empleado (aquí lo tenéis completo para WebGL y Canvas, aunque ambos ejemplos sólo difieren en una única línea), para que podáis comprobar lo sencillo que resulta:

- Definimos un escenario 3D.
- Indicamos que el renderizado es WebGLRenderer.
- Aplicamos un tamaño de dibujado al de la ventana del navegador web.
- Indicamos que el ID del div del renderizado se llamará "surface".

- Creamos una nueva cámara, para saber qué hay que visualizar, con un ratio (4:3, 16:9...) que dependa del tamaño de la ventana.
- Colocamos la cámara en la posición indicada.

- Cargamos una textura a partir de un fichero PNG.
- Creamos un cubo geométrico y le aplicamos la textura en las seis caras.
- Colocamos el cubo en el escenario.

- Creamos un rectangulo de 200x200 con color 0x202020 y lo ponemos al pie del cubo.

- Añadimos el contenedor que contiene el render en la web.

- Indicamos que debemos de vincular diferentes manejadores (que definimos en el fichero javascript) a determinados eventos.