|
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.[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. HistoriaEsta 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
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. <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 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 modelosAl 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 objetosDebido 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] EjesDebido 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énReferencias
BibliografíaLibros acerca de la programación en Three.js:
Enlaces externos
Information related to Three.js |
||||||||||||||||||||||||||||||||||||||||||||||||
