3D-Webentwicklung — der komplette Überblick.

Was 3D-Webentwicklung ist.

Lange war 3D im Netz gleichbedeutend mit Videos, gerenderten Bildern oder schweren Plugins wie Flash. Heute kann jeder aktuelle Browser dreidimensionale Szenen in Echtzeit berechnen — auf dem Desktop genauso wie auf dem Smartphone. Das verändert, was eine Website sein kann: Statt ein Produkt nur zu zeigen, lässt sie Besucher es drehen, zerlegen, umfärben und in den eigenen Raum stellen.

3D-Webentwicklung liegt dabei zwischen zwei Welten. Von der 3D-Grafik kommen Modelle, Materialien, Licht und Kamera. Von der Webentwicklung kommen Ladezeit, Barrierefreiheit, Suchmaschinen, Formulare, Shops und Content-Management-Systeme. Ein gutes 3D-Projekt braucht beides — eine beeindruckende Szene, die niemand findet oder die auf dem Smartphone ruckelt, bringt einem Unternehmen nichts.

Wichtig ist auch die Abgrenzung: Ein gerendertes Video oder eine 360-Grad-Fotoserie sieht dreidimensional aus, ist aber vorberechnet. Bei echter 3D-Webentwicklung entsteht jedes Bild in dem Moment, in dem der Besucher etwas tut. Nur so sind Konfiguration, freie Blickwinkel und Interaktion möglich.

Die Technik dahinter.

Für die meisten Unternehmensprojekte ist Three.js die richtige Grundlage: ausgereift, kostenlos, mit großem Ökosystem und vielen Entwicklern, die es beherrschen. Reine Viewer ohne besondere Logik lassen sich auch mit model-viewer umsetzen. Spiele-Engines wie Unity sind für Websites dagegen meist zu schwer, weil sie deutlich größere Downloads erzeugen. Die wichtigste Alternative zu Three.js ist Babylon.js — ein ehrlicher Vergleich steht unter Three.js oder Babylon.js?.

Sieben Anwendungen im Überblick.

1. Produktkonfigurator

Kunden stellen ein Produkt aus Maßen, Farben, Materialien und Zubehör zusammen, sehen das Ergebnis sofort und bekommen einen Live-Preis. Abschluss ist eine Anfrage oder ein Kauf. Der wirtschaftlich stärkste Einsatz von 3D, besonders bei Produkten mit vielen Varianten. → 3D-Konfigurator erstellen lassen

2. 3D-Produktansicht

Ein Produkt frei drehen und zoomen, oft direkt in der Galerie eines Shops, optional mit AR-Ansicht im eigenen Raum. Der schlanke Einstieg in 3D. → WooCommerce 3D-Produktansicht

3. Explosionszeichnung

Ein technisches Produkt fährt auseinander, Hotspots erklären jede Baugruppe. Macht sichtbar, was im Inneren verkauft. → Interaktive Explosionszeichnung

4. Digitaler Zwilling

Eine Anlage oder Fertigungszelle läuft als bewegtes 3D-Modell im Browser — für Vertrieb, Messe, Schulung oder mit echten Maschinendaten. → Digitaler Zwilling im Browser

5. Scroll-Story

Beim Scrollen entsteht ein Gebäude, ein Produkt oder ein Ablauf Schritt für Schritt. Sehr zugänglich, weil Besucher nichts lernen müssen. → 3D-Scroll-Animation

6. 3D-Umgebung

Ein ganzer Raum statt eines Objekts: virtueller Showroom, Werksrundgang, Messestand oder Gebäude. → 3D-Umgebung in WordPress

7. Erklärung erklärungsbedürftiger Produkte

Implantate, Medizingeräte und komplexe Technik, die sich mit Fotos nicht verstehen lässt — Schnittansichten, Funktionsweise, Anwendung. → 3D für Medizintechnik und 3D für den Maschinenbau

Und über die Website hinaus

Dieselben Anwendungen laufen auf Touchscreens am Messestand, als AR-Ansicht im Raum des Kunden und in der Immobilienvermarktung. Einen Überblick über alle Formen gibt 3D-Produktvisualisierung, live ausprobieren lassen sie sich unter 3D-Website Beispiele. Ob 360-Grad-Fotos nicht reichen, klärt 360 Grad oder 3D-Modell?.

