Share
Three.js ist eine Open-Source-JavaScript-Bibliothek / API, mit der animierte 3D-Computergrafiken in einem Webbrowser erstellt und angezeigt werden können, die mit dem HTML5-Canvas-Element, WebGL und SVG kompatibel sind. In diesem How to Learn-Artikel erfahren Sie mehr über die Möglichkeiten dieser Engine und teilen Ressourcen und Vorschläge, damit Sie sofort mit der Entwicklung von Spielen beginnen können.
Seit Three.js 2010 erstmals von Ricardo Cabello bei GitHub veröffentlicht wurde, wurde die Codebasis kontinuierlich gepflegt und von einer wachsenden und unterstützenden Community verbessert. Die integrierten Funktionen sind umfangreich und umfassen:
Über 100 Beispiele, die diese Funktionen (und mehr) veranschaulichen, sind im Haupt-Repository enthalten. Viele andere Websites bieten Sammlungen von Beispielen mit verfügbarem Quellcode. Da die Bibliothek in Javascript geschrieben ist, ist es außerdem einfach zu installieren und zu implementieren.
Ein futuristisches Rennspiel von Thibaut Despoulain:
Ein Autorennspiel von Jasmine Kent:
Verwandte Artikel zur Entwicklung finden Sie im Gamasutra-Blog von Jasmine.
Ein in 3D gerendeter 2.5D-Plattformer mit eingebautem Live-Level-Editor, erstellt von Mario Gonzalez:
Ein von Jerome Etienne kreiertes Marmor- / Fußballspiel:
Ein Labyrinth-Spiel von Rye Terrell:
Ein 3D-Ping-Pong-Spiel, das Video-Chat in das von Google erstellte Spiel integriert:
Weitere Informationen finden Sie auf der Chrome-Experimentseite des Spiels und in diesem Artikel hinter den Kulissen.
Eine interaktive Reise von Walt Disney und UNIT9
Weitere Informationen finden Sie auf der Seite Chrome-Experimente des Spiels.
Da es sich bei Three.js um eine Javascript-Bibliothek handelt, ist das Einrichten Ihrer Entwicklungsumgebung besonders einfach: Die einzigen Voraussetzungen sind ein Texteditor und ein Webbrowser. Allerdings bieten Texteditoren mit Funktionen wie Syntaxhervorhebung / -falzung, Klammerübereinstimmung, Dokumentstruktur usw. wie Notepad ++ oder Sublime Text eine bessere Codierungserfahrung.
Sowohl für Google Chrome als auch für Mozilla Firefox ist die WebGL-Unterstützung hervorragend. Google Chrome verfügt über besonders hilfreiche integrierte Tools, die den Workflow-Prozess erheblich vereinfachen können, z. B. eine Konsole, die zum Debuggen und Prüfen von Javascript-Werten und -Objekten verwendet werden kann, und Workspace-Einstellungen, mit denen Sie Quelldateien bearbeiten und speichern können aus dem Browser heraus. Weitere Informationen finden Sie auf der Chrome DevTools-Site.
Spitze: Es ist auch möglich, mit Three.js vollständig online zu schreiben, wobei Dienste wie jsFiddle verwendet werden, wie dieses Beispiel zeigt. Diese Option wird jedoch normalerweise nur für das Teilen von Beispielen oder Demonstrationen mit geringen Code-Mengen verwendet.
Um Three.js einzurichten, gehen Sie zuerst zum GitHub-Repo. Es gibt eine Schaltfläche mit der Aufschrift "ZIP herunterladen", mit der Sie den gesamten Code im Repository als ZIP-Datei herunterladen können. (Es gibt andere Alternativen, z. B. das Klonen oder das Verzweigen des Repositorys mit Git, die für den Durchschnittsbenutzer nicht erforderlich sind. Diese Optionen sind in erster Linie nützlich, wenn Sie beabsichtigen, zum Quellcode oder zur Online-Dokumentation beizutragen.)
zusammenhängende PostsNachdem Sie die Datei heruntergeladen und in ein Verzeichnis Ihrer Wahl entpackt haben, bleibt ein wichtiger Schritt, bevor Sie die meisten Beispiele auf Ihrem eigenen Computer anzeigen können. Viele Three.js-Projekte beinhalten das Laden von Inhalten aus externen Dateien (z. B. Bildern). Aus Sicherheitsgründen schränken Webbrowser dieses Verhalten jedoch standardmäßig ein. Sie können dieses Problem lösen, indem Sie entweder die Sicherheitseinstellungen Ihres Webbrowsers ändern oder Dateien von einem lokalen Server ausführen.
Die erste Option ist am einfachsten. Zum Ändern der Einstellungen für Google Chrome in Windows können Sie beispielsweise eine Verknüpfung für Chrome erstellen und den Pfad so bearbeiten, dass er die Markierung enthält --Dateizugriff aus Dateien zulassen). Anweisungen für beide Optionen finden Sie im offiziellen Wiki auf der Seite Wie man Dinge lokal ausführt.
Three.js ist in Javascript geschrieben. Es wird daher empfohlen, dass Sie Kenntnisse in dieser Sprache haben. Dafür gibt es unzählige Ressourcen, die im Internet frei verfügbar sind. Zwei besonders herausragende interaktive Ressourcen sind:
Informationen zum Einrichten einer Basisszene in Three.js (einschließlich einer Diskussion über Szenen, Kameras, Renderer, Netze und Animationsschleife) finden Sie im offiziellen Handbuch. Eine weitere Einführung in das Erstellen einer Basisszene finden Sie im Artikel Erste Schritte mit Three.js von Paul Lewis
Eine ausführlichere Einführung in die Möglichkeiten von Three.js ist die hervorragende Präsentation von James Williams (ein Video und eine Diashow) auf Introduction to WebGL und Three.js.
Die Three.js-Dokumentation, die unter http://threejs.org/docs/ zur Verfügung steht, ist ein in Arbeit befindlicher Prozess, aber ein guter erster Ort, um eine Vorstellung von vielen der verfügbaren Funktionen zu erhalten.
Ein umfassenderer Weg, um mehr über das Innenleben der Bibliothek zu erfahren, ist das Durchsuchen des Quellcodes der offiziellen Beispielsammlung unter http://threejs.org/examples/, die häufig von dem Aspekt der Bibliothek betitelt werden, den sie am häufigsten verwenden prominent kennzeichnen. Eine weitere Ressource, die aus vereinfachten und ausführlich kommentierten Beispielen für Anfänger besteht, ist die Sammlung unter http://stemkoski.github.io/Three.js/. Viele Three.js-Projekte werden auf Twitter mit dem Hashtag #ThreeJS oder auf dem Three.js-Subreddit angekündigt.
Zwei besonders beeindruckende und inspirierende Sammlungen fortgeschrittener Three.js-Projekte sind:
Einige Websites und Blogs, die sich mit der Entwicklung beschäftigen und häufig über Three.js-Projekte verfügen, umfassen:
Um mehr über die Grundlagen der 3D-Computergrafik zu erfahren, besuchen Sie Interactive 3D Graphics, einen kostenlosen Online-Kurs, der von Eric Haines unterrichtet wird und Video-Vorträge und interaktive Programmierübungen mit Three.js bietet.
Wenn Sie über die von Three.js bereitgestellten Funktionen hinaus weitere Funktionen integrieren möchten, ist es leicht (und üblich), zusätzliche Javascript-Bibliotheken einzubauen, wie zum Beispiel:
Wenn Sie erweiterte Grafikeffekte erstellen möchten, die über die in Three.js enthaltenen hinausgehen, müssen Sie lernen, Shader zu schreiben. Hierbei handelt es sich um Funktionen, die direkt auf der GPU ausgeführt werden. Zwei hervorragende Einführungen in Shader, die speziell für Benutzer von Three.js geschrieben wurden, sind:
Wenn Sie daran interessiert sind, Ihr Projekt für Android oder iOS bereitzustellen, ist CocoonJS von Ludei eine Plattform, die genau das tut. Der Prozess ist gut dokumentiert und relativ einfach, da der Großteil der Arbeit vom CocoonJS Cloud Compilation System automatisiert wird.
Wenn Sie eine Frage haben, die Sie nicht anhand der oben genannten Beispiele oder Ressourcen herausfinden können, ist Stack Overflow, der führende Ort für Fragen und Antworten für professionelle und enthusiastische Programmierer. Suchen Sie zunächst nach, ob Ihre Frage bereits gestellt wurde. Wenn nicht, registrieren Sie sich für ein Konto und fragen Sie es dort!
Wenn Ihnen diese Ressourcen zur Verfügung stehen, können Sie mit der Erstellung beginnen! Three.js verfügt über eine aktive und lebendige Community, sodass Sie immer Fragen haben, an Diskussionen teilnehmen und Ihre Arbeit präsentieren können. Ihnen viel Glück bei Ihren Bemühungen!
Accentsconagua