3D-Website: wie 3D im Web funktioniert und wann es sich lohnt
Echtes 3D im Browser mit WebGL, three.js und Spline. Wie die Technik funktioniert, wann sich 3D wirklich lohnt und was es an Performance kostet. Von einem Team, das solche Seiten baut.
Eine 3D-Website ist einer der stärksten ersten Eindrücke, die das Web hergibt. Ein Produkt, das sich mit dem Scrollen dreht. Ein Hero, der auf die Maus reagiert. Eine Szene, durch die man sich bewegt statt sie nur anzuschauen. Richtig gemacht, bleibt so etwas hängen.
Falsch gemacht, wird es zur Bremse: ruckelnde Ladebalken, heiße Handys, leere Seiten für alle, die kein High-End-Gerät haben. Genau an diesem Punkt trennen sich Galerie-Inspiration und echte Praxis. Dieser Artikel erklärt, was eine 3D-Website technisch ist, wie 3D im Browser funktioniert, wann es sich lohnt und was es an Performance kostet. Ehrlich, weil wir solche Seiten selbst bauen.
Das Wichtigste in Kürze
- Eine echte 3D-Website rendert räumliche Szenen live im Browser über WebGL oder WebGPU, meist mit three.js, React Three Fiber oder Spline. Das ist nicht dasselbe wie Fake-3D über Parallax oder Video.
- 3D lohnt sich, wo Räumlichkeit einen echten Job hat: Produkt-Konfiguratoren, Hero-Erlebnisse und Storytelling. Für Standard-Content-Seiten ist es meist übertrieben.
- 3D-Modelle liefern wir als glTF/GLB mit Draco-Kompression aus. Ohne Kompression sind Modelle schnell mehrere Megabyte groß und killen die Ladezeit.
- Der ehrliche Haken ist Performance: Ladezeit, Akku und Core Web Vitals. Ohne saubere Optimierung und Fallbacks schadet 3D mehr, als es nützt.
- Wir bauen 3D nach dem Prinzip Wirkung pro Kilobyte: leichte Modelle, Lazy Loading, ein sauberes 2D-Fallback und harte Budgets für mobile Geräte.
Was ist eine 3D-Website?
Eine 3D-Website ist eine Seite, die räumliche, dreidimensionale Inhalte direkt im Browser darstellt und interaktiv macht. Statt eines flachen Bildes rendert der Browser eine echte Szene mit Tiefe, Licht und Perspektive, die auf Scrollen, Maus oder Touch reagiert. Das Rechnen übernimmt die Grafikkarte des Nutzers über eine Web-Schnittstelle namens WebGL, zunehmend auch WebGPU.
Wichtig ist die Abgrenzung zu Fake-3D. Nicht alles, was räumlich aussieht, ist echtes 3D. Ein Parallax-Effekt verschiebt flache Ebenen unterschiedlich schnell und wirkt tief, bleibt aber 2D. Ein vorgerendertes Video einer sich drehenden Uhr sieht aus wie 3D, ist aber nur ein Film ohne echte Interaktion. Echtes 3D dagegen ist eine lebende Szene: Du kannst das Objekt drehen, die Kamera bewegen, Licht und Material ändern, und die Seite berechnet jedes Bild in Echtzeit.
Beide Wege haben ihre Berechtigung. Fake-3D ist leicht, schnell und robust. Echtes 3D ist stärker und interaktiver, kostet aber deutlich mehr Rechenleistung. Die ganze Kunst liegt darin, den richtigen Weg für das jeweilige Ziel zu wählen.
Wie funktioniert 3D im Browser?
Unter der Haube arbeitet jede 3D-Website mit einem festen Baukasten aus wenigen Bausteinen. Wenn du diese vier kennst, verstehst du praktisch jedes Projekt da draußen. Wir gehen sie einzeln durch.
WebGL und WebGPU: die Motoren
WebGL ist die Schnittstelle, über die der Browser die Grafikkarte für 3D-Rendering nutzt. Sie ist seit über einem Jahrzehnt in jedem gängigen Browser eingebaut, du musst nichts installieren. WebGL ist der bewährte Standard hinter fast allen 3D-Websites von heute.
WebGPU ist der Nachfolger, seit 2023 in Chrome und mittlerweile breit ausgerollt. Es spricht moderne Grafikkarten direkter an und ist bei komplexen Szenen spürbar schneller und effizienter. Für die meisten Projekte ist WebGL noch die sichere Wahl mit maximaler Kompatibilität, WebGPU ist die Zukunft für aufwändige Szenen. Beide rechnen auf dem Gerät des Nutzers, nicht auf dem Server, deshalb hängt die Performance immer am schwächsten Zielgerät.
three.js und React Three Fiber: die Bibliotheken
Direkt mit WebGL zu programmieren ist extrem aufwendig. Deshalb nutzt fast niemand es roh. three.js ist die mit Abstand verbreitetste JavaScript-Bibliothek für 3D im Web. Sie nimmt dir die schwere Arbeit ab: Szenen aufbauen, Kameras setzen, Licht und Material verwalten, Modelle laden. Der größte Teil aller ernsthaften 3D-Websites läuft auf three.js.
React Three Fiber ist three.js für React-Projekte. Es bringt die 3D-Szene in dieselbe Komponenten-Logik, mit der moderne Websites ohnehin gebaut werden, etwa in Next.js. Das macht 3D wartbar und in eine echte Web-App integrierbar, statt es als Fremdkörper danebenzustellen. Für unsere Next.js-Projekte ist das der Standardweg.
Spline: 3D ohne Code
Nicht jedes 3D-Projekt braucht Programmierung. Spline ist ein visuelles No-Code-Tool, in dem du 3D-Szenen wie in einem Design-Programm baust und per Einbett-Code direkt in die Website hängst. Für schnelle Hero-Grafiken, einfache interaktive Objekte und Prototypen ist das ideal und spart Tage an Arbeit.
Die Grenze zeigt sich bei Performance und Kontrolle. Spline-Szenen sind bequem, aber schnell schwer, und du gibst einen Teil der Feinsteuerung ab. Für ein leichtgewichtiges, voll optimiertes Erlebnis auf einer Premium-Seite bauen wir deshalb meist mit three.js selbst. Als Faustregel: Spline für schnell und gut genug, Code für maximale Wirkung bei minimalem Gewicht.
glTF, GLB und Draco: die Dateien
Ein 3D-Objekt muss als Datei geladen werden, bevor der Browser es zeigen kann. Das Standardformat dafür ist glTF, oft als kompakte Einzeldatei GLB. glTF gilt als das JPEG der 3D-Welt: offen, effizient und von allen gängigen Werkzeugen unterstützt. Ein GLB bündelt Geometrie, Material und Texturen in einer Datei, die three.js direkt lädt.
Der entscheidende Punkt ist die Größe. Rohe 3D-Modelle sind schnell mehrere Megabyte schwer, und jedes Megabyte kostet Ladezeit. Draco ist eine Kompression, die die Geometrie stark verkleinert, oft um mehr als 80 Prozent, ohne sichtbaren Qualitätsverlust. Dazu kommen komprimierte Texturen im Format KTX2. Ein Modell ohne Draco und ohne Textur-Optimierung ist der häufigste Grund, warum eine 3D-Website langsam lädt. Deshalb ist Kompression bei uns kein Extraschritt, sondern Pflicht.
Wann lohnt sich eine 3D-Website?
3D ist kein Selbstzweck. Es lohnt sich dann, wenn Räumlichkeit einen echten Job erfüllt, den ein Bild oder Video nicht kann. Es lohnt sich nicht, wenn es nur Effekt ohne Funktion ist. Hier sind die Fälle, in denen es sich rechnet, und der eine, in dem nicht.
Produkt-Konfiguratoren
Das ist der stärkste Business-Case für echtes 3D. Wenn Kunden ein Produkt in Farbe, Material oder Ausstattung selbst zusammenstellen und sofort sehen wollen, ist ein 3D-Konfigurator jedem Foto überlegen. Sneaker, Möbel, Autos, Uhren, Maschinen: Der Nutzer dreht das Objekt, wechselt Varianten und trifft eine Entscheidung, ohne sich etwas vorstellen zu müssen. Hier zahlt 3D direkt auf Conversion und weniger Retouren ein.
Hero-Erlebnisse
Ein 3D-Hero ist der Moment, in dem eine Marke in den ersten Sekunden zeigt, dass sie anders ist. Ein Objekt, das auf Scrollen oder Maus reagiert, hält Aufmerksamkeit auf eine Weise, die ein statisches Bild nicht schafft. Genau das haben wir für den FRAMEN-Auftritt gebaut: einen Apple-inspirierten Scroll-Hero, in dem sich das Produkt beim Scrollen räumlich entfaltet. Für Premium-Marken, deren Positionierung an Innovation hängt, ist das ein starkes Signal, wenn es leicht und flüssig bleibt.
Storytelling und Erklärung
Manche Dinge versteht man erst räumlich. Wie ein komplexes Bauteil zusammenspielt, wie eine Anlage funktioniert, wie sich ein Prozess entfaltet: Eine scroll-gesteuerte 3D-Szene, durch die sich der Nutzer bewegt, erklärt das oft besser als jeder Text. Im B2B, wo Produkte erklärungsbedürftig sind, ist das ein echter Hebel. 3D wird hier vom Effekt zum Werkzeug, das Verständnis schafft.
Wann es sich nicht lohnt
Für die meisten Standard-Seiten ist echtes 3D übertrieben. Ein Blog, eine Leistungsseite, eine klassische Unternehmens-Website leben von Klarheit, Ladezeit und Lesbarkeit, nicht von einer drehenden Kugel im Hintergrund. Wenn 3D keinen Inhalt trägt, sondern nur dekoriert, kostet es Performance ohne Gegenwert. Auch bei sehr schmalem Budget oder wenn die Zielgruppe stark auf älteren Handys unterwegs ist, ist ein sauberes 2D-Design mit gezielter Motion die klügere Wahl. Ehrlich zu sein, wann 3D nicht das richtige Mittel ist, gehört für uns zur Beratung dazu.
Der ehrliche Haken: Performance
Hier kommt der Teil, den Inspirations-Galerien gern weglassen. 3D ist rechenintensiv, und schlecht umgesetzt bezahlt der Nutzer den Preis. Vier Baustellen musst du kennen, bevor du dich für eine 3D-Website entscheidest.
Ladezeit und Dateigröße
Ein unkomprimiertes 3D-Modell mit hochauflösenden Texturen kann mehrere Megabyte wiegen, dazu kommen die Bibliotheken selbst. three.js bringt eigenes Gewicht mit. Ohne Gegenmaßnahmen sieht der Nutzer sekundenlang eine leere Seite oder einen Ladebalken. Die Lösung liegt in Draco-Kompression, komprimierten Texturen, dem Nachladen der 3D-Szene erst wenn sie gebraucht wird, und dem Aufteilen des Codes, damit nicht alles auf einmal lädt.
Mobile und Akku
Ein Effekt, der auf einem Gaming-Laptop flüssig läuft, kann ein Mittelklasse-Handy in die Knie zwingen. Dauerhaftes 3D-Rendering zieht Akku und lässt Geräte heiß werden. Deshalb behandeln wir Mobile nie als Nachgedanken, sondern setzen dort harte Budgets: weniger Details, niedrigere Auflösung, pausiertes Rendering wenn die Szene nicht im Blick ist, oder gleich ein leichteres Fallback statt der vollen Szene. Was auf dem Desktop beeindruckt, muss auf dem Handy zumindest nicht schaden.
Core Web Vitals
Google misst echte Ladeerfahrung über die Core Web Vitals, und schwere 3D-Elemente treffen diese Werte direkt. Eine große 3D-Szene im Hero kann den Largest Contentful Paint nach hinten schieben, aufwändiges Rendering die Interaktivität blockieren. Das ist nicht nur ein Nutzer-Thema, sondern ein Ranking-Faktor. Deshalb prüfen wir jede 3D-Seite gegen dieselben Vitals wie jede andere Seite auch. Wie diese Werte genau funktionieren und was gute Zielwerte sind, erklären wir im Detail in Core Web Vitals.
Fallbacks und Barrierefreiheit
Nicht jedes Gerät und nicht jeder Nutzer kann oder will 3D. Alte Hardware, schwache Verbindungen, Nutzer mit reduzierter Bewegungspräferenz im System: Für sie alle braucht eine gute 3D-Website ein sauberes Fallback, meist ein hochwertiges statisches Bild oder eine ruhige 2D-Variante. Wir respektieren die Einstellung "reduzierte Bewegung" und stellen sicher, dass alle Inhalte und Funktionen auch ohne 3D erreichbar sind. Eine Seite, die ohne 3D leer oder kaputt ist, ist kein Premium-Erlebnis, sondern ein Ausschluss.
So bauen wir 3D ohne Performance-Tod
Unser Prinzip heißt Wirkung pro Kilobyte. Jedes Gramm 3D muss sich rechtfertigen, und die Optimierung ist kein nachgelagerter Schritt, sondern Teil der Konstruktion von Anfang an. Konkret heißt das für uns fünf Dinge.
Modelle radikal leicht halten
Wir reduzieren Geometrie auf das Nötige, komprimieren mit Draco und liefern Texturen im KTX2-Format aus. Ein 5-MB-Rohmodell wird so oft zu unter 1 MB, ohne dass man den Unterschied sieht.
Erst laden, wenn es gebraucht wird
Die 3D-Szene lädt nicht sofort mit der Seite, sondern erst wenn sie in den Blick kommt. So bleibt der erste Eindruck schnell und der Ladebalken kurz.
Mobile mit eigenem Budget
Handys bekommen eine leichtere Variante: weniger Details, niedrigere Auflösung, pausiertes Rendering außerhalb des Sichtfelds. Kein Akku-Killer, keine heißen Geräte.
Immer ein sauberes Fallback
Für alte Geräte, schwache Verbindungen und reduzierte Bewegung gibt es ein hochwertiges statisches Bild. Die Seite funktioniert für jeden, auch ohne 3D.
Gegen Core Web Vitals messen
Jede 3D-Seite wird gegen dieselben Performance-Werte geprüft wie jede andere. Wenn 3D die Vitals kippt, wird optimiert oder reduziert, nicht durchgewunken.
3D als Teil eines größeren Motion-Systems
Echtes 3D ist selten die einzige Bewegung auf einer starken Seite. Oft ist es der Höhepunkt in einem System aus feineren Effekten: Scroll-Animationen, Übergängen und leichter Vektor-Animation über Rive oder Lottie, die überall dort läuft, wo volles 3D zu schwer wäre. Ein sich drehendes Icon oder eine flüssige Micro-Interaktion braucht kein WebGL, sondern eine wenige Kilobyte kleine Rive-Animation. Die Kunst ist, für jeden Moment das leichteste Mittel zu wählen, das die gewünschte Wirkung erzielt.
Genau so denken wir Motion insgesamt: 3D dort, wo Räumlichkeit zählt, leichte Animation überall sonst, und immer mit Blick auf Performance. Wie wir Motion strategisch einsetzen, zeigen wir auf unserer Seite Motion Design. Die technische Umsetzung von 3D-Szenen, Konfiguratoren und Scroll-Erlebnissen läuft über unsere Web-Entwicklung.
Häufige Fragen
Eine 3D-Website stellt räumliche, dreidimensionale Inhalte direkt im Browser dar und macht sie interaktiv. Statt eines flachen Bildes rendert der Browser über WebGL oder WebGPU eine echte Szene mit Tiefe, Licht und Perspektive, die auf Scrollen, Maus oder Touch reagiert. Das unterscheidet echtes 3D von Fake-Effekten wie Parallax oder vorgerendertem Video.
Die Basis ist WebGL oder das neuere WebGPU, das die Grafikkarte des Nutzers anspricht. Darauf setzen Bibliotheken auf: three.js ist der Standard, React Three Fiber bringt das in React- und Next.js-Projekte, Spline ist die No-Code-Option. 3D-Modelle werden als glTF oder GLB geladen, meist mit Draco-Kompression, um die Dateigröße klein zu halten.
Sie kann es, wenn sie schlecht gebaut ist. 3D-Modelle und Bibliotheken sind schwer, und ohne Optimierung sieht der Nutzer eine leere Seite. Mit Draco-Kompression, komprimierten Texturen, Lazy Loading und einem Fallback bleibt eine 3D-Website aber schnell. Entscheidend ist saubere Umsetzung, nicht die Technik an sich.
Nicht automatisch, aber es ist ein Risiko. Schwere 3D-Elemente können den Largest Contentful Paint verschlechtern und Interaktivität blockieren, was auf die Core Web Vitals und damit auf das Ranking wirkt. Mit Lazy Loading, leichten Modellen und serverseitig gerendertem Text bleibt eine 3D-Seite SEO-tauglich. Wir prüfen jede 3D-Seite gegen dieselben Vitals wie jede andere.
Ja, aber sie braucht eine eigene mobile Strategie. Dauerhaftes 3D-Rendering zieht Akku und kann schwächere Geräte überfordern. Deshalb liefern wir mobil eine leichtere Variante mit weniger Details, niedrigerer Auflösung und pausiertem Rendering, oder ein statisches Fallback. Ohne diese Anpassung ist 3D auf dem Handy ein Problem.
Es lohnt sich, wenn Räumlichkeit einen echten Job erfüllt: Produkt-Konfiguratoren, ein starker Hero, erklärungsbedürftige B2B-Produkte oder Storytelling, das man räumlich besser versteht. Für einen Standard-Blog oder eine reine Content-Seite ist echtes 3D meist übertrieben. Wir sagen ehrlich, wann sich der Aufwand rechnet und wann eine leichte 2D-Lösung die klügere Wahl ist.
Weitere Artikel
Lass uns über euer Projekt sprechen!
20-Minuten Gespräch, ohne Verkaufsdruck. Ihr beschreibt, was ihr vorhabt und wir sagen, ob und wie wir helfen können.