Verwenden von Three.js zum Hinzufügen von 3D-Elementen zu Ihren Websites

Flat Design ist großartig, aber 3D-Elemente heben Webdesign-Layouts auf eine neue Ebene. Websites mit animierten 3D-Grafiken und interaktiven 3D-Szenen werden mehr denn je zum Mainstream. Kunden möchten diese Art von Designs jetzt auf ihren Websites und werden Sie danach fragen. Zu lernen, wie Sie 3D-Design in Ihre Webdesign-Projekte integrieren, wird Ihren Karriereweg nur verbessern und Ihnen mehr Kunden bringen. Zum Glück sind Ressourcen wie Three.js für Divi-Designer und -Entwickler leicht verfügbar, um benutzerdefinierte 3D-Elemente zu ihren Websites hinzuzufügen.

In diesem Beitrag betrachten wir die Grundlagen von Three.js und warum es eine gute Wahl ist, um 3D-Elemente zu Ihren Websites hinzuzufügen. Ja, sogar Ihre Divi-Websites. Um mit Three.js zu beginnen, benötigen Sie einige Programmierkenntnisse, insbesondere HTML, CSS und Javascript. Wenn Sie noch Programmieren lernen, folgen Sie von Anfang an der Schritt-für-Schritt-Anleitung auf der Three.js-Website. Wenn Ihnen die Terminologie zum Hinzufügen des Codes neu ist, stehen Ihnen zahlreiche Tutorials zur Verfügung, die Sie durch die technischen Schritte führen. Ich schlage vor, dass Sie sich einige Videos ansehen, vielleicht einen Kurs in Skillshare oder Udemy besuchen, um ein Gefühl dafür zu bekommen, wie Sie die Three.js-Bibliothek in Ihre Designs integrieren können.

Lasst uns anfangen.

Was ist Three.js

Was ist Three.js?

Three.js ist eine Javascript-3D-Bibliothek, die <canvas>-, <svg>-, CSS3D- und WebGL-Renderer bereitstellt. Es bringt 3D-Designs in Ihren Browser, ohne dass ein Plugin erforderlich ist. Mit der Bibliothek können Sie einfache 3D-Elemente, komplexe 3D-Interaktionen und kreative animierte Spiele erstellen. Three.js ist eine Open-Source-Bibliothek mit einem Github-Repository, in dem Benutzer ihre eigenen Three.js-Kreationen teilen können.

Von allen Renderern, die Three.js abdeckt, wird WebGL am häufigsten verwendet. Allein das Erstellen von 3D-Elementen mit WebGL erfordert viele Codezeilen und viel mathematisches Wissen. Three.js macht es viel einfacher, eine Szene zu erstellen und sie mit WebGL zu rendern.

Verstehen einer 3D-Szene und der Three.js-Terminologie

Um mit Three.js eine 3D-Animation zu erstellen, müssen Sie zunächst verstehen, wie eine 3D-Szene aufgebaut ist. Die drei Elemente, die zum Erstellen einer 3D-Einstellung erforderlich sind, sind die folgenden:

1. Die Szene
2. Die Kamera
3. Der Renderer

In der Szene richten Sie alle 3D-Elemente ein, die Three.js anzeigt. Optisch ähnelt es einer Theaterbühne oder einem Fernseher. Die Kamera ist der Blickwinkel der Szene und wie ein Mensch die Elemente der Szene technisch sehen würde. Der Renderer fügt alles zusammen und zeichnet die Szene. Wenn Sie 3D-Animationen fließend beherrschen, erkennen Sie dies sicherlich als Standard für den Aufbau einer Szene.

Sobald die Szene eingerichtet ist, werden Objekte darin platziert. Objekte werden in drei Schritten erstellt:

1. Die Geometrie
2. Das Material
3. Das Netz

Die Geometrie eines Objekts ist das Skelett oder der grundlegende Umriss einer Form. Um der Geometrie eine Farbe oder Textur zu geben, wird das Material aufgetragen. Die Kombination aus Geometrie und Material wird als Netz bezeichnet .

Die Three.js-Bibliothek enthält bereits viele grundlegende Geometrien, die Sie verwenden können. Sie müssen nicht von Grund auf neu gebaut werden. Sie müssen sie nur aus der Bibliothek in Ihren Code aufrufen und dann anpassen. Abgesehen von der Verwendung von Hex-Codes für Farben als Material können Sie Texturen mit Bildern erstellen oder in Texturbibliotheken finden.

