10 atemberaubende Open-Source-Beispiele für Three.js in Aktion

Es mag verrückt erscheinen, aber Sie können tatsächlich 3D-Objekte mit JavaScript erstellen. Die meisten Webentwickler verlassen sich dabei auf Bibliotheken wie Three.js.

Aber es ist ein so detaillierter Prozess, dass sich nicht jeder die Mühe macht, sich damit zu beschäftigen. Nun, wenn Sie neugierig auf 3D-JS-Zeug sind, lernen Sie am besten, indem Sie andere studieren. Genau dafür habe ich diese Galerie gemacht.

Dies sind einige der besten Three.js-Projekte, die ich auf CodePen gehostet finden konnte. Sie verfügen über eine Reihe verschiedener Stile und Eigenschaften, die Ihren kreativen Motor auf Hochtouren bringen.

1. Low-Poly-Erde

Mit einem einzigen HTML-Element und ein paar Dutzend CSS/JS-Zeilen haben wir diese Low-Poly-Erde von Entwickler Sam Saccone.

Das mag auf den ersten Blick nicht viel erscheinen. Aber es ist eine der prominenteren Ideen, die ich gesehen habe, und es verwendet sogar einen benutzerdefinierten Animationseffekt. Die Landmassen ragen sogar aus der Erde heraus und verleihen ihr ein viel realistischeres Aussehen.

Jeder, der Three.js schon einmal verwendet hat, sollte wissen, wie großartig das ist.

Es ist sicherlich ähnlichen Projekten einen Schritt voraus – vor allem wegen seiner kleineren Codebasis.

2. Kugeln

Dieses seltsame planetenähnliche Projekt verwendet auch Three.js mit einem ziemlich ordentlichen Effekt. Spheres läuft auf dem Stylus-Präprozessor, den Sie in das CSS importiert sehen können.

Es läuft auch ohne HTML – was es wirklich zu einem sehenswerten Anblick macht. Es ist alles JS, alles 3D und läuft perfekt in jedem modernen Browser.

Die kleineren Kugeln gleiten mit geometrischen Funktionen aus der JS-Bibliothek über die größere Kugel. Es scheint verrückt, dass dies überhaupt möglich ist, aber es ist ein Beweis dafür, wie weit wir mit CSS gekommen sind.

3. Planetenrotation

Um auf weitere planetoide Ideen einzugehen, haben wir diese verrückte rotierende Galaxie, die vom Entwickler Bryan Jones erstellt wurde.

Es verwendet auch nichts als Three.js und einige grundlegende CSS, um die Planeten zu gestalten und zu organisieren. Ich muss sagen, die 3D-Effekte sind überraschend. Ich kann mir immer noch nicht vorstellen, dass dieses Zeug in einem typischen Webbrowser möglich ist!

Aber es lässt sich nicht leugnen, dass dieses CodePen-Snippet eine großartige Lernhilfe ist, wenn Sie gerade erst mit Three.js anfangen.

4. Baumhaus-Logo in Three.js

Die Online-Lernressource Treehouse ist einfach phänomenal – besonders für Neulinge. Einer ihrer Ausbilder, Nick Pettit, hat tatsächlich ein vollständiges Treehouse-Logo mit Three.js erstellt.

Und lassen Sie mich sagen, dass dieses Ding großartig ist! Ich habe noch nie ein solches Setup gesehen und ich sehe selten Stifte mit so detaillierten Kommentaren. Nicks Code macht es viel einfacher, sich zu vertiefen, Funktionen zu finden, die Sie nicht verstehen, und dann Google zu suchen, um Antworten zu erhalten.

Alles an diesem 3D-Logo sollte beweisen, dass modernes JS noch lange nicht veraltet ist.

Tipp: Versuchen Sie, das Logo durch Klicken und Ziehen über den Bildschirm zu drehen. Lustige Sachen!

5. Holzfass

Hier ist ein weiteres verrücktes Snippet, das von Nick Pettit entwickelt wurde und nur reinen JS-Code verwendet. Kein HTML, kein CSS – alles wird über die JavaScript-Sprache gerendert.

Dies basiert natürlich auf dem Canvas-Element, das Sie in JavaScript generieren können. Ich habe es selbst ein bisschen benutzt – aber nie auf diesem Niveau. Es zeigt, wie viel man mit einer soliden 3D-Bibliothek machen kann.

Und es beweist auch, dass Nick wirklich weiß, wie man unterrichtet. Dies ist nur eines von vielen Beispielen in seinem CodePen-Konto – alle mit leicht lesbaren Kommentaren zum Lernen während des Lernens.

