WebGL & Three.js | Die dritte Dimension im Browser | Spielerei oder Webdesign-Trend 2025?

In diesem Blog-Beitrag stelle ich dir die WebGL-Technologie und Three.js vor, mit welchen sich eindrückliche und interaktive 3D-Experiences im Web erstellen lassen. Du erfährst, welche Möglichkeiten solche 3D-Erlebnisse bieten, warum sie als potenzieller Webdesign-Trend 2025 gelten und welche Herausforderungen bei der Umsetzung auf dich warten. Außerdem teile ich spannende Beispiele, persönliche Erfahrungen und meine Vision für die Zukunft virtueller Welten im Web.

Inhaltsverzeichnis

• Meine Faszination, künstliche Welten zu erschaffen
• Interaktion – Vom passiven Ansehen zum aktiven Erleben
• Liebe auf den ersten Blick
• Was ist denn nun WebGL und Three.js?
• Showcase
• Wo stehe ich aktuell?
• Schwierig, schwieriger, Three.js
• Tatsächlicher Mehrwert oder eine unnötige Spielerei?
• Sind solche 3D-Experiences der Webdesign-Trend 2025?

Meine Faszination, künstliche Welten zu erschaffen

Die Faszination, künstliche Welten zu erschaffen, begleitet mich seit meiner Kindheit. Anfangs noch durch das Bauen von Burgen aus leeren Kartonkisten, später durch das Zeichnen von Comics und Cartoons, das spätere kreieren von digitalen und virtuellen Welten mittels CGI bis hin zum jetzigen Gestalten von Webseiten.

Auch eine Webseite stellt für mich eine sehr persönliche virtuelle Welt dar, in welcher man sich selbst oder seine Dienstleistung und Produkte auf ganz individuelle Weise präsentieren kann.

Interaktion – Vom passiven Ansehen zum aktiven Erleben

Mit meiner aufwendigen 3D-Logo-Animation konnte ich mich 2018 stark von anderen Webseiten abheben. Nüchtern betrachtet handelt es sich aber nur um ein gerendertes Video, dass in einer Endlosschleife abgespielt wird. Was aus heutiger Sicht fehlt, sind Interaktionsmöglichkeiten.

Immer öfters werden auf Webseiten Animationen integriert, die entweder an einer bestimmten Position ausgelöst oder scroll-basiert direkt vom Besucher gesteuert werden. Diese Interaktivität fasziniert nicht nur, sie sorgt beim Besucher für ein einzigartiges Weberlebnis und kann die Verweilzeit bzw. Interaktionsdauer immens erhöhen. Erst kürzlich habe ich mit The Flying Fox eine solche Webseite erstellt und die Besucherzeiten bestätigen das.

Der immense Leistungszuwachs aktueller (mobiler) Hardware ermöglicht es inzwischen, immer komplexere Animationen und sogar 3D-Inhalte direkt im Browser anzuzeigen und berechnen zu können.

Liebe auf den ersten Blick

Bereits im Jahre 2019 habe ich nach Möglichkeiten gesucht, meine 3D-Logo-Animation interaktiv im Web einzubinden. Dabei stiess ich auf Three.js und die Tech-Demo „Littlest Tokio“ von Glen Fox. Minutenlang navigierte ich um die animierte Szene herum, um die unzähligen Details zu entdecken und zu bestaunen.

Mit einer aus der Euphorie entstandenen Naivität machte ich mich in den nächsten Tagen daran, meine Animation ebenfalls so im Web einzubinden; und scheiterte kläglich. Ich musste mir eingestehen, dass die Implementierung um ein Vielfaches schwieriger war als anfänglich als Laie angenommen. Aus Zeitgründen musste ich dieses Unterfangen wohl oder übel auf Eis legen. Es sollte vier Jahre dauern, bis ich es wieder aufgreifen würde.

Wo stehe ich aktuell?

Als ich vor etwa zwei Jahren wieder eine Website mit interaktiven 3D-Elementen entdeckte, wuchs in mir der Wunsch, mich intensiver damit zu beschäftigen. Erfreulicherweise hat sich seither viel getan: Die verfügbare Dokumentation wurde umfangreicher, und mit dem «Three.js Journey» steht nun sogar ein kompletter Online-Kurs zur Verfügung. Dadurch ist der Einstieg heute deutlich einfacher geworden.

Three.js Journey erfolgreich abgeschlossen

In den letzten anderthalb Jahren habe ich die gesamten 93 Stunden an Lektionen des „Three.js Journey“ durchgearbeitet und diesen Oktober erfolgreich abgeschlossen – als einer von bisher 1200 Absolventen.

Das 3D-Intro für meine neue Webseite im Sommer 2025 ist fertig

Parallel zum Kurs habe ich die erlernten Fähigkeiten anfangs in kleineren Projekten, später in meinem grossen Projekt für das neue 3D-Intro der neuen Webseite vertieft und verfeinert. Dieses 3D-Intro kann unter meiner neuen Domain www.bluebox.design bereits begutachtet werden.

