Three.js bietet viele Funktionen und seine Verbindung zu anderen 3D-Bereichen kann mitunter verwirrend sein. Da sich sein Anwendungsbereich st\u00e4ndig weiterentwickelt, ist eine Zusammenfassung schwierig, und diese Beobachtungen sind subjektiv.<\/p>\n
Ziel dieses Projekts ist die Entwicklung einer schlanken, benutzerfreundlichen 3D-Bibliothek. Diese Bibliothek bietet Renderings. , , CSS3D und WebGL.<\/p>\n
Dies ist die offizielle Beschreibung aus dem GitHub-Repository. Sie fasst es eigentlich ganz gut zusammen, aber jedes Thema in diesem Satz ist f\u00fcr sich genommen ein sehr umfangreiches Thema, und three.js bietet noch viel mehr.<\/p>\n
Die Bibliothek selbst ist in JavaScript geschrieben und f\u00fcr die Verwendung in einer JavaScript-Umgebung vorgesehen. In den meisten F\u00e4llen bedeutet dies, dass sie clientseitig \u2013 in einem Webbrowser auf einem Ger\u00e4t \u2013 ausgef\u00fchrt wird. Mit Node.js und Headless-Browsern kann sie aber auch serverseitig eingesetzt werden. Man denkt zun\u00e4chst an Rendering \u2013 vielleicht an die Anzeige von Vorschaubildern auf dem Server, es k\u00f6nnte sich aber auch einfach um eine 3D-Berechnung handeln, da three.js \u00fcber eine umfangreiche Mathematikbibliothek verf\u00fcgt. Der Begriff 3D ist sehr weit gefasst. Er kann vieles bedeuten. Meistens denken wir dabei an \u201cGrafik\u201d.<\/p>\n
Die meisten three.js-Projekte, die wir sehen, beinhalten 3D-Grafiken in Echtzeit, bei denen die Interaktion des Nutzers zu unmittelbarem visuellem Feedback f\u00fchrt. Andere Arten von 3D-Grafiken sind entweder verschiedene Effekte oder k\u00fcnstliche Charaktere in Filmen oder verschiedene \u00abRenderings\u00bb, die man in Printmedien oder in Online-Katalogen sieht (beispielsweise ist die Website von IKEA voller 3D-Grafiken, da alle Produktfotos computergeneriert sind).<\/p>\n
Ein Teilbereich davon ist die 3D-Mathematik. 3D-Grafiken sind ohne Mathematik nicht m\u00f6glich, und Programmiersprachen verstehen 3D-Konzepte nicht standardm\u00e4\u00dfig. Hier kommt eine Bibliothek ins Spiel, die diese mathematischen Operationen abstrahiert, sie gegebenenfalls optimiert und eine High-Level-Schnittstelle wie Matrix4 oder .dot() bereitstellt.<\/p>\n
Three.js verf\u00fcgt \u00fcber eine eigene Mathematikbibliothek mit Klassen speziell f\u00fcr 3D-Mathematik. Es gibt zwar eigenst\u00e4ndige Bibliotheken, die sich ausschlie\u00dflich mit dieser Mathematik befassen, aber bei Three ist sie nur ein Teilbereich eines viel gr\u00f6\u00dferen Systems.<\/p>\n
Das Rendern ist eine weitere wichtige Aufgabe der Bibliothek, aber auch hier gestaltet sich die Sache etwas komplizierter. WebGL ist sehr speziell und hebt sich deutlich von anderen Bibliotheken ab.<\/p>\n
Bei Canvas, SVG und CSS liegt die Verantwortung f\u00fcr das 3D-Rendering vollst\u00e4ndig bei den Entwicklern. Diese APIs verf\u00fcgen zwar \u00fcber zahlreiche Bibliotheken zum Zeichnen nicht-dreidimensionaler Objekte oder f\u00fchren diese sogar standardm\u00e4\u00dfig aus (CSS zeichnet 2D-Rechtecke, Canvas verschiedene 2D-Formen), aber f\u00fcr das eigentliche 3D-Rendering sind spezielle Kenntnisse und mathematisches Verst\u00e4ndnis erforderlich.<\/p>\n
Der Clou liegt vor allem in der Abstraktion der Benutzeroberfläche. Zum Beispiel in der Verwaltung des 3D-Zustands eines Elements. <div> Die Umwandlung in 3D über CSS ist sehr schwierig. Es erfordert viel Logik, um die Canvas-API dazu zu bringen, etwas zu zeichnen, das wie 3D aussieht. WebGL ist wesentlich komplexer.<\/p>\n
Three abstrahiert all diese APIs zu etwas so Einfachem wie render(), aber dazu ben\u00f6tigt es eine generische Repr\u00e4sentation dessen, was die "3D-Welt" ist.<\/p>\n
Man kann einen Bereich in three.js identifizieren, der als allgemeine Abstraktion der \u00ab3D-Welt\u00bb dient. Ein Szenengraph ist eine Datenstruktur, die beschreibt, wie Objekte in einer 3D-Szene (Welt) zueinander in Beziehung stehen. Er muss nicht zwingend dreidimensional sein, da er eine praktische M\u00f6glichkeit bietet, jede Vektorgrafikhierarchie zu beschreiben. Genauer gesagt handelt es sich um einen Baum, der von Knoten mit einem Wurzelknoten ausgeht. In three.js ist die Basisklasse f\u00fcr diese Datenstruktur `Object3D`.<\/p>\n
Dies entspricht nahezu exakt dem DOM-Baum. THREE.Scene ist ähnlich. <body> Alles andere ist ein Zweig. Im DOM können wir Elemente platzieren, aber unsere Möglichkeiten sind relativ begrenzt. Rotationen erfolgen üblicherweise um eine Achse, und wir bewegen Elemente nach links\/rechts oder oben\/unten. In einem 3D-Szenengraphen haben wir deutlich mehr Freiheitsgrade.<\/p>\n
Szene drei \u00e4hnelt eher einem virtuellen DOM. Wir f\u00fchren unsere Operationen durch und setzen den Zustand in diesem Baum. Wenn wir eine visuelle Momentaufnahme dieses Zustands ben\u00f6tigen (z. B. in einer Endlosschleife oder bei einer Benutzerinteraktion\/Zustands\u00e4nderung), rufen wir `render(scene)` auf. Bei einer \u00c4nderung soll nicht der gesamte DOM-Baum aktualisiert werden, sondern nur das Element. Wir m\u00fcssen die gesamte Ansicht l\u00f6schen und dann alles neu zeichnen, selbst wenn sich nur ein einziges Element an seiner Position \u00e4ndert.<\/p>\n
Eins <div> In einem <div> Ähnlich der Eltern-Kind-Beziehung THREE.Mesh('sun')->THREE.Mesh('earth') könnte eine CSS-Regel vergleichbar mit einem THREE.Material sein, bei dem eine Beschreibung wie color:'red den Effekt auslöst und ein Objekt rot färbt. Schließlich könnte der Aufruf von threeRenderer.render(scene) dem Laden einer HTML-Seite mit CSS-Regeln durch den Browser entsprechen.<\/p>\n
Mesh, Scene, Camera und Light sind allesamt Unterklassen dieser generischen Klasse. Dadurch k\u00f6nnen Sie der \u201cSzene\u201d ein \u201cObjekt\u201d oder der \u201cKamera\u201d ein \u201cLicht\u201d hinzuf\u00fcgen.<\/p>\n
Eine einfache Struktur kann sehr flach sein. Der Wurzelknoten kann als \u201cWelt\u201d betrachtet werden und kann \u201cBoden\u201d, \u201cHaus\u201d, \u201cSonne\u201d und \u201cKamera\u201d als seine Kinder haben.<\/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>\nDiese Informationen reichen aus, um einen Renderer mit einem visuellen Ergebnis zu versorgen. In manchen Szenen gibt es zwei Raster, die unterschiedliche Dinge darstellen: den Boden und das Haus auf dem H\u00fcgel. Eine Lichtquelle definiert die Beleuchtungsart (Morgenlicht, Mittagslicht, Blitzlicht), und ein Objekt (die Kamera) bestimmt unseren Blickwinkel, unsere Sicht auf die Welt.<\/p>\n
Die Ergebnisse k\u00f6nnen variieren, beispielsweise ist CSS auf eine sehr einfache Darstellung beschr\u00e4nkt, w\u00e4hrend WebGL Schatten und generell eine hohe Wiedergabetreue bieten kann.<\/p>\n
Mithilfe dieser Struktur wird die 3D-Welt verwaltet. Um zu simulieren, wie sich Tageslicht in verschiedenen Jahreszeiten auf ein Haus auswirkt, \u00e4ndern wir programmatisch Position und Richtung des Lichts. Der Szenengraph stellt diesen \u201cPositions\u201d-Hook bereit, aber f\u00fcr die eigentliche Animation ist eigene Logik erforderlich. Eine einfache M\u00f6glichkeit zur Animation einer 3D-Szene bietet three.js mit einer \u201cTweening\u201d-Bibliothek.<\/p>\n
All das trifft vermutlich nur theoretisch zu, und die Szenendarstellung lässt sich möglicherweise nicht beliebig ändern. Dies liegt jedoch hauptsächlich an der Überlappung der “Materialien” mit dem Szenengraphen und deren Kopplung an die Renderings. Beispielsweise ist es nicht möglich, eine Szene zu schattieren. <div> Oder es erscheint nicht als Metall, was ein WebGL-Material beschreiben kann, aber es kann rot gemacht werden, was alle Materialien können.<\/p>\n
Im Kern ist Object3D immer noch generisch, und die r\u00e4umliche und hierarchische Beziehung der Knoten zueinander wird durch einen \u201cSzenengraphen\u201d beschrieben.<\/p>\n
In einfachen Worten: Dies ist die Szenenvariable, die Sie erhalten, nachdem Sie scene.add(my_foo) mehrmals aufgerufen haben.<\/p>\n
WebGL<\/span><\/h2>\nWebGL ist extrem spezifisch und wird wahrscheinlich in etwa 99 % aller bestehenden three.js-Anwendungen verwendet. Es ist ein umfangreiches Thema, daher w\u00e4re es sinnvoll, zun\u00e4chst einen kurzen \u00dcberblick \u00fcber die Alternativen zu geben.<\/p>\n
Canvas, CSS, SVG<\/span><\/h2>\nDas sind alles APIs. Es handelt sich dabei um eine Schnittstelle, mit der Sie als Programmierer dem Browser mitteilen k\u00f6nnen, wie er bestimmte Dinge darstellen soll. CSS ist die gebr\u00e4uchlichste Schnittstelle im Web, denn ohne sie sieht alles wie reiner Text aus. Urspr\u00fcnglich hatte CSS nichts mit 3D zu tun.<\/p>\n
Canvas verwendet zwar dasselbe WebGL-Element zum Zeichnen, hat aber einen anderen Kontext. Dieser Kontext hei\u00dft eigentlich \u201c2D\u201d, aber da 3D ohnehin nur eine Illusion ist und wir immer eine Art 2D-Oberfl\u00e4che zeichnen, ob real oder virtuell, k\u00f6nnen wir diesen Kontext auch zum Zeichnen von 3D-Grafiken verwenden.<\/p>\n
SVG ist eine weitere Nicht-3D-API, die typischerweise zur Beschreibung von Logos oder Symbolen verwendet wird. Da sie jedoch grundlegende Elemente wie Linien darstellen kann, l\u00e4sst sie sich auch in einem 3D-Kontext verwenden (z. B. als Overlay auf einer Karte oder als r\u00e4umlich orientierte UI- oder HUD-Elemente).<\/p>\n
Gemeinsames Merkmal ist, dass keines dieser Konzepte f\u00fcr die 3D-Darstellung gedacht ist. Ein weiteres wichtiges Merkmal ist ihr abstrakter Charakter \u2013 sie waren urspr\u00fcnglich f\u00fcr andere Zwecke konzipiert. Beispielsweise k\u00f6nnen alle drei einen Kreis zeichnen. Bei Canvas ist dies eine explizite Form, bei CSS muss man eventuell abgerundete Ecken verwenden, aber das Endergebnis ist ein sehr direkter Zugriff auf einen Kreis.<\/p>\n
WebGL ist sehr hardwarenah und hat wenig Erfahrung mit 3D-Grafik. 3D-Grafik erfordert spezifische mathematische Berechnungen, und zwar sehr viele. Denken Sie nur einmal an einen hochaufl\u00f6senden Bildschirm und die Anzahl seiner Pixel. Wenn f\u00fcr jedes Pixel berechnet werden muss, wie eine bestimmte Lichtmenge die Oberfl\u00e4che beeinflusst, und das 60 Mal pro Sekunde, summiert sich das zu einer betr\u00e4chtlichen Anzahl an Berechnungen.<\/p>\n
Grafikprozessor<\/h2>\n
Die meisten Computer, wie Laptops, Desktop-PCs, Mobiltelefone und sogar Smartwatches, verf\u00fcgen \u00fcber eine Hardwareeinheit, die 3D-Operationen effizient berechnen und interaktive Grafiken darstellen kann. Diese Einheit wird Grafikprozessor (GPU) genannt.<\/p>\n
Er unterscheidet sich vom Hauptprozessor, weil er f\u00fcr andere Zwecke gebaut wurde \u2013 f\u00fcr spezifische mathematische Operationen, die parallel ausgef\u00fchrt werden.<\/p>\n
So wie wir JavaScript f\u00fcr die Browserprogrammierung verwenden, verwenden wir WebGL f\u00fcr die Grafikkartenprogrammierung.<\/p>\n
Das stimmt zwar im Prinzip, aber in der Praxis sind es zwei v\u00f6llig unterschiedliche Dinge. WebGL besteht sowohl aus JavaScript-Code (den Anweisungen) als auch aus einer komplett anderen Sprache, die die eigentlichen Berechnungen durchf\u00fchrt (GLSL). Man kann durchaus Parallelen zwischen HTML und JavaScript und deren Zusammenspiel auf einer Webseite ziehen.<\/p>\n
Zweidimensional und dreidimensional<\/h2>\n
Nicht nur 3D-Anwendungen profitieren von dieser Hardwarebeschleunigung. Auch die Videoverarbeitung eignet sich daf\u00fcr. Sie k\u00f6nnen die Grafikkarte so programmieren, dass sie Farben oder das Bild in einem Live-Videostream \u00e4ndert.<\/p>\n
WebGL ist eine sehr hardwarenahe Technologie und daher generisch. Es kennt weder 2D- noch 3D-Grafik, aber es kennt Speicher, Puffer, Befehlswarteschlangen, Shader usw.<\/p>\n
Parallele Programmierung unterscheidet sich von der Programmierung in JavaScript. Ein h\u00e4ufiges Problem ist der Zugriff verschiedener Threads auf eine gemeinsam genutzte Variable.<\/p>\n
Dieses andere Paradigma bedeutet, dass es eine v\u00f6llig andere Sprache namens GLSL gibt. Es handelt sich um eine Shading-Sprache, die in nahezu jeder Low-Level-Grafik-API enthalten ist. Hier wird die eigentliche Logik f\u00fcr diese komplexen Berechnungen implementiert, und der einzige Vorteil besteht darin, dass kein Maschinencode geschrieben werden muss.<\/p>\n
Der andere Teil der WebGL-API sind die JavaScript-Bindings, \u00fcber die man der GPU Anweisungen gibt. Ein Shader weist an, \u201cBerechnungen A durchzuf\u00fchren\u201d, und ein Binding f\u00fchrt diese eine Million Mal aus.<\/p>\n
Es obliegt dem Programmierer, zu berechnen, was A ist. Es k\u00f6nnte etwas mit 3D zu tun haben oder ein Kernel sein, der das Video unscharf macht.<\/p>\n
Wenn man anf\u00e4ngt, diese Berechnungen und diese Befehle zu abstrahieren, erh\u00e4lt man three.js.<\/p>\n
Renderings, die zusammenarbeiten<\/h2>\n
Ein besonders sinnvoller Anwendungsfall ist die Kombination verschiedener Renderer, um Objekte in 3D darzustellen. WebGL kann zwar komplexe Berechnungen durchf\u00fchren und sehr realistische Bilder erzeugen, ist aber bei der Darstellung von Text und Linien weniger effektiv. Eine zus\u00e4tzliche Ebene f\u00fcr gerenderten Text l\u00e4sst sich mit CSS und Canvas-Renderern realisieren, w\u00e4hrend Pfade und Linien mithilfe von SVG dargestellt werden k\u00f6nnen.<\/p>\n
THREE.WebGLRenderer<\/h2>\n
Diese gesamte Low-Level-Logik wird durch eine WebGLRenderer-Klasse in three.js abstrahiert. Dadurch wird der W\u00fcrfel in eine Reihe von Zahlen im GPU-Speicher umgewandelt.<\/p>\n
Ironischerweise ist es der einzige three.js-Renderer, der keine 3D-Grafik ben\u00f6tigt, aber dennoch die beste Option daf\u00fcr. Die anderen Renderer simulieren 3D mithilfe von 2D-APIs, w\u00e4hrend WebGL 3D bewusst mit einer generischen parallelen Rechen-API realisiert. Das schlie\u00dft jedoch nicht aus, dass man ihn ausschlie\u00dflich zur Verarbeitung eines Live-Videostreams verwenden k\u00f6nnte. Er abstrahiert ausreichend von WebGL, um daf\u00fcr n\u00fctzlich zu sein, allerdings nutzt man wahrscheinlich nur ein Drittel der Bibliothek. Man k\u00f6nnte beispielsweise eine extrem reaktionsschnelle Benutzeroberfl\u00e4che mit WebGL entwickeln oder ein Jump-\u2019n\u2019-Run-Spiel im Stil von Super Mario, f\u00fcr das three.js weiterhin ein hervorragendes Werkzeug w\u00e4re.<\/p>\n
Die Tatsache, dass Sie nur ein Drittel der Bibliothek verwenden, bedeutet, dass ein anderes Tool f\u00fcr diesen Zweck besser geeignet sein k\u00f6nnte, oder dass Sie einfach eine Teilmenge von three.js erstellen k\u00f6nnten. Sowohl das Super-Mario- als auch das Videoverarbeitungsbeispiel ben\u00f6tigen m\u00f6glicherweise nur PlaneGeometry und eventuell einen Materialtyp.<\/p>\n
drei Mathematik<\/h2>\n
JavaScript-Code, der bestimmte mathematische Operationen in 3D durchf\u00fchrt. JavaScript verf\u00fcgt standardm\u00e4\u00dfig \u00fcber `Math.pow()`, jedoch nicht \u00fcber `Quaternion.inverse()`. Mit diesen Klassen k\u00f6nnen wir Algorithmen schreiben, die kein Rendering ben\u00f6tigen \u2013 beispielsweise ein Spielserver, der \u00fcberpr\u00fcft, wer auf wen schie\u00dft, indem er viele Strahlen aussendet, ohne etwas zu zeichnen.<\/p>\n
drei Szenengraph<\/h2>\n
Eine Familie von Object3D-Unterklassen bildet eine Baumdatenstruktur, die eine \u201c3D-Welt\u201d und die Beziehungen der Objekte darin beschreibt. Sie ist konzeptionell abstrakt, l\u00e4sst sich aber durch spezifische Rendering-Methoden visualisieren, sobald man sich mit dem Code auseinandersetzt.<\/p>\n
drei Renderings<\/h2>\n
Die Schicht, die diesen generischen Graphen in eine visuelle Darstellung auf dem Bildschirm oder in einem Puffer \u00fcbersetzt (z. B. wird er serverseitig erstellt). Sie verwendet verschiedene Technologien, um dieses Ziel zu erreichen.<\/p>\n
THREE-WebGLRenderer<\/h2>\n
Ein spezieller Renderer, der Hardwarebeschleunigung erm\u00f6glicht und viele 3D-Konzepte beherrscht, aber auch f\u00fcr 2D (und sogar allgemeine Berechnungen) verwendet werden kann. Meiner Meinung nach sind dies die Hauptbausteine von three.js. Ich verwende meist den Begriff \u201c3D\u201d anstelle von \u201cGrafik\u201d, aber das gilt nur f\u00fcr den WebGLRenderer.<\/p>\n
Three.js ist keine Spiele-Engine.<\/h2>\n
Nicht jeder, der 3D-Grafiken im Web ben\u00f6tigt, entwickelt Spiele. Game-Engines optimieren typischerweise weit mehr als nur die Beschreibung und Darstellung von 3D-Welten. Unterschiedliche Spiele haben unterschiedliche Anforderungen, und die Physik- und Rendering-Systeme f\u00fcr Echtzeitstrategie- und Ego-Shooter unterscheiden sich wahrscheinlich stark. All das bedeutet mehr Code, und f\u00fcr jemanden, der lediglich ein 3D-Modell f\u00fcr einen Produktkatalog erstellen m\u00f6chte, ist das nicht nur unn\u00f6tig, sondern auch unerw\u00fcnscht. Nat\u00fcrlich k\u00f6nnte man eine eigene Game-Engine entwickeln und drei Module f\u00fcr das Rendering und die Erstellung von Engine-Bl\u00f6cken verwenden.<\/p>\n
Three.js l\u00e4dt nicht viel.<\/h2>\n
Der Core verf\u00fcgt zwar \u00fcber mehrere Loader f\u00fcr bestimmte Assets, aber alle g\u00e4ngigen Formate wie glTF oder FBX sind unabh\u00e4ngig. Three.js ist es egal, wie die Assets stammen, solange sie korrekt geparst und zu einem 3D-Objekt verarbeitet werden. F\u00fcr Three.js gibt es keinen Unterschied zwischen einem Mesh aus einer glTF-Datei und einer prozedural generierten Kugel. Viele kreative Beispiele verwenden W\u00fcrfel und Kugeln und laden au\u00dfer Three.js selbst nichts. Die Core-Loader sind sehr generisch und laden Bilder und Dateien. Sie repr\u00e4sentieren Three.js-Objekte wie Materialien oder Texturen direkt. Formatspezifische Loader basieren auf diesen Bausteinen.<\/p>\n
<\/p>","protected":false},"excerpt":{"rendered":"Einleitung Three.js bietet viele Funktionen und die Arbeit damit kann mitunter etwas verwirrend sein\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\/de\/tutorials\/threejs-\u0686\u06cc\u0633\u062a\u061f\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\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\/de\/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=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"1\u00a0Minute\" \/>\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\":\"de\",\"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\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.itpiran.net\\\/blog\\\/tutorials\\\/threejs-%da%86%db%8c%d8%b3%d8%aa%d8%9f\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@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\":\"de\"},{\"@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\":\"de\",\"@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\\\/de\\\/author\\\/admin\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Was ist Three.js? \u2013 ITPiran-Blog","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\/de\/tutorials\/threejs-\u0686\u06cc\u0633\u062a\u061f\/","og_locale":"de_DE","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\/de\/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":{"Verfasst von":"admin","Gesch\u00e4tzte Lesezeit":"1\u00a0Minute"},"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":"de","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":"Was ist Three.js? \u2013 ITPiran-Blog","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":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.itpiran.net\/blog\/tutorials\/threejs-%da%86%db%8c%d8%b3%d8%aa%d8%9f\/"]}]},{"@type":"ImageObject","inLanguage":"de","@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":"ITPiran Blog","description":"Iranische Nachrichten und Artikel zum Thema nachhaltiger Handel","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":"de"},{"@type":"Organization","@id":"https:\/\/www.itpiran.net\/blog\/#organization","name":"Nachhaltiger iranischer Unternehmensblog","alternateName":"ITPIran Blog","url":"https:\/\/www.itpiran.net\/blog\/","logo":{"@type":"ImageObject","inLanguage":"de","@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":"Administrator","url":"https:\/\/www.itpiran.net\/blog\/de\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/www.itpiran.net\/blog\/de\/wp-json\/wp\/v2\/posts\/14691","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.itpiran.net\/blog\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.itpiran.net\/blog\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.itpiran.net\/blog\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.itpiran.net\/blog\/de\/wp-json\/wp\/v2\/comments?post=14691"}],"version-history":[{"count":2,"href":"https:\/\/www.itpiran.net\/blog\/de\/wp-json\/wp\/v2\/posts\/14691\/revisions"}],"predecessor-version":[{"id":14753,"href":"https:\/\/www.itpiran.net\/blog\/de\/wp-json\/wp\/v2\/posts\/14691\/revisions\/14753"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.itpiran.net\/blog\/de\/wp-json\/wp\/v2\/media\/14692"}],"wp:attachment":[{"href":"https:\/\/www.itpiran.net\/blog\/de\/wp-json\/wp\/v2\/media?parent=14691"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.itpiran.net\/blog\/de\/wp-json\/wp\/v2\/categories?post=14691"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.itpiran.net\/blog\/de\/wp-json\/wp\/v2\/tags?post=14691"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}