6. Three.js + TweenMax

Entwickler Martand Kashyap kombinierte das TweenMax-Skript mit Three.js, um dieses verrückte Ding zu machen.

Es ist einer der einzigartigsten Stifte in dieser Liste, mit einigen coolen Animationseffekten. Die Panels sehen tatsächlich wie flache 2D-Oberflächen aus, aber die Flip-Animationen erzeugen einen natürlichen 3D-Effekt. Es wird ziemlich verrückt, wenn man es lange genug anstarrt.

Dies basierte tatsächlich auf einem Motion-Graphic-Projekt, das Martand in JavaScript konvertierte. Ich sehe das viel öfter und es ist verdammt beeindruckend.

7. Teilchensternfeld

Das Konzept der Bewegung auf einer 2D-Oberfläche erinnert an alle Arten von Parallax-Designs. Sie finden diese überall im Web, oft mit experimentellen Funktionen in JavaScript.

Und dieses Snippet von CodePen ist mehr als fantastisch, um solche Ideen zu sammeln. Es hat eine ziemlich verrückte Animation mit unterschiedlichen Zoomgeschwindigkeiten, seitlichem Schwenken und einer Reihe anderer verwandter Funktionen.

Partikel werden dynamisch generiert und Sie können auf eine beliebige Stelle auf der Seite klicken, um hineinzuzoomen. Das fühlt sich an wie eine unendliche Leere des Weltraums – ähnlich wie die, in der wir leben. Aber diese ist mit reinem JS-Code erstellt.

8. Haml-Würfel

Sehen Sie sich für mehr Rotationsgeometrie diese Three.js-Würfel an. Sie laufen auf der Templating-Sprache Haml zusammen mit ~100 Zeilen JavaScript.

Der vielleicht beeindruckendste Teil dieses Designs ist der Schattierungseffekt. Sie sehen dies nicht sehr oft, aber es ist eine der besten Möglichkeiten, einen realistisch aussehenden 3D-Effekt im Browser zu erstellen.

Zum Glück können Sie das alles über Three.js erledigen – mit den richtigen Snippets. Und dieser kann als großartige Vorlage für diesen Zweck dienen.

9. Tesserakt

Mike Fey entwickelte diesen unglaublich komplexen Tesseract, der im 3D-Raum gerendert wurde. Es sieht eigentlich eher wie ein entfalteter Würfel aus, der in einem 3D-Raum organisiert ist – eine Art Würfel im Würfel.

Beachten Sie jedoch, dass diese Demo viele Bibliotheken benötigt, um sie zum Laufen zu bringen. Mike hat fünf verschiedene JS-Skripte mit jQuery, jQuery UI, ThreeJS, TweenJS und einem CubeJS-Skript. Die letzten 3 werden auf seiner persönlichen Seite gehostet und sollten frei zugänglich sein.

Ich kann nicht sagen, dass sich dieses Projekt in der realen Welt als wertvoll erweisen würde. Aber es ist eine verdammt gute Lernressource, wenn Sie in die räumliche 3D-Geometrie eintauchen möchten.

10. 3D-Scherben

Entwickler Tobias Duhr hat diese 3D-Shards als Beispiel für die Möglichkeiten von ThreeJS erstellt. Sie funktionieren wie die zuvor erwähnten rotierenden Würfel, außer dass die Formen anders sind und die Schattierung ebenfalls weg ist.

Ich würde dies als eine einfachere Einführung zum Erlernen von ThreeJS betrachten, wenn Sie nicht sicher sind, wo Sie anfangen sollen. Zugegeben, dies ist kein Tutorial, daher kann es Sie nicht wie andere Ressourcen unterrichten.

Aber allein durch das Studium dieses Codes werden Sie mit einigen neu entdeckten Ideen für Ihre eigene Arbeit davonkommen.

11. 3D-Pythagoras-Baum

Dieser 3D-Pythagoras-Baum ist einfach umwerfend. Entwickler Josep Llodra erstellte dieses Projekt mit nur 150 Zeilen JavaScript neben der Three.js-Bibliothek.

Es basiert tatsächlich auf diesem Projekt, das ich zuvor erwähnt habe. Grundsätzlich strukturiert es diese Würfel in einer einzigen definierten Form und organisiert sie dann basierend auf Größe und Position.

Wenn Sie sich nicht sicher sind, was Sie mit Three.js machen können, dann hoffe ich, dass diese Galerie ein wenig Inspiration bietet. Aber Sie können immer mehr auf CodePen finden, wenn Sie bereit sind, sich umzusehen.