Wann sich 3D lohnt — und wann nicht.

Die ehrliche Faustregel: 3D ist kein Selbstzweck. Es lohnt sich dort, wo es eine Frage beantwortet, die ein Kunde sonst per E-Mail, am Telefon oder gar nicht gestellt hätte. Für eine reine Dienstleister-Website bringt eine starke klassische Seite oft mehr.

3D in WordPress.

Die meisten mittelständischen Unternehmen haben eine WordPress-Website. 3D muss deshalb nicht auf einer separaten Plattform laufen — es gehört in die bestehende Seite, auf dieselbe Domain, mit denselben Formularen und demselben Shop.

• Einbindung: als eigenes Plugin mit Shortcode, Gutenberg-Block oder Elementor-Widget. Grundlagen: Three.js in WordPress einbinden.
• Konfiguratoren: mit Pflege im Backend — 3D-Konfigurator für WordPress, als Shop-Lösung WooCommerce 3D-Konfigurator oder für B2B und Handwerk mit Anfrage statt Warenkorb.
• Dateien: WordPress lehnt 3D-Modelle zunächst ab — GLB-Dateien hochladen.
• Ladezeit: Optimierungs-Plugins legen 3D gern lahm — 3D in WordPress schnell halten.
• Entscheidung: Plugin, Software im Abo oder individuelle Entwicklung?

3D-Modelle: Herkunft, Formate, Optimierung.

Jedes 3D-Projekt steht und fällt mit den Modellen. Es gibt drei Quellen:

• CAD-Daten aus der Konstruktion: präzise, aber viel zu detailliert für den Browser. Sie werden vereinfacht, Innenleben ohne Sichtbarkeit entfernt, Materialien neu angelegt.
• Modellierung in Blender: wenn keine Daten vorliegen oder ein Produkt stilisiert gezeigt werden soll.
• Prozedural im Code: das Modell wird aus Parametern berechnet. Ideal für Konfiguratoren mit stufenlosen Maßen — statt hunderter Einzelmodelle gibt es eine Regel.

Fürs Web wird fast immer GLB verwendet. Die Dateigröße entscheidet über Ladezeit: Texturen auf 1K–2K verkleinern, Geometrie mit Draco oder Meshopt komprimieren, überflüssige Polygone reduzieren. Als Orientierung sollte ein einzelnes Produktmodell möglichst unter 3–5 MB bleiben. Details: 3D-Modell auf Website einbinden und Blender-Modell fürs Web exportieren.

Performance auf allen Geräten.

Die meisten 3D-Projekte scheitern nicht an der Idee, sondern an einem Mittelklasse-Smartphone. Die wichtigsten Grundsätze:

• Erst laden, wenn nötig: Die Szene startet bei Sichtbarkeit oder per Klick, bis dahin steht ein Vorschaubild.
• Pixeldichte begrenzen: Hochauflösende Displays sonst mit drei- bis vierfacher Rechenlast.
• Draw Calls reduzieren: Objekte zusammenfassen, Wiederholungen per Instancing zeichnen.
• Licht vorberechnen: Schatten in Texturen backen statt in Echtzeit.
• Nur rendern, wenn sich etwas ändert oder die Szene sichtbar ist.

Ausführlich: Three.js Performance optimieren und für WordPress 3D in WordPress schnell halten.

3D und SEO.

Suchmaschinen können eine 3D-Szene nicht lesen. Eine Seite, die nur aus einem Canvas besteht, ist für Google fast leer. Deshalb gilt für jede 3D-Seite:

• Textfundament: Produktbeschreibung, Varianten, Maße, Anwendungen und FAQ als echter Text auf derselben Seite.
• Inhalte der Szene auch als Text: Hotspot-Informationen zusätzlich als gegliederte Liste — hilft Google, Screenreadern und KI-Suchsystemen gleichermaßen.
• Ladezeit schützen: Vorschaubild mit festen Maßen, verzögerter Start, keine Layout-Sprünge.
• Eigene Domain: 3D auf der eigenen Website statt auf einer fremden Konfigurator-Plattform, damit die Aufmerksamkeit auf die eigene Seite einzahlt.
• Strukturierte Daten für Produkt, Leistung, Artikel und FAQ.

