3D-Website: wie 3D im Web funktioniert und wann es sich lohnt

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, klassisch WebGL, zunehmend das neuere WebGPU. Es läuft alles im Browser, ohne Plugin und ohne Installation.

Wichtig ist die Abgrenzung. Ein gerendertes Video, das ein 3D-Objekt zeigt, ist keine 3D-Website, es ist ein Film. Echtes Web-3D bedeutet, dass die Szene live im Browser berechnet wird und der Nutzer sie in Echtzeit beeinflussen kann: drehen, konfigurieren, hindurchbewegen. Genau diese Interaktivität ist der Unterschied zwischen einem netten Effekt und einem echten Werkzeug.

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: die Rendering-Schnittstelle (WebGL oder WebGPU), die Bibliothek darüber (meist three.js), das Dateiformat der Modelle (glTF, GLB) und die Optimierungs-Werkzeuge (Draco, KTX2). 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 steckt seit über einem Jahrzehnt in jedem gängigen Browser, du musst nichts installieren. WebGL ist der bewährte, breit unterstützte Standard hinter fast allen 3D-Websites von heute.

WebGPU ist der Nachfolger, technisch näher an modernen Grafik-APIs statt an dem über 30 Jahre alten OpenGL, auf dem WebGL aufsetzt. Es bringt Compute-Shader, geringeren Overhead und in draw-call-lastigen Szenen bis zu zehnfache Performance. Lange war Apple der Bremsklotz, doch seit Safari 26 im September 2025 läuft WebGPU in allen großen Browsern, inklusive iOS und iPadOS. Damit ist es 2026 produktionsreif. In der Praxis nutzen wir three.js, das WebGPU automatisch nimmt, wo es verfügbar ist, und sauber auf WebGL zurückfällt, wo nicht. Für dich als Auftraggeber heißt das: modernste Technik ohne Risiko für ältere Geräte.

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 weitem Abstand verbreitetste JavaScript-Bibliothek für 3D im Web, mit rund 2,7 Millionen NPM-Downloads pro Woche, um ein Vielfaches mehr als alle Alternativen wie Babylon.js zusammen. 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 (R3F) ist die Ergänzung für alle, die mit React oder Next.js arbeiten. Statt three.js imperativ Zeile für Zeile zu steuern, beschreibst du die 3D-Szene deklarativ als React-Komponenten, mit Hooks und wiederverwendbaren Teilen. Zusammen mit der Helfer-Bibliothek Drei ist das der moderne Standard-Stack, auf dem wir die meisten anspruchsvollen 3D-Seiten bauen. Das ist kein Detail: Ein sauberer Stack entscheidet darüber, ob eine 3D-Seite wartbar bleibt oder nach einem Jahr niemand mehr anfassen will.

Spline und No-Code-Tools: 3D ohne Programmierung

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 Webflow, Framer, Wix Studio oder eine eigene Seite hängst. Für schnelle Hero-Grafiken, einfache interaktive Objekte und Prototypen ist das ideal und spart Tage an Arbeit. Daneben gibt es Builder wie PeachWeb, die ganze WebGL-Seiten ohne Code versprechen.

Die Grenze zeigt sich bei Performance, Kontrolle und Komplexität. Ein No-Code-Export ist selten so schlank wie handoptimierter Code, und tiefe Interaktion, harte Ladezeit-Budgets oder eine enge Verzahnung mit deiner Seitenlogik stoßen schnell an Grenzen. Unsere Faustregel: Spline für schnelle, eingegrenzte 3D-Elemente, eigener three.js-Code für alles, was Performance-kritisch ist oder das Herzstück der Seite bildet.

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 Kompression. Rohe Modelle sind zu schwer fürs Web. Draco komprimiert die Geometrie, KTX2 mit Basis-Kompression die Texturen, oft auf einen Bruchteil der ursprünglichen Größe, ohne dass der Nutzer einen Unterschied sieht. Dieser Schritt ist kein Nice-to-have, sondern der Unterschied zwischen einer Seite, die in einer Sekunde da ist, und einer, die den Nutzer sekundenlang auf einen Ladebalken starren lässt.

Womit baut man eine 3D-Website? Die Optionen im Vergleich

