Three.js ofrece una gran cantidad de funciones y su relaci\u00f3n con otros campos 3D puede resultar algo confusa. Su alcance tambi\u00e9n est\u00e1 en constante evoluci\u00f3n, por lo que no es f\u00e1cil resumirlo, y estas observaciones son subjetivas.<\/p>\n
El objetivo de este proyecto es crear una biblioteca 3D ligera y f\u00e1cil de usar. Esta biblioteca proporciona renderizados. , , CSS3D y WebGL.<\/p>\n
Esta es la descripci\u00f3n oficial del repositorio de GitHub. De hecho, lo resume bastante bien, pero cada tema en esta oraci\u00f3n es un tema amplio en s\u00ed mismo, y eso no es todo lo que three.js hace.<\/p>\n
La biblioteca est\u00e1 escrita en JavaScript y est\u00e1 dise\u00f1ada para usarse en un entorno JavaScript. En la mayor\u00eda de los casos, esto significa que se ejecuta en el lado del cliente, en un navegador web o en alg\u00fan dispositivo. Pero con Node.js y navegadores headless, tambi\u00e9n se puede usar en el lado del servidor. Lo primero que viene a la mente es renderizar: quiz\u00e1s algunas im\u00e1genes de vista previa en el servidor, pero tambi\u00e9n podr\u00edan ser c\u00e1lculos 3D, ya que three.js cuenta con una rica biblioteca matem\u00e1tica. Este es un t\u00e9rmino incre\u00edblemente amplio. 3D puede significar mucho. En la mayor\u00eda de los casos, pensamos en "gr\u00e1ficos".<\/p>\n
La mayor\u00eda de los proyectos three.js que vemos utilizan gr\u00e1ficos 3D en tiempo real, donde la interacci\u00f3n del usuario genera una respuesta visual inmediata. Otros tipos de gr\u00e1ficos 3D son diversos efectos o personajes artificiales en pel\u00edculas, o diversas "representaciones" que se pueden ver impresas o en un cat\u00e1logo web (por ejemplo, el sitio web de IKEA est\u00e1 repleto de gr\u00e1ficos 3D, ya que todas las fotos de sus productos son generadas por computadora).<\/p>\n
Un subconjunto de todo esto son las matem\u00e1ticas 3D. Los gr\u00e1ficos 3D son indispensables sin matem\u00e1ticas, y los lenguajes de programaci\u00f3n no comprenden los conceptos 3D por defecto. Aqu\u00ed es donde entra en juego una biblioteca, que abstrae esas operaciones matem\u00e1ticas, quiz\u00e1s optimiz\u00e1ndolas, y expone una interfaz de alto nivel como Matrix4 o .dot().<\/p>\n
Three.js incluye su propia biblioteca matem\u00e1tica con clases espec\u00edficas para matem\u00e1ticas 3D. Existen bibliotecas independientes que gestionan estas matem\u00e1ticas por s\u00ed solas, pero con Three, es solo un subconjunto de un sistema mucho m\u00e1s amplio.<\/p>\n
El renderizado es otra gran responsabilidad de la biblioteca, pero aqu\u00ed tambi\u00e9n se complica un poco. WebGL es muy espec\u00edfico y destaca entre la multitud.<\/p>\n
Con canvas, SVG y CSS, la responsabilidad del renderizado recae completamente en 3D. Estas API cuentan con numerosas bibliotecas para dibujar elementos no 3D, o incluso lo hacen por defecto (CSS dibuja rect\u00e1ngulos 2D, Canvas dibuja diversas formas 2D), pero requieren un toque m\u00e1gico y matem\u00e1ticas 3D para realizar el renderizado 3D.<\/p>\n
El toque mágico se presenta principalmente en forma de abstracción de la interfaz. Por ejemplo, al gestionar el estado 3D de un elemento. <div> Convertir a 3D mediante CSS es muy difícil. Se requiere mucha lógica para que la API de Canvas dibuje algo que parezca 3D. WebGL es mucho más complejo.<\/p>\n
Three abstrae todas estas API en algo tan simple como render(), pero para hacerlo necesita una representaci\u00f3n gen\u00e9rica de lo que es el "mundo 3D".<\/p>\n
Se puede identificar un \u00e1rea de three.js que act\u00faa como esta abstracci\u00f3n general del "mundo 3D". Un gr\u00e1fico de escena es una estructura de datos que describe c\u00f3mo se relacionan los objetos de una escena (mundo) 3D. No tiene por qu\u00e9 ser 3D, ya que es una forma pr\u00e1ctica de describir cualquier jerarqu\u00eda de gr\u00e1ficos vectoriales. Es m\u00e1s espec\u00edficamente un "\u00e1rbol" que se ramifica a partir de "nodos" con un "nodo ra\u00edz". En three.js, la clase base para esta estructura de datos es Object3D.<\/p>\n
Esto es casi exactamente igual que el árbol DOM. THREE.Scene es similar. <body> Será y todo lo demás es una rama. En el DOM podemos colocar elementos en su lugar, pero su alcance es relativamente limitado. La rotación suele ocurrir alrededor de un eje y movemos los elementos a la izquierda\/derecha o arriba\/abajo. En un gráfico de escena 3D tenemos más grados de libertad.<\/p>\n
La escena tres se asemeja m\u00e1s a un DOM virtual. Realizamos nuestras operaciones y establecemos el estado en ese \u00e1rbol, y cuando queremos tener una instant\u00e1nea visual de ese estado (por ejemplo, en un bucle continuo o en alg\u00fan cambio de estado o interacci\u00f3n del usuario), llamamos a render (escena). Cuando algo cambia, no es necesario actualizar todo el \u00e1rbol DOM, mientras que con el elemento , tenemos que borrar toda la vista y luego volver a dibujar todo, incluso si solo un elemento cambia su posici\u00f3n.<\/p>\n
Uno <div> En uno <div> Similar a la relación padre-hijo THREE.Mesh('sol')->THREE.Mesh('tierra'). Una regla CSS podría ser similar a un THREE.Material donde una descripción como color:'rojo' hace que algo se vuelva rojo. Finalmente, la llamada a threeRenderer.render(scene) podría ser similar a que el navegador cargue una página HTML con reglas CSS.<\/p>\n
Malla, Escena, C\u00e1mara y Luz son subclases de esta clase gen\u00e9rica. Esto permite agregar () una "caja" a la "escena" o una "luz" a la "c\u00e1mara".<\/p>\n
Una estructura simple puede ser muy plana. El nodo ra\u00edz puede considerarse como "mundo" y puede tener como hijos "tierra", "casa", "sol" y "c\u00e1mara".<\/p>\n
THREE.Scene('world')\r\n|-THREE.Mesh('ground')\r\n|-THREE.Mesh('house')\r\n|-THREE.Light('sun')\r\n|-THREE.Camera('main')<\/code><\/pre>\n<\/div>\nEsta informaci\u00f3n es suficiente para alimentar un renderizador y obtener un resultado visual. En algunas escenas, hay dos cuadr\u00edculas que representan elementos diferentes: el suelo y la casa en la colina. Una luz define c\u00f3mo se iluminan (ma\u00f1ana, mediod\u00eda o flash) y un objeto (la c\u00e1mara) define nuestro punto de vista, nuestra visi\u00f3n del mundo.<\/p>\n
Los resultados pueden variar, por ejemplo, CSS est\u00e1 limitado a una representaci\u00f3n muy ligera, mientras que WebGL puede proporcionar sombras y, en general, alta fidelidad.<\/p>\n
Mediante esta estructura, se gestiona el mundo 3D. Si queremos simular c\u00f3mo la luz natural afecta a una casa en diferentes estaciones, cambiamos program\u00e1ticamente la posici\u00f3n y la direcci\u00f3n de la luz en el mundo. La funci\u00f3n del gr\u00e1fico de escena es exponer este gancho de "posici\u00f3n", pero para animarlo, es necesario implementar una l\u00f3gica propia. Una forma sencilla de animar una escena 3D es three.js con una biblioteca de interpolaci\u00f3n.<\/p>\n
Todo esto probablemente solo sea cierto en teoría, y es posible que no puedas cambiar los renderizados de la escena a voluntad. Pero esto se debe principalmente a la superposición de los "materiales" con el gráfico de la escena y su acoplamiento con los renderizados. Por ejemplo, no hay forma de sombrear un... <div> O bien no aparece como metal, que es algo que un material WebGL puede describir, pero puede volverse rojo, algo que todos los materiales pueden hacer.<\/p>\n
En el fondo, Object3D sigue siendo gen\u00e9rico y la relaci\u00f3n espacial y jer\u00e1rquica de los nodos entre s\u00ed se describe a trav\u00e9s de un \u201cgr\u00e1fico de escena\u201d.<\/p>\n
En t\u00e9rminos simples, esta es la variable de escena que obtendr\u00e1s despu\u00e9s de llamar a scene.add(my_foo) varias veces.<\/p>\n
WebGL<\/span><\/h2>\nWebgl es incre\u00edblemente espec\u00edfico y probablemente se usa en aproximadamente el 99 % de las aplicaciones three.js existentes. Es un tema amplio, por lo que quiz\u00e1s valga la pena revisar primero las alternativas.<\/p>\n
lienzo, css, svg<\/span><\/h2>\nTodas estas son API. Se trata de una interfaz que, como programador, puedes usar para indicarle al navegador que dibuje ciertas cosas. CSS es la interfaz m\u00e1s com\u00fan en la web porque, sin ella, todo parece texto plano. Hist\u00f3ricamente, no ten\u00eda nada que ver con el 3D.<\/p>\n
Canvas usa el mismo elemento WebGL para dibujar, pero tiene un contexto diferente. Este contexto se llama "2D", pero como el 3D es falso y siempre dibujamos alg\u00fan tipo de superficie 2D, ya sea real o virtual, tambi\u00e9n podemos usar este contexto para dibujar gr\u00e1ficos 3D.<\/p>\n
SVG es otra API no 3D que se suele usar para describir elementos como logotipos o iconos. Sin embargo, dado que puede describir elementos b\u00e1sicos como l\u00edneas, tambi\u00e9n puede representarse en un contexto 3D (como una superposici\u00f3n en un mapa o elementos de interfaz de usuario o HUD con reconocimiento espacial).<\/p>\n
Un tema com\u00fan aqu\u00ed es que ninguno de estos est\u00e1 dise\u00f1ado para uso 3D. Otra caracter\u00edstica importante es que todos son de alto nivel; anteriormente estaban dise\u00f1ados para hacer otra cosa. Por ejemplo, los tres saben c\u00f3mo dibujar un "c\u00edrculo". Con Canvas, esta es una forma expl\u00edcita; con CSS, puede que tengas que usar radios de borde, pero el resultado final es un acceso muy directo a un c\u00edrculo.<\/p>\n
WebGL es de muy bajo nivel; desconoce el concepto de gr\u00e1ficos 3D. Los gr\u00e1ficos 3D requieren c\u00e1lculos matem\u00e1ticos espec\u00edficos, y muchos. Piense por un momento en una pantalla de alta resoluci\u00f3n y la cantidad de p\u00edxeles que tiene. Si tiene que realizar c\u00e1lculos para cada p\u00edxel para determinar c\u00f3mo cierta cantidad de luz afecta la superficie, y tiene que hacerlo 60 veces por segundo, la suma es considerable.<\/p>\n
Procesador gr\u00e1fico<\/h2>\n
La mayor\u00eda de las computadoras, como port\u00e1tiles, ordenadores de sobremesa, tel\u00e9fonos m\u00f3viles e incluso relojes, cuentan con alg\u00fan tipo de dispositivo de hardware que puede calcular eficientemente estas operaciones 3D y permitir la visualizaci\u00f3n de gr\u00e1ficos interactivos. Esto se denomina unidad de procesamiento gr\u00e1fico.<\/p>\n
Se diferencia del procesador principal porque est\u00e1 dise\u00f1ado para prop\u00f3sitos diferentes: operaciones matem\u00e1ticas espec\u00edficas que se ejecutan en paralelo.<\/p>\n
As\u00ed como utilizamos JavaScript para la programaci\u00f3n de navegadores, utilizamos WebGL para la programaci\u00f3n de tarjetas gr\u00e1ficas.<\/p>\n
Bueno, eso es cierto en teor\u00eda, pero en la pr\u00e1ctica son dos cosas muy distintas. WebGL se compone tanto de c\u00f3digo JavaScript (las instrucciones) como de un lenguaje completamente distinto que realiza los c\u00e1lculos (GLSL). Se pueden establecer algunos paralelismos entre HTML y JavaScript y c\u00f3mo funcionan juntos en una p\u00e1gina.<\/p>\n
Bidimensional y tridimensional<\/h2>\n
No solo el 3D se beneficia de esta aceleraci\u00f3n de hardware. El procesamiento de v\u00eddeo tambi\u00e9n es un buen candidato. Puedes programar la tarjeta gr\u00e1fica para cambiar los colores o la imagen en una transmisi\u00f3n de v\u00eddeo en directo.<\/p>\n
WebGL, que es de muy bajo nivel, es gen\u00e9rico. No comprende el 2D ni el 3D, pero s\u00ed la memoria, los b\u00faferes, las colas de comandos, los sombreadores, etc.<\/p>\n
La programaci\u00f3n paralela es diferente a la programaci\u00f3n en JavaScript. Un problema com\u00fan es c\u00f3mo los distintos subprocesos acceden a una variable compartida.<\/p>\n
Este paradigma diferente implica la existencia de un lenguaje completamente nuevo llamado GLSL. Es un lenguaje de sombreado presente en casi todas las API de gr\u00e1ficos de bajo nivel. Es donde se escribe la l\u00f3gica para estos grandes n\u00fameros, y la \u00fanica ventaja es que no es necesario escribir c\u00f3digo m\u00e1quina.<\/p>\n
La otra parte de la API de WebGL son los enlaces de JavaScript que le indican a la GPU qu\u00e9 hacer. Un sombreador "realiza los c\u00e1lculos A" y un enlace "los ejecuta un mill\u00f3n de veces".<\/p>\n
Depende del programador calcular qu\u00e9 es A. Podr\u00eda ser algo relacionado con 3D o podr\u00eda ser un kernel que desenfoca el video.<\/p>\n
Cuando comienzas a abstraer estos c\u00e1lculos y estos comandos, terminas con three.js.<\/p>\n
Renders que trabajan juntos<\/h2>\n
Un caso de uso muy l\u00f3gico es usar una combinaci\u00f3n de renderizadores para dibujar elementos que se ven bien en 3D. WebGL puede procesar muchos n\u00fameros y crear im\u00e1genes muy realistas, pero es deficiente al manejar texto e incluso algunas l\u00edneas. Una capa adicional de texto renderizado se puede gestionar mediante CSS y renderizadores de lienzo, mientras que las rutas y diversas l\u00edneas se pueden gestionar mediante SVG.<\/p>\n
TRES.WebGLRenderer<\/h2>\n
Todo este contenido de bajo nivel se abstrae mediante una clase WebGLRenderer de three.js. Esto es lo que convierte el cubo en un conjunto de n\u00fameros en la memoria de la GPU.<\/p>\n
Ir\u00f3nicamente, es el \u00fanico renderizador de three.js que no necesita gr\u00e1ficos 3D, pero es la mejor opci\u00f3n. El resto simula 3D mediante API 2D, mientras que WebGL lo hace intencionalmente mediante una API gen\u00e9rica de computaci\u00f3n paralela. Sin embargo, esto no descarta un escenario en el que se pueda usar exclusivamente para procesar esa transmisi\u00f3n de video en vivo. Se abstrae lo suficiente de WebGL como para ser \u00fatil para esto, pero probablemente se est\u00e9 usando un tercio de la biblioteca. Se podr\u00eda crear una capa de interfaz de usuario s\u00faper responsiva con WebGL, o un juego de plataformas tipo Super Mario donde three.js seguir\u00eda siendo una gran herramienta.<\/p>\n
El hecho de que solo uses un tercio de la biblioteca significa que otra herramienta podr\u00eda ser m\u00e1s adecuada para ese uso, o que podr\u00edas simplemente crear un subconjunto de three.js. Tanto los ejemplos de Super Mario como los de procesamiento de v\u00eddeo podr\u00edan necesitar solo PlaneGeometry y quiz\u00e1s un tipo de material.<\/p>\n
tres matem\u00e1ticas<\/h2>\n
C\u00f3digo JavaScript que realiza ciertas operaciones matem\u00e1ticas en 3D. JS tiene Math.pow() por defecto, pero no Quaternion.inverse(). Con estas clases, podemos escribir algoritmos que no requieren renderizado; por ejemplo, un servidor de juegos que verifica qui\u00e9n dispara y qui\u00e9n genera muchos rayos, pero no dibuja nada.<\/p>\n
gr\u00e1fico de tres escenas<\/h2>\n
Una familia de subclases de Object3D que forman una estructura de datos de \u00e1rbol que describe un "mundo 3D" y las relaciones entre los objetos que lo componen. Es conceptualmente abstracta, pero puede renderizarse con renderizado espec\u00edfico una vez que se profundiza en el c\u00f3digo.<\/p>\n
tres representaciones<\/h2>\n
La capa que traduce ese gr\u00e1fico gen\u00e9rico a una representaci\u00f3n visual en la pantalla o en alg\u00fan b\u00fafer (por ejemplo, se crea en el servidor). Utiliza diversas tecnolog\u00edas para lograr este objetivo.<\/p>\n
TRES-WebGLRenderer<\/h2>\n
Un renderizador especial que permite la aceleraci\u00f3n por hardware y domina muchos conceptos 3D, pero que tambi\u00e9n puede usarse para 2D (e incluso computaci\u00f3n general). Estos son los componentes principales de three.js, en mi opini\u00f3n. Suelo reemplazar \u201c3D\u201d por \u201cGr\u00e1ficos\u201d, pero esto solo aplica al WebGLRenderer.<\/p>\n
Three.js no es un motor de juego.<\/h2>\n
No todos los que necesitan 3D (o gr\u00e1ficos) en la web desarrollan juegos. Los motores de juego suelen realizar muchas optimizaciones m\u00e1s all\u00e1 de describir y mostrar mundos 3D. Cada juego tiene necesidades diferentes, y la f\u00edsica y los sistemas de renderizado para juegos de estrategia en tiempo real y de disparos en primera persona probablemente tengan necesidades muy diferentes. Todo esto implica m\u00e1s c\u00f3digo, y para alguien que solo quiere crear un modelo 3D como parte de un cat\u00e1logo de productos, esto no solo es innecesario, sino indeseable. Por supuesto, se podr\u00eda crear un motor de juego y usar tres para renderizar y construir los bloques del motor.<\/p>\n
Three.js no carga mucho<\/h2>\n
Claro, el n\u00facleo cuenta con m\u00faltiples cargadores para algunos recursos, pero todos los formatos comunes como gltf o fbx son independientes. A Three.js no le importa c\u00f3mo se obtienen los recursos, siempre y cuando se analicen correctamente y se cree un objeto 3D. En Three.js, no hay diferencia entre una malla de un archivo gltf y una esfera procedural. Muchos ejemplos creativos usan cubos y esferas y no cargan nada m\u00e1s que el propio Three.js. Los cargadores del n\u00facleo son muy gen\u00e9ricos: cargan im\u00e1genes y archivos y tienen una representaci\u00f3n directa de un objeto de Three.js, como un material o una textura. Los cargadores espec\u00edficos para cada formato se construyen con estos bloques de construcci\u00f3n.<\/p>\n
<\/p>","protected":false},"excerpt":{"rendered":"Introducci\u00f3n Three.js hace muchas cosas y puede resultar algo confuso c\u00f3mo trabajar con\u2026","protected":false},"author":1,"featured_media":14692,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_yoast_wpseo_focuskw":"ThreeJS","_yoast_wpseo_title":"","_yoast_wpseo_metadesc":"","_yoast_wpseo_canonical":"","_yoast_wpseo_opengraph-description":"","_yoast_wpseo_opengraph-image":"","_yoast_wpseo_twitter-description":"","_yoast_wpseo_twitter-image":"","_yoast_wpseo_focuskeywords":"","_yoast_wpseo_primary_category":"193","footnotes":""},"categories":[193,363],"tags":[395,396],"class_list":{"0":"post-14691","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-tutorials","8":"category-programming","9":"tag-threejs","10":"tag-396"},"yoast_head":"\n
Three.js \u0686\u06cc\u0633\u062a\u061f - \u0628\u0644\u0627\u06af ITPiran<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.itpiran.net\/blog\/es\/tutorials\/threejs-\u0686\u06cc\u0633\u062a\u061f\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Three.js \u0686\u06cc\u0633\u062a\u061f - \u0628\u0644\u0627\u06af ITPiran\" \/>\n<meta property=\"og:description\" content=\"\u0645\u0642\u062f\u0645\u0647 Three.js \u06a9\u0627\u0631\u0647\u0627\u06cc \u0632\u06cc\u0627\u062f\u06cc \u0627\u0646\u062c\u0627\u0645 \u0645\u06cc \u062f\u0647\u062f \u0648 \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u062a\u0627 \u062d\u062f\u0648\u062f\u06cc \u06af\u06cc\u062c \u06a9\u0646\u0646\u062f\u0647 \u0628\u0627\u0634\u062f \u06a9\u0647 \u0686\u06af\u0648\u0646\u0647 \u0628\u0627…\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.itpiran.net\/blog\/es\/tutorials\/threejs-\u0686\u06cc\u0633\u062a\u061f\/\" \/>\n<meta property=\"og:site_name\" content=\"\u0628\u0644\u0627\u06af ITPiran\" \/>\n<meta property=\"article:published_time\" content=\"2024-02-05T13:15:31+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-02-17T07:07:20+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdn.itpiran.net\/2024\/02\/05164430\/Threejs.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1793\" \/>\n\t<meta property=\"og:image:height\" content=\"1110\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minuto\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/threejs-%da%86%db%8c%d8%b3%d8%aa%d8%9f\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/threejs-%da%86%db%8c%d8%b3%d8%aa%d8%9f\\\/\"},\"author\":{\"name\":\"admin\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#\\\/schema\\\/person\\\/04ed27b919baca468a2273f8e4318f81\"},\"headline\":\"Three.js \u0686\u06cc\u0633\u062a\u061f\",\"datePublished\":\"2024-02-05T13:15:31+00:00\",\"dateModified\":\"2024-02-17T07:07:20+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/threejs-%da%86%db%8c%d8%b3%d8%aa%d8%9f\\\/\"},\"wordCount\":201,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/threejs-%da%86%db%8c%d8%b3%d8%aa%d8%9f\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/cdn.itpiran.net\\\/2024\\\/02\\\/05164430\\\/Threejs.jpg\",\"keywords\":[\"ThreeJS\",\"\u062c\u0627\u0648\u0627\u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0633\u0647 \u0628\u0639\u062f\u06cc\"],\"articleSection\":[\"\u0622\u0645\u0648\u0632\u0634\u06cc\",\"\u0628\u0631\u0646\u0627\u0645\u0647 \u0646\u0648\u06cc\u0633\u06cc\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/threejs-%da%86%db%8c%d8%b3%d8%aa%d8%9f\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/threejs-%da%86%db%8c%d8%b3%d8%aa%d8%9f\\\/\",\"url\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/threejs-%da%86%db%8c%d8%b3%d8%aa%d8%9f\\\/\",\"name\":\"Three.js \u0686\u06cc\u0633\u062a\u061f - \u0628\u0644\u0627\u06af ITPiran\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/threejs-%da%86%db%8c%d8%b3%d8%aa%d8%9f\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/threejs-%da%86%db%8c%d8%b3%d8%aa%d8%9f\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/cdn.itpiran.net\\\/2024\\\/02\\\/05164430\\\/Threejs.jpg\",\"datePublished\":\"2024-02-05T13:15:31+00:00\",\"dateModified\":\"2024-02-17T07:07:20+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/threejs-%da%86%db%8c%d8%b3%d8%aa%d8%9f\\\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/threejs-%da%86%db%8c%d8%b3%d8%aa%d8%9f\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/threejs-%da%86%db%8c%d8%b3%d8%aa%d8%9f\\\/#primaryimage\",\"url\":\"https:\\\/\\\/cdn.itpiran.net\\\/2024\\\/02\\\/05164430\\\/Threejs.jpg\",\"contentUrl\":\"https:\\\/\\\/cdn.itpiran.net\\\/2024\\\/02\\\/05164430\\\/Threejs.jpg\",\"width\":1793,\"height\":1110},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/threejs-%da%86%db%8c%d8%b3%d8%aa%d8%9f\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"\u0622\u0645\u0648\u0632\u0634\u06cc\",\"item\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/category\\\/tutorials\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Three.js \u0686\u06cc\u0633\u062a\u061f\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/\",\"name\":\"\u0628\u0644\u0627\u06af ITPiran\",\"description\":\"\u0627\u062e\u0628\u0627\u0631 \u0648 \u0645\u0642\u0627\u0644\u0627\u062a \u062a\u062c\u0627\u0631\u062a \u067e\u0627\u06cc\u062f\u0627\u0631 \u0627\u06cc\u0631\u0627\u0646\u06cc\u0627\u0646\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#organization\",\"name\":\"\u0628\u0644\u0627\u06af \u062a\u062c\u0627\u0631\u062a \u067e\u0627\u06cc\u062f\u0627\u0631 \u0627\u06cc\u0631\u0627\u0646\u06cc\u0627\u0646\",\"alternateName\":\"ITPIran Blog\",\"url\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/cdn.itpiran.net\\\/2023\\\/12\\\/27150508\\\/cropped-ITPIRAN-BLOG-LOGO-2.png\",\"contentUrl\":\"https:\\\/\\\/cdn.itpiran.net\\\/2023\\\/12\\\/27150508\\\/cropped-ITPIRAN-BLOG-LOGO-2.png\",\"width\":512,\"height\":512,\"caption\":\"\u0628\u0644\u0627\u06af \u062a\u062c\u0627\u0631\u062a \u067e\u0627\u06cc\u062f\u0627\u0631 \u0627\u06cc\u0631\u0627\u0646\u06cc\u0627\u0646\"},\"image\":{\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/#\\\/schema\\\/person\\\/04ed27b919baca468a2273f8e4318f81\",\"name\":\"admin\",\"url\":\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/es\\\/author\\\/admin\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"\u00bfQu\u00e9 es Three.js? - Blog de ITPiran","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:\/\/www.itpiran.net\/blog\/es\/tutorials\/threejs-\u0686\u06cc\u0633\u062a\u061f\/","og_locale":"es_ES","og_type":"article","og_title":"Three.js \u0686\u06cc\u0633\u062a\u061f - \u0628\u0644\u0627\u06af ITPiran","og_description":"\u0645\u0642\u062f\u0645\u0647 Three.js \u06a9\u0627\u0631\u0647\u0627\u06cc \u0632\u06cc\u0627\u062f\u06cc \u0627\u0646\u062c\u0627\u0645 \u0645\u06cc \u062f\u0647\u062f \u0648 \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u062a\u0627 \u062d\u062f\u0648\u062f\u06cc \u06af\u06cc\u062c \u06a9\u0646\u0646\u062f\u0647 \u0628\u0627\u0634\u062f \u06a9\u0647 \u0686\u06af\u0648\u0646\u0647 \u0628\u0627…","og_url":"https:\/\/www.itpiran.net\/blog\/es\/tutorials\/threejs-\u0686\u06cc\u0633\u062a\u061f\/","og_site_name":"\u0628\u0644\u0627\u06af ITPiran","article_published_time":"2024-02-05T13:15:31+00:00","article_modified_time":"2024-02-17T07:07:20+00:00","og_image":[{"width":1793,"height":1110,"url":"https:\/\/cdn.itpiran.net\/2024\/02\/05164430\/Threejs.jpg","type":"image\/jpeg"}],"author":"admin","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"admin","Tiempo de lectura":"1 minuto"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/threejs-%da%86%db%8c%d8%b3%d8%aa%d8%9f\/#article","isPartOf":{"@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/threejs-%da%86%db%8c%d8%b3%d8%aa%d8%9f\/"},"author":{"name":"admin","@id":"https:\/\/www.itpiran.net\/blog\/#\/schema\/person\/04ed27b919baca468a2273f8e4318f81"},"headline":"Three.js \u0686\u06cc\u0633\u062a\u061f","datePublished":"2024-02-05T13:15:31+00:00","dateModified":"2024-02-17T07:07:20+00:00","mainEntityOfPage":{"@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/threejs-%da%86%db%8c%d8%b3%d8%aa%d8%9f\/"},"wordCount":201,"commentCount":0,"publisher":{"@id":"https:\/\/www.itpiran.net\/blog\/#organization"},"image":{"@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/threejs-%da%86%db%8c%d8%b3%d8%aa%d8%9f\/#primaryimage"},"thumbnailUrl":"https:\/\/cdn.itpiran.net\/2024\/02\/05164430\/Threejs.jpg","keywords":["ThreeJS","\u062c\u0627\u0648\u0627\u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0633\u0647 \u0628\u0639\u062f\u06cc"],"articleSection":["\u0622\u0645\u0648\u0632\u0634\u06cc","\u0628\u0631\u0646\u0627\u0645\u0647 \u0646\u0648\u06cc\u0633\u06cc"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.itpiran.net\/blog\/tutorials\/threejs-%da%86%db%8c%d8%b3%d8%aa%d8%9f\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/threejs-%da%86%db%8c%d8%b3%d8%aa%d8%9f\/","url":"https:\/\/www.itpiran.net\/blog\/tutorials\/threejs-%da%86%db%8c%d8%b3%d8%aa%d8%9f\/","name":"\u00bfQu\u00e9 es Three.js? - Blog de ITPiran","isPartOf":{"@id":"https:\/\/www.itpiran.net\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/threejs-%da%86%db%8c%d8%b3%d8%aa%d8%9f\/#primaryimage"},"image":{"@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/threejs-%da%86%db%8c%d8%b3%d8%aa%d8%9f\/#primaryimage"},"thumbnailUrl":"https:\/\/cdn.itpiran.net\/2024\/02\/05164430\/Threejs.jpg","datePublished":"2024-02-05T13:15:31+00:00","dateModified":"2024-02-17T07:07:20+00:00","breadcrumb":{"@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/threejs-%da%86%db%8c%d8%b3%d8%aa%d8%9f\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.itpiran.net\/blog\/tutorials\/threejs-%da%86%db%8c%d8%b3%d8%aa%d8%9f\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/threejs-%da%86%db%8c%d8%b3%d8%aa%d8%9f\/#primaryimage","url":"https:\/\/cdn.itpiran.net\/2024\/02\/05164430\/Threejs.jpg","contentUrl":"https:\/\/cdn.itpiran.net\/2024\/02\/05164430\/Threejs.jpg","width":1793,"height":1110},{"@type":"BreadcrumbList","@id":"https:\/\/www.itpiran.net\/blog\/tutorials\/threejs-%da%86%db%8c%d8%b3%d8%aa%d8%9f\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.itpiran.net\/blog\/"},{"@type":"ListItem","position":2,"name":"\u0622\u0645\u0648\u0632\u0634\u06cc","item":"https:\/\/www.itpiran.net\/blog\/category\/tutorials\/"},{"@type":"ListItem","position":3,"name":"Three.js \u0686\u06cc\u0633\u062a\u061f"}]},{"@type":"WebSite","@id":"https:\/\/www.itpiran.net\/blog\/#website","url":"https:\/\/www.itpiran.net\/blog\/","name":"Blog de ITPiran","description":"Noticias y art\u00edculos sobre comercio sostenible en Ir\u00e1n","publisher":{"@id":"https:\/\/www.itpiran.net\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.itpiran.net\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/www.itpiran.net\/blog\/#organization","name":"Blog sobre negocios iran\u00edes sostenibles","alternateName":"ITPIran Blog","url":"https:\/\/www.itpiran.net\/blog\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.itpiran.net\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/cdn.itpiran.net\/2023\/12\/27150508\/cropped-ITPIRAN-BLOG-LOGO-2.png","contentUrl":"https:\/\/cdn.itpiran.net\/2023\/12\/27150508\/cropped-ITPIRAN-BLOG-LOGO-2.png","width":512,"height":512,"caption":"\u0628\u0644\u0627\u06af \u062a\u062c\u0627\u0631\u062a \u067e\u0627\u06cc\u062f\u0627\u0631 \u0627\u06cc\u0631\u0627\u0646\u06cc\u0627\u0646"},"image":{"@id":"https:\/\/www.itpiran.net\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.itpiran.net\/blog\/#\/schema\/person\/04ed27b919baca468a2273f8e4318f81","name":"administraci\u00f3n","url":"https:\/\/www.itpiran.net\/blog\/es\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/www.itpiran.net\/blog\/es\/wp-json\/wp\/v2\/posts\/14691","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.itpiran.net\/blog\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.itpiran.net\/blog\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.itpiran.net\/blog\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.itpiran.net\/blog\/es\/wp-json\/wp\/v2\/comments?post=14691"}],"version-history":[{"count":2,"href":"https:\/\/www.itpiran.net\/blog\/es\/wp-json\/wp\/v2\/posts\/14691\/revisions"}],"predecessor-version":[{"id":14753,"href":"https:\/\/www.itpiran.net\/blog\/es\/wp-json\/wp\/v2\/posts\/14691\/revisions\/14753"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.itpiran.net\/blog\/es\/wp-json\/wp\/v2\/media\/14692"}],"wp:attachment":[{"href":"https:\/\/www.itpiran.net\/blog\/es\/wp-json\/wp\/v2\/media?parent=14691"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.itpiran.net\/blog\/es\/wp-json\/wp\/v2\/categories?post=14691"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.itpiran.net\/blog\/es\/wp-json\/wp\/v2\/tags?post=14691"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}