Three.js

Three.js
	Ejemplo Three.js
Información general
Tipo de programa	Motor Gráfico 3D para la web
Autor	Ricardo Cabello (Mr.doob)
Desarrollador	Three.js Autores
Lanzamiento inicial	3 de julio de 2013
Licencia	MIT
Estado actual	Activo
Información técnica
Programado en	JavaScript
Versiones
Última versión estable	r81 (info) ( 15 de septiembre de 2016)
Enlaces
	Sitio web oficial Repositorio de código
	[editar datos en Wikidata]

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.^[2]

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 editar

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 editar

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? editar

Desarrollado en three.js

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.

<script src="js/three.js"></script>

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.

<!DOCTYPE html>
<html>
<head>
   <title>Iniciando con Three.js</title>
   <style>canvas { width: 100%; height: 100% }</style>
</head>
<body>
   <script src="three.js"></script>                <!--Incluyendo la biblioteca-->
   <script>
		
   //Escena
   var scene = new THREE.Scene();                  // Creando el objeto escena, donde se añadirán los demás.
			
   //Cámara
   var camera = new THREE.PerspectiveCamera(
	75,                                        // Ángulo de "grabación" de abajo hacia arriba en grados.
	window.innerWidth/window.innerHeight,      // Relación de aspecto de la ventana de la cámara(Ejemplo: 16:9).
	0.1,                                       // Plano de recorte cercano (más cerca no se renderiza).
	1000                                       // Plano de recorte lejano  (más lejos no se renderiza).
	);
			
   camera.position.z = 5;  //Enviar la cámara hacia atrás para poder ver la geometría. Por defecto es z = 0.
			
   //Renderizador
   var renderer = new THREE.WebGLRenderer({antialias:true}); // Utilizar el renderizador WebGL.
   renderer.setSize(window.innerWidth, window.innerHeight);  // Renderizador del tamaño de la ventana.
   document.body.appendChild(renderer.domElement);           // Añadir el renderizador al elemento DOM body.

  //Geometría
   var geometry = new THREE.CubeGeometry(1,1,1);   // Crear geometría cúbica con dimensiones(x, y, z).
   var material = new THREE.MeshLambertMaterial({color: 0xFF0000}); // Crear el material para la
			                                            // geometría y darle color rojo.
   var cube = new THREE.Mesh(geometry, material);  // Crear una malla que agrupará la geometría
			                           // y el material creados anteriormente.
   scene.add(cube);                                // Añadir la malla al objeto escena.
			
   //Luz (requerida para el material MeshLambertMaterial)
   var light = new THREE.PointLight( 0xFFFF00 ); //  Luz proveniente de un punto en el espacio, 
		                                 //  semejante al sol.
   light.position.set( -10, 5, 10 );             //  Localización de la luz. (x, y, z).
   scene.add( light );                           //  Añadir la luz al objeto escena.
			
   // Función para renderizar 
   var render = function () {
	requestAnimationFrame(render);           // la renderización ocurrirá continuamente si la escena está visible.

	cube.rotation.x += 0.03;                 //Velocidad de rotación en el eje x
	cube.rotation.y += 0.03;                 //Velocidad de rotación en el eje y

	renderer.render(scene, camera);          //Renderizar escena cada vez que se ejecuta la función "render()".
   };

   render();

   </script>
</body>
</html>

Documentación y aprendizaje editar

Colaborar para mejorar la documentación de Three.js

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 editar

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.^[3]

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 editar

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.^[4]

Ejes editar

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).

Véase también editar

Referencias editar

↑ «Three.js/license». github.com/mrdoob.
↑ Luz Caballero (13 de octubre de 2011). «An introduction to WebGL» (en inglés). Consultado el 9 de junio de 2013.
↑ «Three.js Blender Import/Export» (en inglés). Consultado el 22 de junio de 2013.
↑ «Object picking» (en inglés). Consultado el 22 de junio de 2013. Texto «Soledad Penadés» ignorado (ayuda)

Bibliografía editar

Libros acerca de la programación en Three.js:

Parisi, Tony (2012). Webgl Up and Running. Sebastopol: Oreilly & Associates Inc. ISBN 9781449323578.
Seidelin, Jacob (2012). HTML5 games: creating fun with HTML5, CSS3, and WebGL. Chichester, West Sussex, U.K: John Wiley & Sons. pp. 412-414. ISBN 1119975085. - "Three.js can make game development easier by taking care of low-level details"
Williams, James (2012). Learning HTML5 game programming: a hands-on guide to building online games using Canvas, SVG, and WebGL. Upper Saddle River, NJ: Addison-Wesley. pp. 117–120, 123–131, 136, 140–142. ISBN 0321767365.
Raasch, Jon (2011). Smashing WebKit. Chichester: Wiley. pp. 181, 182, 216. ISBN 1119999138.
Williams, James (2013). Three.js By Example. Vancouver, Canada: Leanpub. ISBN N/A |isbn= incorrecto (ayuda).