Inicio > canvas, HTML5, javascript, Varios > Rápida Introducción a threeJS

Rápida Introducción a threeJS

threeJS es una libreria javascript creada por mrdoob con la que se puede  crear contenido 3D directo en el navegador, sin necesidad de un plugin adicional.

Descarga.

threeJS está en  github, para descargarlo hay que visitar esta dirección http://github.com/mrdoob/three.js

Antes de comenzar.

Para ver los ejemplos de este post, es necesario tener un navegador compatible con canvas, y tomar en cuenta que algunos de estos pueden tardar  tiempo en cargar.

Conceptos básicos de 3d.

Para comenzar vamos a definir algunos conceptos básicos para la programación 3d:

Escena.-Es la composición entera de objetos 3d en un espacio 3d, es como el stage en flash con 3 ejes, cualquier objeto que se necesite ver en la escena debe ser agregado, si no son agregados, no se ven.

Sistema de coordenadas.

Código para crear y agregar elementos a una escena 3d.
escena = new THREE.Scene();
escena.addObject( objeto3D);

Camara.- La camara define el punto de visión del cual se esta viendo la escena, la camara no es un objeto visible por lo tanto no se necesita agregar a la escena.

Código para  crear una cámara
camara = new THREE.Camera( fov, aspect, near, far );

Viewport.- Es como el lente de la camara, muestra la salida de lo que la camara ve, es la ventana de una escena 3d. Funciona como una ventana del mundo real, haciendola grande no afecta como se ve el mundo de fuera, pero si afecta que tanto podemos ver.

Objeto 3D.- Es una forma en un espacio 3d, tiene 3 ejes y lo podemos colocar en cualquier parte del escenario 3d.

Con threeJS vienen algunos objetos como el plano, el cubo, el cilindro, la esphera

Material.- El material es la textura que es impresa en un objeto, si un objeto no tiene un material aplicado entonces será invisible.

Con threeJS podemos aplicar colores, imagenes  ó videos como materiales.

Motor de render.- Es como la película de la camara, cuando se ejecuta el render, mostrará información de la escena grabada por la camara al viewport, cuando se para el render el viewport solo muestra la última imagen captada.

Con threeJS podemos renderizar usando <canvas>, <svg> y WebGL, el código para crear un render y renderizar una escena es:
renderer = new THREE.CanvasRenderer(); // se crea el render de tipo canvas
renderer.setSize( 500, 500); // se especifica su tamaño
document.body.appendChild( renderer.domElement );// se agrega al documento
renderer.render( escena, camara );//Se renderea la escena con la camara asignada.

Composición de objetos 3d.- Los objetos 3d están compuestos de  Vertices y triangulos.

Vertices (Vertex, verts).- Un vertice es un punto 3d en el espacio y tiene 3 puntos cardinales (X,Y,Z) el orden siempre es ese.

Triángulos.- Los triangulos son formados por vertices, los triangulos también son conocidos como caras (faces) o caras de triangulo (triangle faces). Cada triangulo es compuesto de 3 vertices, los vértices definen la forma del triangulo y como tienen coordenadas XYZ es posible hacer la cara del triangulo en cualquier dirección.

Triangulos y Vertices

El objeto geometry es el que tiene el arreglo de todos los vertices de un objeto 3d.
geometry.vertices

Proceso general para creación de escenarios 3d.

La secuencia de procesos que suceden al mostrar algo en 3d es la siguiente:

Inizialización.- Es el proceso donde se crea la escena, la camara, los objetos 3d con sus materiales y  el tipo de render.

Proyección.- Convierte las coordenadas 3d en 2d para la pantalla. La proyección solo es en los vertices no con los triangulos o los materiales.

Renderizado.- Es el proceso de dibujar una imagen que se verá en la pantalla combinando los datos de la proyección 2d con la información acerca del material que esta siendo utilizado. Es la tarea mas intensiva del procesador.

Primer ejemplo creación de tres planos.

Este ejemplo muestra como crear planos en una escena 3d. Una vez cargado el ejemplo, se puede mover la cámara con los botones,  para ver la escena  de diferentes ángulos.
Para ver la explicación de la programación,  ver el código fuente del ejemplo.

Ejercicio 1, Creación de planos en 3 ejes

http://www.juan-anzaldo.com/2010/threeJS/1_ejercicio_Planos.html

Segundo Ejemplo creación de un Objeto 3d (cubo)