Nachdem die Szene eingerichtet und Geometrien hinzugefügt wurden, fügen Sie Funktionen hinzu, um die Szene zu beleuchten, die Objekte zu animieren und vieles mehr. Abgesehen von den grundlegenden Objekten, die in der Three.js-Bibliothek verfügbar sind, können Sie auch andere 3D-Bilder aus Online-Bibliotheken hochladen oder solche, die Sie in Blender erstellen.

Erste Schritte mit Three.js

Es könnte nicht einfacher sein, sich mit Three.js vertraut zu machen. Auf der Three.js-Website finden Sie die gesamte Dokumentation, die Sie benötigen, um zu verstehen, wie die Bibliothek funktioniert und wie Sie sie verwenden können.

Auf der Three.js-Website und auf ihrem Github finden Sie eine Live-Version des Codes für die einfachste Three.js-Anwendung. Sie verwenden JSFiddle, aber Sie können es auch auf CodePen oder Codesandbox.io sehen

Ich schlage vor, dass Sie die Schritte auf der Three.js-Website befolgen, um wirklich zu verstehen, wie alles funktioniert. Entweder mit Codepen, Ihrem Terminal oder Ihrer bevorzugten Codiersoftware. Die gesamte Three.js-Bibliothek steht auf der Threejs.org-Website zur Verfügung, um sie zu verwenden, sobald Sie Ihre Szene festgelegt und erkannt haben, was getan werden kann. Unten sehen Sie die grundlegende Three.js-Anwendung, die mit JSFiddle arbeitet. Klicken Sie auf „Mit JSFiddle bearbeiten“, um mit dem Code zu spielen.

Three.js-Lernressourcen

Da Three.js eine Open-Source-API ist, passieren immer Dinge in ihrem GitHub-Repository. Das heißt, es gibt immer viel Neues zu lernen. Zum Glück haben sie ein digitales Handbuch erstellt, das ständig für Änderungen aktualisiert wird. Sie finden es unter Discoverthreejs.com. Dies ist bei weitem die beste Ressource, die es gibt. Wenn Sie eine Schritt-für-Schritt-Anleitung zum Einrichten der Anwendung und Verwendung der Bibliotheksressourcen benötigen, finden Sie hier einen großartigen Kurs zu Skillshare, der Sie durch alle Schritte in der Three.js-Dokumentation führt.

Ebenso zeigt Ihnen dieses YouTube-Tutorial die Grundlagen zum Einrichten einer Szene mit Three.js, erwartet jedoch, dass Sie grundlegende Kenntnisse in der Webentwicklung haben.

Wenn Sie tief in Three.js und WebGL eintauchen möchten, erklärt dieser Udemy-Kurs alles und verspricht, dass Sie am Ende fließend 3D-Inhalte erstellen.

Auf der Suche nach einem detaillierten, schnellen und schmutzigen Tutorial? Dieses Schritt-für-Schritt-Code-Tutorial zu CreativeBloq ist genau das, was Sie brauchen.

Three.js-Beispiele

Es gibt nichts Besseres als Inspiration, um mit Three.js eigene 3D-Designs zu entwerfen. Um einige ziemlich unglaubliche Three.js-Kreationen zu sehen, besuchen Sie einfach ihre Website und erkunden Sie sie.

Verwenden von Three.js mit Divi

Die Verwendung von Three.js mit Divi ist recht einfach. Sie müssen nur die Javascript-Bibliothek zu Ihren Projektdateien hinzufügen und sie zu Ihrem HTML-Code hinzufügen. Um eine Anwendung zu einem Divi-Layout hinzuzufügen, erstellen Sie zuerst das 3D-Design separat in Ihrer bevorzugten Codierungssoftware oder auf dem Terminal Ihres Computers. Wenn der Build fertig ist, kopieren Sie das Javascript in ein Codemodul. Stellen Sie sicher, dass Sie öffnende und schließende <script>-Tags verwenden.

Abschluss

Three.js ist eine leistungsstarke Ressource zum Hinzufügen von 3D-Elementen zu einer Website. In diesem Beitrag haben wir uns die Grundlagen der Funktionsweise von Three.js angesehen. Die API hat so viel zu bieten, dass Sie wirklich tief eintauchen und experimentieren müssen. Die Möglichkeiten sind wirklich endlos. Von einem einfachen rotierenden Würfel bis hin zu einem komplexen interaktiven Spiel in einer reichen digitalen Welt. Was werden Sie mit Three.js erstellen?

Ausgewähltes Bild über thermb / shutterstock.com