{"id":81532,"date":"2023-05-26T08:51:19","date_gmt":"2023-05-26T08:51:19","guid":{"rendered":"https:\/\/proyectos.comunicaciondigital.es\/?p=81532"},"modified":"2023-05-29T09:08:46","modified_gmt":"2023-05-29T09:08:46","slug":"libreria-three-js","status":"publish","type":"post","link":"https:\/\/proyectos.comunicaciondigital.es\/en\/libreria-three-js\/","title":{"rendered":"Librer\u00eda Three.js"},"content":{"rendered":"<h2 class=\"wp-block-heading\">\u00bfQu\u00e9 es Three.js?<\/h2>\n\n\n\n<p>Seg\u00fan la p\u00e1gina web de <a href=\"https:\/\/threejs.org\/\" target=\"_blank\" rel=\"noreferrer noopener\">Three.js<\/a>, es una librer\u00eda JavaScript que contiene un conjunto de clases preparadas para crear y renderizar gr\u00e1ficos 3D interactivos en WebGL.<\/p>\n\n\n\n<p>WebGL es una arquitectura de software para JavaScript que permite crear gr\u00e1ficos 3D que funcionan en los navegadores. Lo interesante de WebGL es que el c\u00f3digo se modela directamente en el navegador. Para ello, WebGL utiliza el objeto canvas que se introdujo en HTML5.<\/p>\n\n\n\n<p>Trabajar con WebGL es un proceso que requiere bastante tiempo. Durante el desarrollo, hay que describir cada punto, l\u00ednea, arista, etc. Para renderizarlo todo, hay que escribir un c\u00f3digo bastante largo. Para acelerar el proceso de desarrollo, se desarroll\u00f3 Three.js.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><a href=\"https:\/\/proyectos.comunicaciondigital.es\/wp-content\/uploads\/2023\/05\/image-6.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/proyectos.comunicaciondigital.es\/wp-content\/uploads\/2023\/05\/image-6.png\" alt=\"Las partes principales de la aplicaci\u00f3n WebGl. Fuente: Forasoft \" class=\"wp-image-81533\" width=\"628\" height=\"453\" srcset=\"https:\/\/proyectos.comunicaciondigital.es\/wp-content\/uploads\/2023\/05\/image-6.png 628w, https:\/\/proyectos.comunicaciondigital.es\/wp-content\/uploads\/2023\/05\/image-6-480x346.png 480w\" sizes=\"(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) 628px, 100vw\" \/><\/a><figcaption class=\"wp-element-caption\">Las partes principales de la aplicaci\u00f3n WebGl. Fuente: Forasoft<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">\u00bfQu\u00e9 funcionalidades tiene Three.js?<\/h2>\n\n\n\n<p>Three.js permite crear gr\u00e1ficos 3D acelerados utilizando JavaScript como parte del sitio web sin necesidad de plugin espec\u00edficos para el navegador.<\/p>\n\n\n\n<p>La biblioteca Three.js, como ya se ha mencionado, facilita el trabajo con WebGL. El uso de Three.js elimina la necesidad de escribir <em>shaders<\/em> (c\u00f3digo que puede ejecutarse en los procesadores de las tarjetas gr\u00e1ficas sin malgastar innecesariamente energ\u00eda de la CPU) y proporciona una forma de operar sobre conceptos familiares.<\/p>\n\n\n\n<p>La simulaci\u00f3n gr\u00e1fica con Three.js puede compararse con un plat\u00f3 de cine, ya que se pueden manipular conceptos como la escena, la luz, la c\u00e1mara, los objetos y sus materiales.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u00bfCu\u00e1les son los fundamentos de la librer\u00eda?<\/h2>\n\n\n\n<p>Los tres fundamentos de Three.js son:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Escena<\/strong> &#8211; una especie de plataforma donde se colocan todos los objetos que creamos;<\/li>\n\n\n\n<li><strong>C\u00e1mara<\/strong> &#8211; b\u00e1sicamente un \u00abojo\u00bb que apuntar\u00e1 a la escena. La c\u00e1mara captura y muestra los objetos que se encuentran en la escena;<\/li>\n\n\n\n<li><strong>Renderizado<\/strong> \u2013 una herramienta que nos permite mostrar la escena captada por la c\u00e1mara.<\/li>\n<\/ul>\n\n\n\n<p>La librer\u00eda ofrece documentaci\u00f3n detallada sobre su uso y diversas referencias para inspirarse.<\/p>\n<div class=\"pdfprnt-buttons pdfprnt-buttons-post pdfprnt-bottom-right\"><a href=\"https:\/\/proyectos.comunicaciondigital.es\/en\/wp-json\/wp\/v2\/posts\/81532?print=pdf\" class=\"pdfprnt-button pdfprnt-button-pdf\" target=\"_blank\" ><img decoding=\"async\" src=\"https:\/\/proyectos.comunicaciondigital.es\/wp-content\/plugins\/pdf-print\/images\/pdf.png\" alt=\"image_pdf\" title=\"View PDF\" \/><span class=\"pdfprnt-button-title pdfprnt-button-pdf-title\">Versi\u00f3n en PDF<\/span><\/a><\/div>","protected":false},"excerpt":{"rendered":"<p>\u00bfQu\u00e9 es Three.js? Seg\u00fan la p\u00e1gina web de Three.js, es una librer\u00eda JavaScript que contiene un conjunto de clases preparadas para crear y renderizar gr\u00e1ficos 3D interactivos en WebGL. WebGL es una arquitectura de software para JavaScript que permite crear gr\u00e1ficos 3D que funcionan en los navegadores. Lo interesante de WebGL es que el c\u00f3digo&hellip; <a class=\"continue\" href=\"https:\/\/proyectos.comunicaciondigital.es\/en\/libreria-three-js\/\">Continua leyendo<span> Librer\u00eda Three.js<\/span><\/a><\/p>","protected":false},"author":96,"featured_media":81534,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"off","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"categories":[265,264],"tags":[],"class_list":["post-81532","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-daria-tretiakova","category-tfm"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.2 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Librer\u00eda Three.js - Portal de proyectos multimedia<\/title>\n<meta name=\"description\" content=\"Analizamos una de las librer\u00edas JavaScript Three.js, que puede utilizarse en proyectos de periodismo inmersivo.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/proyectos.comunicaciondigital.es\/en\/libreria-three-js\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Librer\u00eda Three.js - Portal de proyectos multimedia\" \/>\n<meta property=\"og:description\" content=\"Analizamos una de las librer\u00edas JavaScript Three.js, que puede utilizarse en proyectos de periodismo inmersivo.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/proyectos.comunicaciondigital.es\/en\/libreria-three-js\/\" \/>\n<meta property=\"og:site_name\" content=\"Portal de proyectos multimedia\" \/>\n<meta property=\"article:published_time\" content=\"2023-05-26T08:51:19+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-05-29T09:08:46+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/proyectos.comunicaciondigital.es\/wp-content\/uploads\/2023\/05\/ygvUXeo.png\" \/>\n\t<meta property=\"og:image:width\" content=\"724\" \/>\n\t<meta property=\"og:image:height\" content=\"366\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Daria Tretiakova\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/proyectos.comunicaciondigital.es\/libreria-three-js\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/proyectos.comunicaciondigital.es\/libreria-three-js\/\"},\"author\":{\"name\":\"Daria Tretiakova\",\"@id\":\"https:\/\/proyectos.comunicaciondigital.es\/#\/schema\/person\/1cf3a593725bb0ec61f75ca3c1a0d294\"},\"headline\":\"Librer\u00eda Three.js\",\"datePublished\":\"2023-05-26T08:51:19+00:00\",\"dateModified\":\"2023-05-29T09:08:46+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/proyectos.comunicaciondigital.es\/libreria-three-js\/\"},\"wordCount\":341,\"commentCount\":0,\"image\":{\"@id\":\"https:\/\/proyectos.comunicaciondigital.es\/libreria-three-js\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/proyectos.comunicaciondigital.es\/wp-content\/uploads\/2023\/05\/ygvUXeo.png\",\"articleSection\":[\"Daria-Tretiakova\",\"TFM\"],\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/proyectos.comunicaciondigital.es\/libreria-three-js\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/proyectos.comunicaciondigital.es\/libreria-three-js\/\",\"url\":\"https:\/\/proyectos.comunicaciondigital.es\/libreria-three-js\/\",\"name\":\"Librer\u00eda Three.js - Portal de proyectos multimedia\",\"isPartOf\":{\"@id\":\"https:\/\/proyectos.comunicaciondigital.es\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/proyectos.comunicaciondigital.es\/libreria-three-js\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/proyectos.comunicaciondigital.es\/libreria-three-js\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/proyectos.comunicaciondigital.es\/wp-content\/uploads\/2023\/05\/ygvUXeo.png\",\"datePublished\":\"2023-05-26T08:51:19+00:00\",\"dateModified\":\"2023-05-29T09:08:46+00:00\",\"author\":{\"@id\":\"https:\/\/proyectos.comunicaciondigital.es\/#\/schema\/person\/1cf3a593725bb0ec61f75ca3c1a0d294\"},\"description\":\"Analizamos una de las librer\u00edas JavaScript Three.js, que puede utilizarse en proyectos de periodismo inmersivo.\",\"breadcrumb\":{\"@id\":\"https:\/\/proyectos.comunicaciondigital.es\/libreria-three-js\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/proyectos.comunicaciondigital.es\/libreria-three-js\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/proyectos.comunicaciondigital.es\/libreria-three-js\/#primaryimage\",\"url\":\"https:\/\/proyectos.comunicaciondigital.es\/wp-content\/uploads\/2023\/05\/ygvUXeo.png\",\"contentUrl\":\"https:\/\/proyectos.comunicaciondigital.es\/wp-content\/uploads\/2023\/05\/ygvUXeo.png\",\"width\":724,\"height\":366},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/proyectos.comunicaciondigital.es\/libreria-three-js\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/proyectos.comunicaciondigital.es\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Librer\u00eda Three.js\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/proyectos.comunicaciondigital.es\/#website\",\"url\":\"https:\/\/proyectos.comunicaciondigital.es\/\",\"name\":\"Portal de proyectos multimedia\",\"description\":\"Grupo Ciberimaginario\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/proyectos.comunicaciondigital.es\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-GB\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/proyectos.comunicaciondigital.es\/#\/schema\/person\/1cf3a593725bb0ec61f75ca3c1a0d294\",\"name\":\"Daria Tretiakova\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/proyectos.comunicaciondigital.es\/wp-content\/litespeed\/avatar\/246a0724434899d234d6509c2184c08c.jpg?ver=1777306418\",\"url\":\"https:\/\/proyectos.comunicaciondigital.es\/wp-content\/litespeed\/avatar\/246a0724434899d234d6509c2184c08c.jpg?ver=1777306418\",\"contentUrl\":\"https:\/\/proyectos.comunicaciondigital.es\/wp-content\/litespeed\/avatar\/246a0724434899d234d6509c2184c08c.jpg?ver=1777306418\",\"caption\":\"Daria Tretiakova\"},\"url\":\"https:\/\/proyectos.comunicaciondigital.es\/en\/author\/daria-tretiakova\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Librer\u00eda Three.js - Portal de proyectos multimedia","description":"Analizamos una de las librer\u00edas JavaScript Three.js, que puede utilizarse en proyectos de periodismo inmersivo.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/proyectos.comunicaciondigital.es\/en\/libreria-three-js\/","og_locale":"en_GB","og_type":"article","og_title":"Librer\u00eda Three.js - Portal de proyectos multimedia","og_description":"Analizamos una de las librer\u00edas JavaScript Three.js, que puede utilizarse en proyectos de periodismo inmersivo.","og_url":"https:\/\/proyectos.comunicaciondigital.es\/en\/libreria-three-js\/","og_site_name":"Portal de proyectos multimedia","article_published_time":"2023-05-26T08:51:19+00:00","article_modified_time":"2023-05-29T09:08:46+00:00","og_image":[{"width":724,"height":366,"url":"https:\/\/proyectos.comunicaciondigital.es\/wp-content\/uploads\/2023\/05\/ygvUXeo.png","type":"image\/png"}],"author":"Daria Tretiakova","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/proyectos.comunicaciondigital.es\/libreria-three-js\/#article","isPartOf":{"@id":"https:\/\/proyectos.comunicaciondigital.es\/libreria-three-js\/"},"author":{"name":"Daria Tretiakova","@id":"https:\/\/proyectos.comunicaciondigital.es\/#\/schema\/person\/1cf3a593725bb0ec61f75ca3c1a0d294"},"headline":"Librer\u00eda Three.js","datePublished":"2023-05-26T08:51:19+00:00","dateModified":"2023-05-29T09:08:46+00:00","mainEntityOfPage":{"@id":"https:\/\/proyectos.comunicaciondigital.es\/libreria-three-js\/"},"wordCount":341,"commentCount":0,"image":{"@id":"https:\/\/proyectos.comunicaciondigital.es\/libreria-three-js\/#primaryimage"},"thumbnailUrl":"https:\/\/proyectos.comunicaciondigital.es\/wp-content\/uploads\/2023\/05\/ygvUXeo.png","articleSection":["Daria-Tretiakova","TFM"],"inLanguage":"en-GB","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/proyectos.comunicaciondigital.es\/libreria-three-js\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/proyectos.comunicaciondigital.es\/libreria-three-js\/","url":"https:\/\/proyectos.comunicaciondigital.es\/libreria-three-js\/","name":"Librer\u00eda Three.js - Portal de proyectos multimedia","isPartOf":{"@id":"https:\/\/proyectos.comunicaciondigital.es\/#website"},"primaryImageOfPage":{"@id":"https:\/\/proyectos.comunicaciondigital.es\/libreria-three-js\/#primaryimage"},"image":{"@id":"https:\/\/proyectos.comunicaciondigital.es\/libreria-three-js\/#primaryimage"},"thumbnailUrl":"https:\/\/proyectos.comunicaciondigital.es\/wp-content\/uploads\/2023\/05\/ygvUXeo.png","datePublished":"2023-05-26T08:51:19+00:00","dateModified":"2023-05-29T09:08:46+00:00","author":{"@id":"https:\/\/proyectos.comunicaciondigital.es\/#\/schema\/person\/1cf3a593725bb0ec61f75ca3c1a0d294"},"description":"Analizamos una de las librer\u00edas JavaScript Three.js, que puede utilizarse en proyectos de periodismo inmersivo.","breadcrumb":{"@id":"https:\/\/proyectos.comunicaciondigital.es\/libreria-three-js\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/proyectos.comunicaciondigital.es\/libreria-three-js\/"]}]},{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/proyectos.comunicaciondigital.es\/libreria-three-js\/#primaryimage","url":"https:\/\/proyectos.comunicaciondigital.es\/wp-content\/uploads\/2023\/05\/ygvUXeo.png","contentUrl":"https:\/\/proyectos.comunicaciondigital.es\/wp-content\/uploads\/2023\/05\/ygvUXeo.png","width":724,"height":366},{"@type":"BreadcrumbList","@id":"https:\/\/proyectos.comunicaciondigital.es\/libreria-three-js\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/proyectos.comunicaciondigital.es\/"},{"@type":"ListItem","position":2,"name":"Librer\u00eda Three.js"}]},{"@type":"WebSite","@id":"https:\/\/proyectos.comunicaciondigital.es\/#website","url":"https:\/\/proyectos.comunicaciondigital.es\/","name":"Portal de proyectos multimedia","description":"Grupo Ciberimaginario","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/proyectos.comunicaciondigital.es\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-GB"},{"@type":"Person","@id":"https:\/\/proyectos.comunicaciondigital.es\/#\/schema\/person\/1cf3a593725bb0ec61f75ca3c1a0d294","name":"Daria Tretiakova","image":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/proyectos.comunicaciondigital.es\/wp-content\/litespeed\/avatar\/246a0724434899d234d6509c2184c08c.jpg?ver=1777306418","url":"https:\/\/proyectos.comunicaciondigital.es\/wp-content\/litespeed\/avatar\/246a0724434899d234d6509c2184c08c.jpg?ver=1777306418","contentUrl":"https:\/\/proyectos.comunicaciondigital.es\/wp-content\/litespeed\/avatar\/246a0724434899d234d6509c2184c08c.jpg?ver=1777306418","caption":"Daria Tretiakova"},"url":"https:\/\/proyectos.comunicaciondigital.es\/en\/author\/daria-tretiakova\/"}]}},"_links":{"self":[{"href":"https:\/\/proyectos.comunicaciondigital.es\/en\/wp-json\/wp\/v2\/posts\/81532","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/proyectos.comunicaciondigital.es\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/proyectos.comunicaciondigital.es\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/proyectos.comunicaciondigital.es\/en\/wp-json\/wp\/v2\/users\/96"}],"replies":[{"embeddable":true,"href":"https:\/\/proyectos.comunicaciondigital.es\/en\/wp-json\/wp\/v2\/comments?post=81532"}],"version-history":[{"count":3,"href":"https:\/\/proyectos.comunicaciondigital.es\/en\/wp-json\/wp\/v2\/posts\/81532\/revisions"}],"predecessor-version":[{"id":81610,"href":"https:\/\/proyectos.comunicaciondigital.es\/en\/wp-json\/wp\/v2\/posts\/81532\/revisions\/81610"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/proyectos.comunicaciondigital.es\/en\/wp-json\/wp\/v2\/media\/81534"}],"wp:attachment":[{"href":"https:\/\/proyectos.comunicaciondigital.es\/en\/wp-json\/wp\/v2\/media?parent=81532"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/proyectos.comunicaciondigital.es\/en\/wp-json\/wp\/v2\/categories?post=81532"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/proyectos.comunicaciondigital.es\/en\/wp-json\/wp\/v2\/tags?post=81532"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}