Three.js
# Three.js

Three.js es una biblioteca liviana escrita en JavaScript para crear y mostrar gráficos animados por computadora en 3D en un navegador Web y puede ser utilizada en conjunción con el elemento canvas de HTML5, SVG o WebGL. El código fuente está alojado en un repositorio en GitHub.

Se ha popularizado como una de las más importantes para la creación de las animaciones en WebGL.

Bibliotecas de alto nivel tales como Three.js o GlgE, SceneJS, PhiloGL u otras, permiten al autor, crear complejas animaciones en 3D, listas para ser mostradas en el navegador. Sin el esfuerzo que se requeriría, para el caso de una aplicación independiente o tradicional, con el uso de plugins.

## Historia

Esta biblioteca fue creada y liberada en GitHub por el español Ricardo Cabello en abril de 2010, conocido por su seudónimo de Mr.doob. El código habría sido primeramente desarrollado en ActionScript y luego traducido al javaScript. Los dos puntos decisivos para la transferencia a JavaScript fueron no tener que compilar el código antes de cada carga y la independencia de plataforma. Las contribuciones de Cabello incluyen el diseño de la API, CanvasRenderer, SVGRenderer y ser responsable de la fusión del trabajo de los diversos colaboradores en el proyecto.

Con el advenimiento de WebGL, Paul Brunt añade el renderizador como un módulo en lugar de en el propio núcleo.

Branislav Ulicny se une en 2010, después de haber publicado una serie de demos WebGL en su propio sitio, con la intención de que las capacidades del renderizador WebGL en Three.js excedieran los CanvasRenderer y SVGRenderer. Sus principales contribuciones generalmente involucran materiales, shaders y post-procesamiento.

Poco después de la introducción de WebGL en Firefox 4 en marzo de 2011 Joshua Koo se une construyendo su primer demo de texto en 3D en septiembre de 2011. Sus contribuciones con frecuencia se refieren a la generación de la geometría.

Actualmente cuenta con la contribución de alrededor de 90 codificadores, entre ellos incluyendo "gero3", "WestLangley", Jerome Etienne, Erik Kitson y "AddictArts" y una comunidad creciente de programadores.

Three.js así como el propio estándar de WebGL están todavía prácticamente en sus días de nacimiento por lo que aún es realmente prematuro hablar de una verdadera historia que el tiempo irá construyendo paso a paso.

## Características

* Renderizadores: Canvas, SVG y WebGL.
* Efectos: anaglifo, bizco y la barrera de paralaje.
* Escenas: añadir y eliminar objetos en tiempo de ejecución; niebla.
* Cámaras: perspectiva y ortográfica; controladores: trackball, FPS, trayectoria y otras.
* Animación: armaduras, cinemática directa, cinemática inversa, morphing y fotogramas clave.
* Luces: ambiente, dirección, luz de puntos y espacios, sombras: emite y recibe.
* Materiales: Lambert, Phong, sombreado suave, texturas y otras.
* Shaders: el acceso a las capacidades del OpenGL Shading Language (GLSL): reflejos en la lente, pase profundo y una extensa biblioteca de post-procesamiento
* Objetos: mallas, partículas, sprites, líneas, cintas, huesos y otros.
* Geometría: plano, cubo, esfera, toroide, texto en 3D y otras; modificadores: torno, extrusión y tubo.
* Cargadores de datos: binario, imagen, JSON y escena.
* Utilidades: conjunto completo de funciones matemáticas en 3D, incluyendo tronco, matriz Quaternian, UVs y otras.
* Exportación e importación: utilidades para crear archivos compatibles con JSON Three.js desde: Blender, openCTM, FBX, Max, y OBJ.
* Soporte: La documentación de la API se encuentra en construcción, foro público y wiki en pleno funcionamiento.
* Ejemplos: Más de 150 archivos de códigos de ejemplo más las fuentes, modelos, texturas, sonidos y otros archivos soportados.
* Depuración: Stats.js, WebGL Inspector, Three.js Inspector.

Three.js funciona en todos los navegadores compatibles con WebGL. Consulte Implementación WebGL.

Three.js está disponible bajo la licencia MIT.

## ¿Cómo utilizarla?

La biblioteca Three.js es un archivo independiente de JavaScript. Puede ser incluido dentro de una página web a través de un enlace a una copia local o remota.

El siguiente código crea una escena y añade una cámara, un cubo y una luz a la escena. Crea además un renderizador WebGL y añade su viewport al elemento body del documento. Cuando ha cargado, el cubo rota en sus ejes X y Y. Lo cual se puede observar y experimentar en el siguiente: jsFiddle del Cubo rotando. Recordar utilizar un navegador compatible con WebGL.

## Documentación y aprendizaje

Actualmente está incompleta y la existente está muy poco elaborada, por lo que gran parte del aprendizaje es realizado a través de la lectura e interpretación directa del código, así como alguna bibliografía (relacionada más abajo) y tutoriales en internet. Sin embargo cualquiera con conocimiento puede colaborar, yendo directamente a la documentación en el sitio Threejs.org y presionando el botón "Edit this page" en la parte superior derecha de la ventana. (Ver imagen a la derecha).

## Creación de modelos

Al igual que en WebGL, resultaría muy complejo desarrollar escenas con modelos sofisticados a sólo código, por lo que THREE.js tiene contemplado la utilización de modelos de softwares de creación de contenido y para ello ha desarrollado un plugin para exportarlos desde Blender, Maya o Max a formato JSON que pueden ser importados entonces directamente al entorno THREE.js. Estos plugin pueden ser obtenidos gratuitamente en GitHub.

También existe la posibilidad de crear los modelos en varios formatos como .obj, Collada (.dae), UTF8, FBX, .3ds y otros y luego convertirlos al formato JSON utilizando scripts desarrollados en Python, que se encuentran disponibles en el repositorio de Three.js.

Además en la versión actual r140, Three.js también cuenta con los siguientes cargadores de modelos: ColladaLoader.js, UTF8Loader.js, BinaryLoader.js, SceneLoader.js, que permiten la carga directa sin conversión a JSON.

## Selección de objetos

Debido a que el WebGL es de bastante bajo nivel para interactuar con el GPU eficientemente, este no cuenta con una vía directa de selección de objetos en la escena, como el DOM en HTML. Para ello se ha desarrollado un método llamado "Emisión de rayos" (Ray casting en inglés), el cual se basa en la desproyección de rayos desde la pantalla 2D (desde la posición del mouse por ejemplo) de la computadora hacia el mundo virtual en 3D. Todos aquellos objetos que sean impactados por el rayo pudieran ser seleccionados y manipulados, de ellos teniendo mayor prioridad generalmente el primero que es impactado.

La emisión de rayos para realizar interacción (selección) está implementada en Three.js, lo cual requerirá sólo unas líneas de programación.

## Ejes

Debido a la no estandarización del concepto y la variabilidad entre diferentes programas y lenguajes de programación 3D, la dirección de los ejes x, y, z en three.js es causa común de confusión.

En este caso (tomando como referencia un monitor de computadora de escritorio en posición vertical) el eje X crece positivamente hacia la derecha del usuario mirando la pantalla, el eje Y crece positivamente hacia arriba y el eje Z crece positivamente hacia afuera de la pantalla (hacia el usuario).