Este ejemplo muestra como crear un objeto 3d (cubo), además muestra  como asignar colores a cada una de las caras del cubo, una vez cargado el ejemplo, se puede rotar el cubo con los botones, para verlo de diferentes ángulos.
Para ver la explicación,  ver el código fuente del ejemplo.

Ejercicio 2 creación de un cubohttp://www.juan-anzaldo.com/2010/threeJS/2_ejercicio_Cubos.html

Tercer ejemplo esfera de esferas.

Este ejemplo muestra como crear una esfera de esferas, utilizando el arreglo de vertices de la esfera para posicionar esferas mas pequeñas en cada uno de los vertices, una vez cargado el ejemplo, se puede mover la camara con los botones, para ver la escena de diferentes ángulos

Para ver la explicación,  ver el código fuente del ejemplo.

Creación de esfera de esferas

http://www.juan-anzaldo.com/2010/threeJS/3_ejercicio_Esfera_de_esferas.html

Materiales.

Un material es como la textura de un objeto, sin material los objetos son invisibles. La diferencia entre material y textura es que la textura es la fuente (la imagen) que se va a usar por el material, el material es usado para definir propiedades que afectan como es usada la textura en el objeto.

Los archivos de los materiales se encuentran en la carpeta “materials” y constan de LineColorMaterial, MeshBitmapUVMappingMaterial, MeshColorFillMaterial, MeshColorStrokeMaterial, MeshFaceColorFillMaterial, MeshFaceColorStrokeMaterial, ParticleBirmapMaterial, ParticleCircleMaterial, ParticleDomMaterial.

Hay de varios tipos como de malla, de partícula, de imagen, de elementos dom.

Cuarto Ejemplo Aplicación de una imagen como material a una esfera.

Este ejemplo muestra como crear una esfera y aplicar una imagen como material, utilizando MeshBitmapUVMappingMaterial y usando canvas. Una vez cargado el ejemplo, se puede rotar la esfera con los botones.

Para ver la explicación,  ver el código fuente del ejemplo.

Aplicar materiales a una esfera

http://www.juan-anzaldo.com/2010/threeJS/4_ejercicioMateriales.html

Camara.

Una camara representa un punto virtual del cual nosotros vemos una escena y los objetos presentes en esta. En la carpeta cameras se encuentra el archivo camara.js. Una camara se puede rotar y mover en X,Y y Z. Aunque no tiene una representasión visual en la pantalla.

Parámetros para instancear una cámara..

Field of View (FoV), aspect, near, far.

Field of view.- Campo vertical de visión. Se expresa en ángulos.

Aspect.- La proporción entre el ancho y el alto.

Near.- Es la distancia del ojo al  plano cercano, qué es un plano imaginario perpendicular a la camara, cuando los objetos se acercan mas que el plano cercano, desaparecen.

Far.- Es la distancia del ojo al plano lejano, cuando un objeto pasa más lejos que el plano lejano, el objeto desaparece.

CamarasAnimación.

La animación es la ilusión de movimiento, threeJS permite al usuario interactuar libremente con objetos en la escena. Básicamente existen 3 tipos de objetos que podemos mover, Objetos 3d que tienen representación visual en la escena, Camaras  y Luces.

Para animar objetos tenemos estas tres propiedades del objeto Object3D

  • Posición ( position.x, position.y, position.z )
  • Rotación ( rotation.x, rotation.y, rotation.z )
  • Tamaño (scale.x, scale.y, scale.z )

La velocidad de animación con javascript depende  del tiempo, se anima usando un temporizador como el setInterval(), la animación corre a una velocidad constante y es relativamente independiente a la capacidad de cómputo del usuario.

Quinto ejemplo animación de camara.

Este ejemplo muestra como crear un temporizador  y aplicar una animación en los ejes Y y Z de la camara, una vez cargado el ejemplo, se puede tocar la animación presionando el botón. Para ver la explicación del ejemplo,  ver el código fuente del ejemplo.Animación de camara

http://www.juan-anzaldo.com/2010/threeJS/5_ejercicio_Camara.html

Estos son solo los primeros pasos para trabajar con esta librería, en la dirección de github o en el sitio de mrdoob se pueden ver ejemplos mas avanzados de lo que se puede lograr con esta librería.

Todos los ejercicios se pueden descargar de http://www.juan-anzaldo.com/2010/threeJS/ejemplosThreeJS.zip

  1. Aún no hay comentarios.
  1. No trackbacks yet.

Responder

Por favor, inicia sesión con uno de estos métodos para publicar tu comentario:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: