3D-Website erstellen: der komplette Leitfaden.

Ein Datenblatt beschreibt. Ein Foto zeigt einen Moment. Aber wenn dein Produkt erklärungsbedürftig oder konfigurierbar ist, stoßen beide an eine Grenze: Sie können nicht zeigen, wie etwas funktioniert, was drinsteckt oder wie die gewählte Variante am Ende aussieht.

Genau da setzen 3D-Websites an. Dieser Leitfaden erklärt sie vollständig — von der Technik über die Kosten bis zur Frage, ob sich der Aufwand in deinem Fall überhaupt rechnet. Ich bin Manuel Killert, entwickle seit 2020 Websites und habe mich auf Three.js spezialisiert. Alle Beispiele hier stammen aus meiner eigenen Arbeit und laufen live.

Was ist eine 3D-Website?

Eine 3D-Website ist eine normale Website, die zusätzlich ein interaktives dreidimensionales Modell enthält. Besucher können dieses Modell drehen, zoomen, verändern oder durch Scrollen animieren — direkt im Browserfenster.

Möglich macht das WebGL: eine Schnittstelle, über die eine Website auf die Grafikkarte zugreifen darf. Jeder aktuelle Browser auf Desktop und Smartphone beherrscht das seit Jahren. WebGL direkt zu programmieren ist allerdings sehr aufwendig — deshalb nutzt man in der Praxis fast immer Three.js, eine offene JavaScript-Bibliothek, die diese Arbeit abnimmt und der De-facto-Standard für 3D im Web ist.

Wichtig zur Einordnung: Das hat nichts mit VR-Brillen oder Spiele-Engines zu tun. Es braucht keinen Download, keine App und kein Plugin. Ein Link genügt — auf dem Messestand-Tablet genauso wie auf dem Smartphone deines Kunden.

Welche Art passt zu dir?

Die richtige Form ergibt sich fast immer aus dem Ziel, nicht aus dem Budget:

Wann lohnt sich 3D — und wann nicht?

Das ist der Abschnitt, den die meisten Anbieter auslassen. 3D ist kein Selbstzweck und rechnet sich nicht überall.

3D lohnt sich, wenn …

• dein Produkt erklärungsbedürftig ist und Kunden es sonst nicht verstehen,
• es konfigurierbar ist und Varianten sonst mühsam zu vermitteln sind,
• du hochpreisig verkaufst und Vertrauen vor dem Kauf entstehen muss,
• du auf Messen auffallen oder im Vertriebsgespräch etwas zeigen willst,
• dein Markt technisch geprägt ist und alle Wettbewerber gleich aussehen.

3D lohnt sich eher nicht, wenn …

• du eine reine Dienstleistung anbietest, bei der es nichts zu zeigen gibt,
• dein Produkt selbsterklärend ist — ein gutes Foto reicht dann völlig,
• deine Website grundsätzliche Probleme hat: schlechte Ladezeit, kein klares Angebot, keine Anfragen. Dann bringt 3D obendrauf nichts; die Basis muss zuerst stimmen,
• du schnell viele Besucher brauchst — dafür sind Inhalte und Sichtbarkeit der bessere Hebel als Technik.

Was kostet eine 3D-Website?

Der Preis hängt vor allem an drei Dingen: wie komplex das Modell ist, wie viel Interaktion es geben soll und ob verwertbare CAD-Daten existieren. Die folgenden Zahlen sind Orientierung, keine Fixpreise — den echten Preis gibt es erst nach einem Gespräch über dein konkretes Vorhaben.

Dazu kommen laufende Kosten, die aber überschaubar bleiben: Hosting läuft wie bei jeder Website weiter (3D-Szenen brauchen keinen Spezialserver, sie laufen im Browser des Besuchers). Einzuplanen sind Wartung und gelegentliche Anpassungen — etwa wenn neue Produktvarianten dazukommen.

Was den Preis am stärksten senkt: brauchbare CAD-Daten. Existieren sie bereits, entfällt der aufwendigste Teil. Was ihn treibt: viele Varianten, exakte Materialdarstellung und Sonderlogik wie Preisberechnung oder Anbindung an ein Warenwirtschaftssystem.