Es gibt nicht den einen Weg zu 3D im Web, sondern eine Bandbreite vom Zwei-Klick-Embed bis zum voll individuellen Code. Welcher Weg der richtige ist, hängt an Anspruch, Budget und daran, wie zentral 3D für deine Seite ist. Diese Übersicht ordnet die gängigen Optionen ein.

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. Und es kostet, wenn man es dekorativ und ohne Plan einsetzt. 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. Das ist auch der Bereich mit den härtesten Zahlen. E-Commerce-Studien zeigen für interaktives 3D auf Produktseiten Conversion-Steigerungen von teils 40 Prozent und mehr sowie deutlich weniger Retouren, weil der Kunde vor dem Kauf genauer weiß, was er bekommt. Zahlen wie diese schwanken stark je nach Produkt, aber die Richtung ist eindeutig.

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 dreht und entfaltet. Der Effekt lohnt sich vor allem für Premium-Marken, bei denen der erste Eindruck über die Wahrnehmung entscheidet. Er lohnt sich nicht, wenn er nur Selbstzweck ist und die eigentliche Botschaft überdeckt.

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 Erklär-Werkzeug, und genau dann rechtfertigt es sein Gewicht.

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 niemand im Team die Seite später pflegen kann, ist ein starkes 2D-Design mit gezielten Motion-Akzenten oft die klügere Wahl. Ehrlich beraten heißt manchmal, von 3D abzuraten.

Der ehrliche Haken: Performance

Hier kommt der Teil, den Inspirations-Galerien wie Awwwards oder Lapa 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, KTX2-Texturen, dem Nachladen der 3D-Szene erst wenn sie gebraucht wird, und einem Vertex- und Draw-Call-Budget: als grobe Orientierung wenige hundert Draw Calls und ein paar hunderttausend Vertices, nicht Millionen. InstancedMesh und BatchedMesh bündeln viele gleiche Objekte in einen einzigen Draw Call. Optimierung ist hier keine Kür, sondern die Grundvoraussetzung dafür, dass die Seite überhaupt gut funktioniert.

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, und On-Demand-Rendering, das nur neu zeichnet, wenn sich wirklich etwas ändert, statt in Endlosschleife die Grafikkarte zu belasten. Wenn die Szene nicht im Blick ist, wird gerendert pausiert. So bleibt die Seite auf dem Gerät kühl, das die Mehrheit deiner Besucher tatsächlich in der Hand hält.

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, die Interaction to Next Paint verschlechtern. Das ist nicht nur ein Nutzer-Thema, sondern ein Ranking-Faktor. Deshalb prüfen wir jede 3D-Seite gegen die Core Web Vitals und stellen sicher, dass der erste sichtbare Inhalt schnell da ist, auch wenn die 3D-Szene im Hintergrund noch lädt.

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 prefers-reduced-motion und stellen für Suchmaschinen und KI-Crawler sicher, dass die eigentlichen Inhalte auch ohne gerendertes 3D im HTML stehen. Denn Crawler wie GPTBot rendern kein aufwändiges JavaScript. Eine 3D-Seite, deren Text nur in der WebGL-Szene lebt, ist für Google und ChatGPT unsichtbar.

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.

Was kostet eine 3D-Website?

Eine pauschale Zahl wäre unseriös, weil der Aufwand extrem von der Komplexität abhängt. Ein einzelnes eingebettetes Spline-Objekt ist eine Sache von Stunden. Ein Hero mit maßgeschneiderter Scroll-Interaktion, echten 3D-Modellen und sauberer Performance-Optimierung ist ein eigenes Teilprojekt. Ein vollwertiger Produkt-Konfigurator mit Varianten-Logik, Anbindung und Konvertierung ist noch einmal eine andere Größenordnung.

Als grobe Orientierung aus der Praxis: Ein einfacher Konfigurator startet international oft im Bereich von rund 15.000 Euro, eine immersive Marken-Website mit mehreren 3D-Szenen bewegt sich schnell im höheren fünfstelligen Bereich. Was den Preis wirklich bestimmt, ist nicht die Zahl der Polygone, sondern wie individuell die Interaktion ist und wie hart die Performance-Anforderungen sind. Wir kalkulieren immer projektbezogen und sagen dir früh, ob 3D für dein Ziel den Aufwand wert ist oder ob ein leichteres Motion-Konzept mehr bringt.

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 ein paar Kilobyte Vektor-Animation. So entsteht eine Seite, die durchgehend lebendig wirkt, ohne überall die Grafikkarte zu belasten.

Genau so denken wir 3D: nicht als Selbstzweck, sondern als stärkstes Werkzeug in einem abgestuften Motion-System, das auf jedem Gerät funktioniert. Wenn du überlegst, ob und wo 3D für deine Marke Sinn ergibt, schauen wir uns dein Projekt ehrlich an, inklusive der Fälle, in denen die klügere Antwort kein 3D ist.

Häufige Fragen