Richtig umgesetzt ist 3D ein SEO-Vorteil: Besucher bleiben länger, interagieren mehr und fragen häufiger an — und die Seite hat Inhalte, die Wettbewerber mit Stockfotos nicht bieten.

Ablauf eines 3D-Projekts.

1. Ziel klären: Welche Frage soll 3D beantworten, und was soll danach passieren — Anfrage, Kauf, Verständnis?
2. Machbarkeit: Welche Daten gibt es, auf welchen Geräten muss es laufen, welche Website-Umgebung ist vorhanden?
3. Konzept: Interaktionen, Optionen, Regeln, Kamera, Abschluss. Daraus entsteht ein Festpreisangebot.
4. Modelle: aufbereiten, modellieren oder prozedural erzeugen, für den Browser optimieren.
5. Entwicklung auf einer Testumgebung mit Link zum Ausprobieren.
6. Test auf echten Geräten, besonders Smartphones der Mittelklasse.
7. Einbindung in die Website, Textfundament, Messung, Livegang.

Kosten.

Das sind Orientierungswerte, keine Fixpreise. Den größten Einfluss haben Zustand der Modelldaten, Anzahl der Optionen und Regeln sowie die Anbindung an Shop oder Systeme. Laufende Lizenzkosten fallen bei individueller Entwicklung nicht an. Ausführlich: 3D-Konfigurator Kosten.

Wer 3D-Websites baut.

Für 3D-Websites braucht es jemanden, der 3D-Grafik und Webentwicklung verbindet. Reine Webagenturen haben selten Erfahrung mit Echtzeit-3D, reine 3D-Artists selten mit Ladezeit, SEO und WordPress. Die Rolle dazwischen heißt meist 3D-Webentwickler oder Three.js-Entwickler. Mehr dazu: 3D Webentwickler und Three.js Entwickler. Ob eine Agentur oder ein Freelancer besser passt, vergleicht Three.js Agentur oder Freelancer?.

Ich arbeite genau an dieser Schnittstelle: seit 2020 als Web- und WordPress-Entwickler, heute spezialisiert auf Three.js, mit Modellen aus Blender und prozedural im Code. Projekte setze ich deutschlandweit remote um.

Glossar.

WebGL

Browser-Schnittstelle, über die Webseiten die Grafikkarte für 2D- und 3D-Grafik nutzen.

WebGPU

Neuere Grafikschnittstelle für Browser mit mehr Leistung und moderner Architektur.

Three.js

Kostenlose JavaScript-Bibliothek, die WebGL und WebGPU vereinfacht und die meisten 3D-Websites antreibt.

glTF / GLB

Offenes Standardformat für 3D-Modelle im Web; GLB ist die binäre Variante in einer einzigen Datei.

PBR-Material

Physikalisch basiertes Material, das Oberflächen über Farbe, Metallizität und Rauheit realistisch beschreibt.

Draco / Meshopt

Kompressionsverfahren, die die Geometrie von 3D-Modellen stark verkleinern.

Draw Call

Ein einzelner Zeichenbefehl an die Grafikkarte; viele Draw Calls machen Szenen langsam.

Instancing

Technik, gleiche Objekte vielfach mit einem einzigen Zeichenbefehl darzustellen.

Hotspot

Klickbarer Informationspunkt an einer Stelle im 3D-Modell.

Digitaler Zwilling

Virtuelles Abbild einer realen Anlage oder eines Produkts, oft mit Bewegung oder echten Daten.

Web-AR

Augmented Reality direkt aus dem Browser, bei der ein Produkt per Smartphone-Kamera im eigenen Raum erscheint.

Prozedurales Modell

3D-Modell, das aus Parametern im Code berechnet wird, statt als feste Datei vorzuliegen.

Alle Ratgeber.

Jede Seite vertieft ein Teilthema dieses Überblicks.

Grundlagen & Technik

Anwendungen

3D in WordPress

Modelle, Performance & Kosten

Branchen, Formen & Vergleiche

Formate, Optimierung & neue Techniken