15 años en Internet
->DON'T click HERE <-.

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