Three.js ist eine quelloffene JavaScript-Bibliothek für 3D-Grafik im Browser. Sie baut auf WebGL auf, der Schnittstelle, über die Webseiten die Grafikkarte nutzen. Für die Three.js-Entwicklung bedeutet das: Szene, Kamera, Licht und Materialien beschreiben wir in gut lesbarem JavaScript, statt jede Berechnung direkt in WebGL zu programmieren. Neuere Versionen bringen zusätzlich einen Renderer für den jüngeren Grafikstandard WebGPU mit.
In unserem eigenen Projekt Wizzquiz setzen wir Three.js und WebGL für die 3D-Spiele ein, darunter ein Flipper mit 3D-Physik und ein Billard mit realistischer Kugelphysik. Diese Erfahrung nutzen wir für die Projekte unserer Kundinnen und Kunden.
Three.js eignet sich für alles, was räumlich dargestellt und bedient werden soll. Das reicht vom 3D-Objekt im Kopfbereich einer Website über die 3D-Visualisierung von Produkten bis zum vollständigen Browsergame. Auch Datenvisualisierungen, Lagepläne oder animierte Erklärungen technischer Abläufe lassen sich damit bauen, ebenso Animationen, die auf Scrollen oder Mausbewegungen reagieren.
Gemeinsam ist all diesen Einsatzfeldern: Die Darstellung entsteht in Echtzeit auf dem Gerät. Nutzerinnen und Nutzer können die Kamera bewegen, Objekte anklicken oder Varianten wechseln, ohne dass die Seite neu geladen werden muss.
3D im Browser fordert das Gerät. Ein Smartphone hat weniger Rechenleistung als ein Desktop-Rechner, und jede Sekunde Ladezeit kostet Aufmerksamkeit. Wir reduzieren deshalb die Zahl der Zeichenaufrufe, indem wir Geometrien zusammenfassen oder wiederkehrende Objekte instanziert zeichnen. Modelle komprimieren wir, etwa mit Draco, Texturen bringen wir in passende Größen und Formate.
Zusätzlich passen wir die Qualität an das Gerät an: Schatten, Kantenglättung und Auflösung lassen sich stufenweise zurücknehmen. Ist die Szene nicht sichtbar, pausieren wir die Darstellung, damit Akku und Prozessor geschont werden.
Die Qualität einer 3D-Szene hängt stark an den Modellen. Als Austauschformat für das Web hat sich glTF etabliert, in der Binärform GLB. Vorhandene Daten aus Konstruktion oder 3D-Software bereiten wir dafür auf: Wir reduzieren die Polygonzahl, fassen Materialien zusammen und prüfen Maßstab und Ausrichtung. CAD-Daten sind für die Darstellung im Browser meist zu detailliert und müssen vereinfacht werden.
Für glaubwürdige Oberflächen nutzen wir physikalisch basierte Materialien und Umgebungslicht aus HDR-Bildern. Eigene Effekte programmieren wir bei Bedarf als Shader in GLSL.
Eine Three.js-Szene steht selten allein. Wir binden sie in bestehende Websites ein, verbinden sie mit Formularen oder Warenkörben und übergeben Auswahl und Zustand an das übrige System. In Projekten mit React nutzen wir auf Wunsch React Three Fiber, einen React-Renderer für Three.js.
Für Geräte oder Browser, auf denen WebGL nicht verfügbar ist, sehen wir ein Ersatzbild oder eine einfache Ansicht vor. Wichtige Informationen stehen zusätzlich als Text auf der Seite, damit sie auch für Suchmaschinen und Screenreader zugänglich bleiben. Die Szene selbst erhält eine kurze Beschreibung für Screenreader.
Ob neue 3D-Szene oder Optimierung einer bestehenden: Beschreiben Sie uns Ihr Vorhaben, wir melden uns mit einer Einschätzung und einem kostenlosen Angebot.
Unser Studio liegt in Königstein im Taunus. Wir kommen zu Ihnen oder sprechen per Video-Call – hier finden Sie unsere Seiten für Ihren Ort:
WebGL ist die Grafikschnittstelle des Browsers, Three.js eine Bibliothek, die darauf aufbaut. Mit WebGL allein müsste man Shader, Puffer und Matrizen selbst verwalten. Three.js nimmt diese Arbeit ab und bietet fertige Bausteine wie Kameras, Lichter, Materialien und Lader für 3D-Modelle.
WebGL wird von allen gängigen aktuellen Browsern unterstützt, auch auf Smartphones und Tablets. Die Leistung der Geräte unterscheidet sich aber stark. Wir planen Grafikstufen und testen auf echten Geräten, damit die Anwendung auch auf älteren Modellen bedienbar bleibt.
Meist ja. Am einfachsten sind Modelle im glTF-Format. Andere Formate wie FBX, OBJ oder CAD-Daten wandeln wir um und vereinfachen sie für den Browser. Nach einer kurzen Sichtung sagen wir Ihnen, wie viel Aufbereitung nötig ist.