Dadurch wurden meine Wissenslücken schonungslos aufgezeigt und durch die praktische Anwendung habe ich mindestens nochmals so viel gelernt, wie im Kurs selbst. Trotzdem stehe ich noch ganz am Anfang und ich bin mich vorzu am weiterbilden.

Schwierig, schwieriger, Three.js

Trotz der Erleichterung durch Three.js ist die Erstellung von interaktiven 3D-Inhalten für das Web sehr anspruchsvoll und die Lernkurve steil. Dies gilt vor allem für die Basisversion (Vanilla) ohne zusätzliche Renderer wie React-three-fiber (kurz R3F).

Da es sich um einen JavaScript-Bibliothek handelt, sind hierbei mindestes Basis-Programmierkenntnisse für JavaScript erforderlich.

Nebst dem Codieren benötigt man für das Web optimierte 3D-Modelle. Es gibt selbstverständlich Marketplaces und kostenlose 3D-Modelle, oft müssen diese aber projektspezifisch selbständig im 3D-Programm angepasst und animiert werden.

Gipfel der Komplexität stellt dann das Programmieren von sogenannten «Shadern» dar, die in der Programmiersprache GLSL verfasst werden. Hier ein sehr beeindruckendes und komplexes Beispiel eines Wasser-Shaders: www.shadertoy.com/view/Ms2SD1

Erschwerend kommt dazu, dass Smartphones für das Browsen im Web bevorzugt werden. Die Experience sollte man demnach für die entsprechende Auflösungen aber auch für die Leistungsfähigkeit des Gerätes optimieren. Bei den unzähligen Auflösungen, Browsern und Betriebssystemen keine einfache Aufgabe. Zudem müssen für ein breites Publikum auch alte und leistungsschwächere Geräte berücksichtigt werden.

Da bei einer 3D-Experience oft auch Soundeffekte und Musik zum Einsatz kommen, ist ein User Interface oft Pflicht, um die Experience einerseits manuell zu starten (Autoplay-Richtlinien des Browsers einhalten) und den Ton wiederum deaktivieren zu können. Dies erstellt man oft mit HTML & CSS, wobei die 3D-Szene dann als Canvas eingebettet wird.

Dieser Schwierigkeitsgrad ist meiner Meinung nach auch eine Chance, sich von der Masse abzuheben. Einerseits mit einem einzigartigen Erlebnis auf seiner eigenen Webseite, anderseits mit der Umsetzung komplexer Kundenprojekte, die nur wenige auf der Welt in der entsprechenden Qualität anbieten können.

Tatsächlicher Mehrwert oder eine unnötige Spielerei?

Oft habe ich mir die Frage gestellt, welche Vorteile solche Webseiten überhaupt bieten. Optisch eindrücklich zu sein ist schön und gut, aber bieten diese auch einen Mehrwert?

Je nach Branche, Art und Qualität der Umsetzung; Ja! Momentan erachte ich es als die spannendste Form, Information unterhaltsam im Web zu vermitteln. Die Interaktivitätsdauer wird gegenüber einer üblichen Webseite massiv steigen. Wie bei „Joshua’s World“ ist die Chance riesig, dass die Webseite einen massiven Anstieg der Besucherzahlen erfährt, nur des Weberlebnisses wegen. Hochwertige Umsetzungen wie jene bei Cartier haben dann eher etwas mit Prestige zu tun. Der 3D-Lageplan von Studio Carto hingegen ist in dieser Form einfach viel ansprechender und besser verständlich als ein herkömmlicher PDF-Lageplan. Als langjähriger Webdesigner vertrete ich aber auch die Meinung, dass das Vermitteln von Informationen und Botschaften im Zentrum sein soll. Es gibt hochkarätige Beispiele, die dem Besucher einen ellenlangen Scroll-Marathon zumuten, bis die gesuchten Informationen (wenn überhaupt) ersichtlich werden. Somit sehe ich die Kunst vor allem darin, diese Technologie gezielt dort einzusetzen, wo Botschaften und Informationen emotionaler und visuell ansprechender vermittelt werden sollen, immer mit der Möglichkeit, diese Experience zu überspringen oder einfach zu ignorieren.

Einige Nachteile sind nicht von der Hand zu weisen: In puncto SEO und Ladezeiten erreicht eine Three.js-Umsetzung aufgrund der 3D-Modelle, Texturen und Sounds bei weitem nicht die Effizienz einer klassischen Webseite. Allerdings steht dies bei solchen Projekten selten im Vordergrund. Hinzu kommt, dass die Benutzerfreundlichkeit oft leidet, weil die visuelle Darstellung über die schnelle Zugänglichkeit der Informationen priorisiert wird. Zudem ist die technische Umsetzung, wie bereits erwähnt, anspruchsvoll und zeitaufwendig – was wiederum die Kosten in die Höhe treibt. Für die meisten wird sich das im ökonomischen Sinne kaum lohnen, weshalb solche 3D-Experiences auch selten bleiben werden.

Ich würde mich über Eure Meinung bezüglich Three.js und solche 3D-Experiences freuen!
Gerne beantworte ich Eure Fragen in der Kommentarsektion.

Herzliche Grüsse
Gabriel