Woher kommt das 3D-Modell?

Es gibt zwei Wege — und der Unterschied wirkt sich stark auf Budget und Flexibilität aus.

Weg 1: Vorhandene CAD-Daten

Wenn dein Produkt konstruiert wurde, existiert es bereits digital (etwa als STEP- oder GLB-Datei). Diese Daten sind allerdings für Fertigung gemacht, nicht fürs Web: viel zu detailliert und viel zu groß. Sie werden deshalb reduziert und optimiert, bis sie schnell laden, aber noch korrekt aussehen. Das ist meist der günstigere Weg.

Weg 2: Prozedural im Code gebaut

Hier entsteht das Modell durch Programmierung: Statt einer festen Datei beschreibt Code die Geometrie. Der Vorteil ist groß — jede Variante entsteht automatisch aus derselben Logik. Beim EICHWERK-Konfigurator ist das gesamte Möbelstück so gebaut: Ändert der Kunde die Maße, wird die Geometrie neu berechnet, statt aus hunderten vorbereiteten Dateien zu wählen. Das lohnt sich immer dann, wenn es sehr viele Varianten gibt.

Performance und Mobilgeräte.

Der häufigste Einwand gegen 3D lautet: „Das ruckelt doch und lädt ewig." Berechtigt — allerdings nur bei schlecht gebauten Umsetzungen. Sauber gemacht, ist 3D auf Mobilgeräten problemlos möglich. Entscheidend sind vier Dinge:

• Reduzierte Modelle: Nur so viele Details wie nötig. Was man nicht sieht, wird entfernt.
• Lazy Loading: Die 3D-Szene lädt erst, wenn der Besucher sie tatsächlich erreicht — der Seitenaufbau bleibt schnell.
• Geräteabhängige Qualität: Ein älteres Smartphone bekommt eine leichtere Version als ein Desktop-Rechner.
• Textfundament: Die Seite funktioniert auch ohne 3D. Das ist wichtig für Suchmaschinen — und für Besucher, deren Gerät nicht mitspielt.

Der letzte Punkt wird oft übersehen: Eine 3D-Szene ist für Google unsichtbar. Deshalb braucht jede 3D-Seite echten, gut strukturierten Text — sonst hast du ein beeindruckendes Erlebnis, das niemand findet.

3D in WordPress einbinden.

Eine häufige Sorge: „Müssen wir dafür unsere Website neu bauen?" In den meisten Fällen nein. Die 3D-Szene wird als eigenständiges Modul in die bestehende Seite eingebunden — der Rest bleibt, wie er ist.

Ebenso wichtig: Dein Team muss die Seite weiter selbst pflegen können. Texte, Bilder und Inhalte rund um die 3D-Szene bleiben deshalb ganz normal in WordPress bearbeitbar. Nur das 3D-Modul selbst ist Entwicklerarbeit. Wie das in der Praxis aussieht, zeigt Horizont Bau — eine WordPress-Website, deren Herzstück eine scrollgesteuerte 3D-Baureise ist.

Wie ein 3D-Projekt abläuft.

3D-Projekte scheitern selten an der Technik, sondern daran, dass am Ende etwas anderes herauskommt als gedacht. Deshalb arbeite ich in sichtbaren Zwischenständen statt auf ein großes Finale hin:

• 1. Erstgespräch. Was willst du zeigen, wem, und mit welchem Ziel? Hier klärt sich auch, ob 3D überhaupt der richtige Weg ist.
• 2. Konzept & Machbarkeit. Welche Art passt, welche Daten gibt es, was kostet es. Danach steht ein Festpreis.
• 3. Prototyp. Eine frühe, klickbare Version der Szene als Link — du siehst und bewertest, bevor Details ausgearbeitet sind.
• 4. Ausbau. Interaktion, Material, Licht, Feinschliff. Zwischenstände kommen als kurze Erklärvideos, damit du nicht in Meetings sitzen musst.
• 5. Integration & Übergabe. Einbau in die Website, Performance-Optimierung, Übergabe mit Erklärung.