Mit der WebGL-API können sie 3D-Grafiken im Browser anzeigen, ohne dass Plugins benötigt werden.
WebGL, das auf allen modernen Browsern weit verbreitet ist, ermöglicht die Arbeit mit hardwarebeschleunigten 3D-Grafiken in JavaScript und eröffnet eine Vielzahl von Möglichkeiten für browserbasierte Anwendungen und Spiele. In dem folgenden Beitrag präsentieren wir ihnen 20 erstaunliche Beispiele von WebGL in Aktion.
WebGL selbst ist eher im Low-Level-Bereich angesiedelt. Es existieren eine Reihe von Bibliotheken und sogar Game-Engines, die eine höhere Funktionalität bieten.
In diesem Tutorial werden wir ihnen zeigen, wie Sie eine App oder Website erstellen können, die WebGL in Kombination mit three.js verwendet, einer kostenlosen Open-Source-Bibliothek, die die Abstraktion von WebGL ermöglicht.
Three.js einbinden.
Sie müssen zunächst Three.js einbinden. Sobald Sie den neuesten Build haben, legen Sie three.js in ihren Projektordner. Wir werden es dann als Skript zu unserer Seite hinzufügen, wie jede andere JavaScript-Bibliothek. Wir werden unseren eigenen Code in eine separate JavaScript-Datei einfügen.
Setzen Sie die Szene.
Für den Einstieg in WebGL benötigen wir drei Dinge: eine Szene, eine Kamera und einen Renderer. Eine Szene ist, wo wir Objekte platzieren, die von three.js angezeigt werden sollen. Eine Kamera ist der Standpunkt, aus dem wir sie sehen werden. Der Renderer bringt die beiden zusammen und zeichnet den Bildschirm entsprechend. Sobald wir diese eingerichtet haben, fügen wir den Renderer dem Dokument hinzu.
Erstellen einer Schleife.
Als nächstes müssen wir eine Schleife erstellen, um unsere Szene tatsächlich zu rendern. Wir tun dies mit der renderer.render() Funktion, aber der Schlüsselteil ist die rekursive Verwendung von requestAnimationFrame (), einer integrierten Funktion, die es dem Browser ermöglicht, einen anderen Frame anzufordern, wenn er bereit ist, einen zu zeichnen. Die Verwendung von requestAnimationFrame() ist einfacher und führt zu einer flüssigeren Animation, als der Versuch, das Zeichnen von Frames selbst zu timen.
Erstellen von Basisobjekten.
Jetzt können wir anfangen, einige Objekte zu unserer Szene hinzuzufügen. Wir können dies tun, indem wir Mesh-Objekte erstellen und diese hinzufügen. Ein Mesh besteht aus einer Geometrie (der Form des Objekts) und einem Material (der Farbe oder Textur, mit der es bemalt wurde). Wir werden einige grundlegende Objekte erstellen, indem wir drei verschiedene Geometrien definieren und ihnen verschiedene Farbmaterialien zuweisen.
Eine Position angeben.
Standardmäßig werden Objekte am Ursprung (x=0, y=0, y=0, z=0) der Szene hinzugefügt, wo sich auch unsere Kamera befindet, so dass wir auch für sie eine Position angeben müssen. Wir sind dann bereit, die Meshes zu unserer Szene hinzuzufügen, was bedeutet, dass sie automatisch in der animate() Schleife gerendert werden.
Hinzufügen einer Light Source.
Wenn Sie ihre Seite jetzt ansehen, werden Sie feststellen, dass die Dinge ein wenig flach aussehen. Auf die Objekte wird keine Beleuchtung angewendet, so dass sie einfarbige Grundfarben sind und zweidimensional wirken. Um dies zu beheben, müssen wir von MeshBasicMaterial auf ein Material wechseln, das Beleuchtung unterstützt, wir werden MeshLambertMaterial verwenden. Wir müssen auch eine Light Source zur Szene hinzufügen.
Verschieben der Source.
Jetzt sind wir am Ziel. Sie sollten sehen, was ganz offensichtlich dreidimensionale Objekte auf ihrer Seite sind. Was wir noch nicht getan haben, ist die volle Ausnutzung der animate() Funktion. Nehmen wir ein paar Änderungen vor, damit sich unsere Light Source in einer kreisförmigen Bewegung über den Objekten bewegt.
Textur hinzufügen.
In der Praxis wollen wir wahrscheinlich nicht, dass unsere Objekte flache Farben haben. Es wäre eher typisch, ihnen eine Textur aus einer Datei zu geben. Wir können dies mit THREE.TextureLoader() tun. Lassen Sie uns ändern, wie unser Kegelobjekt erstellt wird, um eine Textur zu verwenden, die wir aus einer Datei geladen haben. Die Funktion wird beim Laden der Datei aufgerufen.
Machen Sie es natürlich.
Noch wirkt das Ergebnis nicht natürlich. Die Textur sieht sehr flach aus und reagiert nicht auf die Beleuchtung. Wir können dies durch den Einsatz von Bump-Mapping lösen, das es uns ermöglicht, helle und dunkle Teile eines Bildes zu verwenden, um Texturen auf der Oberfläche eines Objekts zu simulieren. Wir werden das Material auf MeshPhongMaterial umstellen, was es uns erlaubt, ein bumpMap-Attribut anzugeben.
Hinzufügen von Steuerelementen.
Als letzten Schritt geben Sie dem Benutzer ein wenig Kontrolle über die Szene. Um die Möglichkeit zum Schwenken hinzuzufügen, gibt es eine zusätzliche Bibliothek, die mit three.js ausgeliefert wird, was es unglaublich einfach macht, genau das zu tun. Stellen Sie sicher, dass Sie OrbitControls.js aus dem Paket three.js in ihr Projektverzeichnis entpacken und in ihre Seite aufnehmen. Dies ist eine von mehreren Kontrollbibliotheken, die mit three.js ausgeliefert werden, um gängige Arten der Kamerasteuerung zu erfüllen.
Jetzt müssen wir nur noch ein THREE.OrbitControls-Objekt erstellen und es auf unsere Kamera anwenden. Den Rest erledigt die Bibliothek für Sie: Sie müssen nicht auf Klicks, Mausbewegungen etc. achten. Sie können ihre Objekte auch zurück zum Ursprungspunkt verschieben und stattdessen die Kamera versetzen, damit sie ordentlich um die Objekte schwenken kann.
Damit sind wir mit unserem Beitrag durch. Sie sollten drei Objekte mit unterschiedlichen Texturen, etwas dynamisches Lighting und eine benutzergesteuerte Kamera zum Spielen haben.
Vielen Dank für ihren Besuch.