Más de 11 años en Internet
->No hagas click en esta frase.

26 septiembre, 2013

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.

No hay comentarios:

Publicar un comentario en la entrada