{"id":66,"date":"2014-09-17T03:49:46","date_gmt":"2014-09-17T03:49:46","guid":{"rendered":"http:\/\/blog.espol.edu.ec\/jnjibaja\/?p=66"},"modified":"2014-09-17T03:49:46","modified_gmt":"2014-09-17T03:49:46","slug":"three-js","status":"publish","type":"post","link":"https:\/\/blog.espol.edu.ec\/jnjibaja\/2014\/09\/17\/three-js\/","title":{"rendered":"Three.js"},"content":{"rendered":"<p><strong>Three.js<\/strong><\/p>\n<p>Three.js es una biblioteca escrita con lenguaje JavaScript, usado para mostrar gr\u00e1ficos generalmente animados en 3D. Se usa junto a HTML 5, SVG o WEBGL. Es una librer\u00eda bastante liviana ideal para HTML 5 y muy \u00fatil para generar o animar gr\u00e1ficos en 3D.<\/p>\n<p>El principal uso es para animaciones complejas 3D para ser mostradas en navegadores con la ventaja que no necesita\u00a0 un plugin independiente para que corra. Como es en base a JavaScript es muy f\u00e1cil de aprender ya que es de scripting que incluye un entorno desarrollado.<\/p>\n<p>Esta biblioteca fue creada por Ricardo Cabello (espa\u00f1ol), en primeras instancias fue desarrollado en ActionScript y posteriormente traducido al JavaScript. Three.js funciona en todos los navegadores compatibles con WebGL.<\/p>\n<p>Entre las funciones que incluyen three.js se encuentran: detectar colisiones, manejar sprites, aplicar LensFlares, nuevos tipos de c\u00e1mara (ej. QuakeCamera para hacer flybys) por lo que parece claro cual puede ser un importante campo donde aplicarlo: gaming!<br \/>\nUsando la demo de\u00a0<a href=\"http:\/\/mrdoob.github.com\/three.js\/examples\/canvas_geometry_terrain.html\">canvas geometry terrain<\/a>\u00a0he mirado el rendimiento y no est\u00e1 mal teniendo en cuenta la plataforma donde nos estamos moviendo y la resoluci\u00f3n de 1440\u00d7900 que estaba usando en ese momento (Intel Core2Duo 1.8Ghz + Intel X3100 + Chrome 12 canary build).<\/p>\n<p>&nbsp;<\/p>\n<p>Las principales novedades incluyen involucran materiales, shaders y post-procesamiento. Actualmente cuenta con la contribuci\u00f3n de alrededor de 90 codificadores, entre ellos incluyendo \"gero3\", \"WestLangley\", Jerome Etienne, Erik Kitson y \"AddictArts\" y una comunidad creciente de programadores.<\/p>\n<p><strong>Caracter\u00edsticas<\/strong><\/p>\n<ul>\n<li>Escenas: a\u00f1adir y eliminar objetos en tiempo de ejecuci\u00f3n; niebla.<\/li>\n<li>C\u00e1maras: perspectiva y ortogr\u00e1fica; controladores: trackball, FPS, trayectoria y otras.<\/li>\n<li>Animaci\u00f3n: armaduras, cinem\u00e1tica directa, cinem\u00e1tica inversa, morphing y fotogramas clave.<\/li>\n<li>Efectos: anaglifo, bizco y la barrera de paralaje.<\/li>\n<li>Luces: ambiente, direcci\u00f3n, luz de puntos y espacios, sombras: emite y recibe.<\/li>\n<li>Materiales: Lambert, Phong, sombreado suave, texturas y otras.<\/li>\n<li>Objetos: mallas, part\u00edculas, sprites, l\u00edneas, cintas, huesos y otros.<\/li>\n<li>Geometr\u00eda: plano, cubo, esfera, toroide, texto en 3D y otras; modificadores: torno, extrusi\u00f3n y tubo.<\/li>\n<li>Cargadores de datos: binario, imagen, JSON y escena.<\/li>\n<li>Exportaci\u00f3n e importaci\u00f3n: utilidades para crear archivos compatibles con JSON Three.js desde: Blender, openCTM, FBX, Max, y OBJ.<\/li>\n<\/ul>\n<p><strong>Ventajas <\/strong><\/p>\n<ul>\n<li><em>js<\/em> es popular \u00a0porque es simple a la hora de usarlo a trav\u00e9s de JavaScript, y tambi\u00e9n porque tiene un equilibrio perfecto entre el dise\u00f1o y la programaci\u00f3n.<\/li>\n<li>Podemos importar archivos 3D desde Blender o Maya y se puede generar terrenos y objetos complejos.<\/li>\n<li>Incluye potentes shaders que se pueden personalizar.<\/li>\n<li>Podemos manipular luces, c\u00e1maras, perspectivas, control de visualizaciones, etc.<\/li>\n<\/ul>\n<p><strong>Conceptos b\u00e1sicos<\/strong><\/p>\n<p>Lo primero que tenemos que tener es nuestro archivo\u00a0HTML\u00a0listo para insertar la ventana donde se visualizar\u00e1 todo el 3D, de una forma muy simple, ya que el objeto del Canvas nos los genera<em>Three.js<\/em>.<\/p>\n<p>Lo primero es\u00a0<a href=\"http:\/\/threejs.org\/\">descargar<\/a>\u00a0la librer\u00eda para poderla usar, que pesa unos\u00a0<em>300kb<\/em>. Para realizar la prueba haremos que la visualizaci\u00f3n ocupe toda el espacio del navegador y lo haremos mediante\u00a0CSS.<\/p>\n<p>&nbsp;<\/p>\n<p><strong>Creaci\u00f3n de modelos<\/strong><\/p>\n<p>&nbsp;<\/p>\n<p>Resultar\u00eda muy complejo desarrollar escenas con modelos sofisticados a s\u00f3lo c\u00f3digo, por ello \u00a0THREE.js tiene contemplado la utilizaci\u00f3n de\u00a0<a href=\"http:\/\/es.wikipedia.org\/wiki\/Modelismo\">modelos<\/a>\u00a0de softwares de creaci\u00f3n de contenido y para ello ha desarrollado un plugin para exportarlos desde<a href=\"http:\/\/es.wikipedia.org\/wiki\/Blender\">Blender<\/a>,\u00a0<a href=\"http:\/\/es.wikipedia.org\/wiki\/Autodesk_Maya\">Maya<\/a>\u00a0\u00f3\u00a0<a href=\"http:\/\/es.wikipedia.org\/w\/index.php?title=Software_Max&amp;action=edit&amp;redlink=1\">Max<\/a>\u00a0a formato\u00a0<a href=\"http:\/\/es.wikipedia.org\/wiki\/JSON\">JSON<\/a>.<\/p>\n<p>Tambi\u00e9n existe la posibilidad de crear los modelos en varios formatos\u00a0 y luego convertirlos al formato JSON utilizando scripts desarrollados en\u00a0<a href=\"http:\/\/es.wikipedia.org\/wiki\/Python\">Python<\/a>, que se encuentran disponibles en el repositorio de Three.js.<\/p>\n<p>&nbsp;<\/p>\n<p><strong>Bibliograf\u00eda<\/strong><\/p>\n<p><a href=\"http:\/\/www.genbetadev.com\/javascript\/introduccion-a-three-js-la-libreria-3d-numero-uno-para-html5\">http:\/\/www.genbetadev.com\/javascript\/introduccion-a-three-js-la-libreria-3d-numero-uno-para-html5<\/a><\/p>\n<p><a href=\"http:\/\/es.wikipedia.org\/wiki\/Three.js\">http:\/\/es.wikipedia.org\/wiki\/Three.js<\/a><\/p>\n<p><a href=\"http:\/\/www.genbetadev.com\/desarrollo-web\/threejs-un-motor-ligero-y-eficiente-en-javascript\">http:\/\/www.genbetadev.com\/desarrollo-web\/threejs-un-motor-ligero-y-eficiente-en-javascript<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Three.js Three.js es una biblioteca escrita con lenguaje JavaScript, usado para mostrar gr\u00e1ficos generalmente animados en 3D. Se usa junto a HTML 5, SVG o WEBGL. Es una librer\u00eda bastante liviana ideal para HTML 5 y muy \u00fatil para generar o animar gr\u00e1ficos en 3D. El principal uso es para animaciones complejas 3D para ser [&hellip;]<\/p>\n","protected":false},"author":6040,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-66","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/blog.espol.edu.ec\/jnjibaja\/wp-json\/wp\/v2\/posts\/66","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.espol.edu.ec\/jnjibaja\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.espol.edu.ec\/jnjibaja\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.espol.edu.ec\/jnjibaja\/wp-json\/wp\/v2\/users\/6040"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.espol.edu.ec\/jnjibaja\/wp-json\/wp\/v2\/comments?post=66"}],"version-history":[{"count":1,"href":"https:\/\/blog.espol.edu.ec\/jnjibaja\/wp-json\/wp\/v2\/posts\/66\/revisions"}],"predecessor-version":[{"id":67,"href":"https:\/\/blog.espol.edu.ec\/jnjibaja\/wp-json\/wp\/v2\/posts\/66\/revisions\/67"}],"wp:attachment":[{"href":"https:\/\/blog.espol.edu.ec\/jnjibaja\/wp-json\/wp\/v2\/media?parent=66"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.espol.edu.ec\/jnjibaja\/wp-json\/wp\/v2\/categories?post=66"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.espol.edu.ec\/jnjibaja\/wp-json\/wp\/v2\/tags?post=66"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}