3D-Modell in die Website einbinden: Optionen, Dateiformate und Ladezeit

Wer ein 3D-Modell in die Website einbinden möchte, hat heute vier realistische Wege: eine fertige Web-Komponente wie <model-viewer>, eine eigene Lösung mit Three.js, ein iframe auf eine separate 3D-Seite oder den Player einer Plattform (etwa die 3D-Medien eines Shopsystems). Welcher Weg passt, hängt weniger von der Technik ab als von drei Fragen: Soll der Kunde nur drehen und zoomen, oder soll er etwas verändern? Wie schwer darf die Seite werden? Und wer pflegt das Ganze später?

Dieser Ratgeber geht die Optionen der Reihe nach durch, erklärt die Dateiformate (glTF/GLB, USDZ) und zeigt, wie eine Seite mit 3D trotzdem schnell, barrierearm und für Suchmaschinen lesbar bleibt. Die Beispiele stammen aus unseren eigenen Demos; die genannten Messwerte sind Labormessungen (Lighthouse und Desktop-Chrome mit emulierten Mobilgeräten), keine Tests auf echten Telefonen.

Die vier Wege im Überblick

1. model-viewer: der schnellste Weg zur 3D-Produktansicht

<model-viewer> ist eine quelloffene Web-Komponente von Google. Ein Tag mit src auf eine GLB-Datei genügt für Drehen, Zoomen und Licht. Die Dokumentation beschreibt unter anderem diese Attribute ^[1]:

• poster: zeigt ein Bild, bis das Modell geladen ist.
• loading: steuert, wann das Modell vorgeladen wird (Standard auto, eager lädt sofort).
• reveal: mit manual bleibt das Poster stehen, bis Ihr Skript dismissPoster() aufruft – praktisch für einen „3D ansehen“-Knopf.
• alt: eine Textbeschreibung des Modells für Screenreader.
• ar und ar-modes: AR-Start auf geeigneten Geräten, wahlweise über WebXR, Scene Viewer (Android) oder Quick Look (iOS).

Für einfache Produktansichten ist das oft genug. Sobald aber Varianten voneinander abhängen, Teile sich bewegen sollen oder der Preis mitlaufen muss, wird es mühsam: Die Komponente ist bewusst ein Viewer, kein Konfigurator.

2. Eigene Lösung mit Three.js

Three.js ist die verbreitetste JavaScript-Bibliothek für WebGL. Sie gibt volle Kontrolle über Szene, Materialien, Kamera und Render-Schleife ^[2]. Damit lassen sich Dinge bauen, die ein fertiger Viewer nicht kann: eine Explosionsansicht in Montagereihenfolge, Regeln, die nur gültige Kombinationen zulassen, Hinweise direkt am Bauteil oder ein Modell, das der Auswahl in der Kaufbox folgt.

Der Preis dafür ist Entwicklungsarbeit. Ladeverhalten, Speicherfreigabe beim Wechsel, Touch-Bedienung und Fehlerfälle (kein WebGL, verlorener Grafikkontext) müssen Sie selbst lösen. Was das im Projektablauf bedeutet, beschreibt der Ratgeber Produktkonfigurator erstellen.

Eigene Demo · fiktives Produkt

Ohrhörer mit Ladecase

Ein generisches Elektronikprodukt: Deckel öffnen, Bauteile auseinanderziehen, Funktionen am Modell erklären.

In 3D ansehen →

3. iframe: 3D als eigene Seite einbetten

Ein iframe lädt die 3D-Ansicht als eigenständige Seite in Ihre Seite. Das ist robust und trennt die 3D-Technik sauber vom CMS oder Shop-Theme. Iframes unterstützen loading="lazy", damit der Browser sie erst lädt, wenn der Nutzer in die Nähe scrollt; laut web.dev wird das von allen großen Browsern unterstützt ^[3]. Gedacht ist das für iframes außerhalb des sichtbaren Bereichs; ein iframe ganz oben auf der Seite lädt man besser sofort.

Zwei Dinge sollten Sie einplanen: Die Höhe des iframes muss zum Seitenformat passen (auf dem Handy eher hochkant), und wenn die 3D-Ansicht mit der Seite sprechen soll – etwa „Variante gewählt, bitte Preis aktualisieren“ –, läuft das über postMessage. In unserer Fallstudie ALUXIL startet das Modell auf modelwright.de zum Beispiel erst nach einem Klick in einem iframe, damit die Seite selbst leicht bleibt.

4. Plattform-Player

Shopsysteme und 3D-Hosting-Dienste bringen eigene Player mit. Shopify nimmt zum Beispiel GLB- und USDZ-Dateien als Produktmedien an ^[4], Shopware zeigt GLB-Modelle als 3D-Produktbild ^[5]. Das ist der einfachste Weg, wenn ein Modell pro Produkt genügt. Mehr dazu im Ratgeber 3D-Konfigurator für Shopify und Shopware. Bei externen Hosting-Diensten lohnt ein Blick in Datenschutz und Einwilligung: Lädt der Player Dateien von fremden Servern, gehört er unter Umständen in den Consent-Banner.

Dateiformate: glTF/GLB, USDZ und was sonst noch vorkommt

glTF ist der offene Standard der Khronos Group für die effiziente Übertragung und das Laden von 3D-Szenen; seit 2022 ist glTF 2.0 als ISO/IEC 12113:2022 genormt ^[6]. GLB ist die binäre Variante: Geometrie, Materialien und Texturen in einer Datei. Für das Web ist GLB praktisch immer die erste Wahl, weil es PBR-Materialien (Metall, Rauheit, Glanz) mitbringt, die in allen gängigen Viewern gleich aussehen.

USDZ ist das Format, das Apples AR Quick Look auf iPhone und iPad öffnet. Auf einer Webseite genügt ein Link mit rel="ar" auf die USDZ-Datei; der Link muss genau ein img- oder picture-Element enthalten ^[7]. model-viewer kann eine USDZ-Datei auch im Browser erzeugen, wenn Sie keine eigene über ios-src angeben ^[1]. Ob AR für Ihr Produkt sinnvoll ist, hängt vom Produkt ab: Ein Sessel im eigenen Wohnzimmer überzeugt, eine Platine in AR eher nicht. Wir prüfen AR deshalb je Projekt und bieten es nicht pauschal an.

Nicht fürs Web gedacht sind Konstruktionsformate wie STEP, IGES oder die nativen Dateien der CAD-Systeme. Sie beschreiben exakte Flächen, keine Dreiecke, und enthalten oft Details, die niemand sehen soll. Wie daraus ein leichtes GLB wird, steht im Ratgeber CAD-Daten für Web-3D. OBJ und FBX begegnen einem noch häufig; für die Auslieferung im Browser wandelt man sie besser in GLB um.

Ladezeit: so bleibt die Seite schnell

Das häufigste Problem mit 3D auf Webseiten ist nicht die Dateigröße, sondern der Start. Wenn der Browser beim Seitenaufruf Shader kompiliert, Geometrie aufbaut und Texturen hochlädt, ist der Hauptthread blockiert, und die Seite reagiert spät. Das zeigte eine Labormessung an unseren eigenen Demos (Lighthouse 12.2, Mobilprofil emuliert auf einem MacBook, kein echtes Smartphone, Oktober 2026): Solange die 3D-Ansicht beim Laden startete, lag die Total Blocking Time auf der Seite der Kosmetikflasche bei rund 10,3 Sekunden. Nachdem die 3D-Ansicht erst auf Antippen startet und vorher ein Video oder Poster zeigt, lag sie bei 0 ms. Ehrlich gesagt: Die Startkosten sind damit nicht verschwunden, sie fallen erst an, wenn der Nutzer 3D wirklich will. Auf echten Telefonen haben wir das nicht gemessen; dort ist mit einem längeren Start als im Labor zu rechnen.

Daraus ergeben sich diese Regeln:

1. Poster oder Video zuerst. Ein Standbild (oder ein kurzes, stummes Video aus dem echten Modell) erscheint sofort und wird zum größten sichtbaren Element der Seite. Die interaktive 3D-Ansicht startet auf Klick oder Antippen. Unsere Vorschauvideos sind auf dem Handy etwa 100–370 KB groß und laden erst, wenn sie zu großen Teilen sichtbar sind.
2. Lazy Loading. 3D-Bereiche unterhalb des sichtbaren Bereichs laden erst, wenn der Nutzer in die Nähe scrollt – per loading="lazy" beim iframe ^[3], per loading bei model-viewer ^[1] oder per IntersectionObserver in einer eigenen Lösung. Unsere Ansicht pausiert außerdem, sobald sie aus dem Bild gescrollt wird.
3. Geometrie komprimieren. Für glTF gibt es zwei verbreitete Kompressionen: Draco (KHR_draco_mesh_compression) ^[8] und Meshopt (EXT_meshopt_compression) ^[9]. Meshopt ist laut Spezifikation auf schnelles Dekodieren ausgelegt (rund 1 GB/s auf aktueller Desktop-Hardware) und arbeitet gut mit quantisierten Daten (KHR_mesh_quantization) zusammen ^[9]. Die meisten GLB-Dateien unserer Demos packen wir mit gltfpack und Meshopt; die fertigen Modelle liegen zwischen etwa 0,35 und 1,6 MB. Wichtig: Der Viewer muss den passenden Decoder laden. Bei model-viewer ist der Meshopt-Decoder standardmäßig nicht aktiv, der Draco-Decoder kommt standardmäßig von einem Google-CDN (Stand: Oktober 2026) ^[1] – beides sollten Sie bewusst einstellen.
4. Texturgrößen begrenzen. Eine 4096 × 4096-Textur belegt unkomprimiert rund 64 MB Grafikspeicher, egal wie klein die JPG-Datei ist. Für die meisten Produkte reichen 1024 oder 2048 Pixel, Details wie Gravuren entstehen oft besser in der Geometrie oder in einer gezielten Detailtextur. GPU-komprimierte Texturen (KTX2/Basis Universal) sind eine Option, wenn viele große Texturen nötig sind.
5. Pixel-Ratio deckeln. Moderne Handys haben eine Pixeldichte von 3. Wer mit voller Auflösung rendert, berechnet neunmal so viele Pixel wie bei Pixeldichte 1. Three.js stellt das über setPixelRatio() ein ^[2]. Unsere Ansicht rendert während der Bewegung mit höchstens 1,25 und zeichnet, sobald die Ansicht steht, ein scharfes Bild mit bis zu 2.
6. Nur rendern, wenn sich etwas bewegt. Eine Produktansicht, die nichts tut, muss auch nicht 60-mal pro Sekunde zeichnen. Rendern auf Anforderung schont Akku und lässt den Lüfter in Ruhe.

Eigene Demo · fiktives Produkt

Solitär-Ring

Ein Verlobungsring mit Fassung, Stein und Gravur – in Metall, Stein und Größe frei wählbar.

In 3D ansehen →

Zum Vergleich, was danach bleibt: In der Labormessung mit emuliertem Smartphone (Desktop-Chrome, CPU vierfach gedrosselt, Grafikkarte des Macs ungedrosselt) dauerte der Start der 3D-Ansicht nach dem Klick bei unseren Demos zwischen etwa 0,5 Sekunden (Ring) und 2 Sekunden (Lastenrad); beim Drehen hielten alle in der Emulation 60 Bilder pro Sekunde. Auf echten Geräten haben wir das nicht gemessen, deshalb sind es ausdrücklich Laborwerte.

Barrierefreiheit: 3D ist eine Ergänzung, kein Ersatz

Eine 3D-Ansicht ist für Screenreader-Nutzer zunächst eine leere Fläche. Deshalb:

• Textalternative. Geben Sie der Ansicht eine kurze Beschreibung: bei model-viewer über alt ^[1], bei einer eigenen Canvas-Lösung über role="img" und aria-label. Beschreiben Sie das Produkt, nicht die Technik („Ohrhörer im geöffneten Ladecase, Bauteile auseinandergezogen“ statt „3D-Modell“).
• Alle Informationen auch als Text. Maße, Materialien und Optionen gehören in den normalen Seitentext. Was nur im 3D-Bild steht, erreicht nicht jeden.
• Bedienbar per Tastatur. Schalter für Varianten, Explosionsansicht oder Hinweise sind echte Buttons mit Beschriftung, nicht nur Klickflächen im Bild.
• Bewegung respektieren. Die Medienabfrage prefers-reduced-motion zeigt, ob Nutzer weniger Animation wünschen ^[10]. Dann sollten Auto-Rotation und automatisch startende Videos aus bleiben.
• Scrollen nicht blockieren. Auf dem Handy darf eine 3D-Fläche das Scrollen der Seite nicht verschlucken. Bei unseren Demos dreht ein seitliches Wischen das Modell, ein senkrechtes scrollt die Seite (geprüft mit emulierter Touch-Bedienung).

SEO: was Google von Ihrem 3D-Modell sieht

Google rendert JavaScript mit einem Headless-Chromium, sieht aber nur, was im gerenderten HTML steht ^[11]. Ein 3D-Modell in einem Canvas ist für die Suche ein Bild ohne Text. Daraus folgt:

• Crawlbarer Text um das Modell. Produktname, Beschreibung, Varianten und Maße als normales HTML, nicht nur als Beschriftung im 3D.
• Ein Poster mit Alt-Text. Das Vorschaubild ist ein echtes img mit sprechendem alt und kann in der Bildersuche erscheinen.
• Links als echte Links. Google findet Links nur, wenn sie <a>-Elemente mit href sind ^[11]. Varianten, die eigene Seiten haben, sollten auch verlinkt sein, nicht nur per Klick im Modell erreichbar.
• Nichts Wichtiges hinter Interaktion verstecken. Inhalte, die erst nach einem Klick in die 3D-Ansicht erscheinen, sollten Sie nicht als einzige Quelle einer Information behandeln.
• Ladezeit zählt. Wer das 3D-Modell erst auf Wunsch startet, schützt die Ladezeit der Seite, und damit auch die Nutzererfahrung, die Google misst.

Eigene Demo · fiktives Produkt

Stirnradgetriebe

Ein Lehrbuch-Getriebe für Vertrieb und Schulung: Deckel transparent, Explosion, laufender Antrieb mit Übersetzung.

In 3D ansehen →

Checkliste: 3D-Modell einbinden

• Ziel klären: nur ansehen (3D-Produktansicht) oder auch konfigurieren (3D-Konfigurator)?
• Modell als GLB, komprimiert (Meshopt oder Draco), Texturen meist ≤ 2048 px.
• Poster oder kurzes Video sofort, interaktives 3D auf Klick oder Antippen.
• Unterhalb des sichtbaren Bereichs: Lazy Loading.
• Pixel-Ratio gedeckelt, Rendern nur bei Bewegung.
• Alt-Text, alle Fakten als HTML-Text, Bedienung per Tastatur, prefers-reduced-motion beachtet.
• AR (USDZ für iOS) nur, wenn das Produkt im Raum wirklich etwas zeigt.
• Datenschutz: Dateien möglichst vom eigenen Server; externe Player prüfen.

Was eine individuelle Lösung kostet, beschreibt der Ratgeber Was kostet ein 3D-Konfigurator?. Einen Überblick über unsere Arbeit finden Sie unter Leistungen und in den Beispielen.

Häufige Fragen

Welches Dateiformat brauche ich für 3D auf der Website?

Für den Browser ist GLB (die binäre Form von glTF) der Standard: eine Datei mit Geometrie, Materialien und Texturen, die alle gängigen Viewer gleich darstellen ^[6]. USDZ kommt nur dazu, wenn Sie AR auf iPhone und iPad anbieten möchten ^[7]. CAD-Formate wie STEP müssen vorher in ein leichtes Netzmodell umgewandelt werden.

Wie groß darf ein 3D-Modell für das Web sein?

Eine feste Grenze gibt es nicht, aber jedes Megabyte kostet auf dem Handy Ladezeit. Unsere komprimierten Demo-Modelle liegen zwischen etwa 0,35 und 1,6 MB. Wichtiger als die Dateigröße ist, dass das Modell nicht beim Seitenaufruf startet und die Texturen nicht unnötig groß sind.

Brauche ich für 3D auf der Website eine Agentur?

Für ein einzelnes Modell zum Drehen nicht unbedingt: Mit model-viewer oder den 3D-Medien Ihres Shopsystems geht das ohne eigenen Code ^[1]. Eine Agentur lohnt sich, wenn das Modell Varianten, Regeln, eine Explosionsansicht oder eine Anbindung an Warenkorb und Preis braucht, oder wenn aus CAD-Daten erst ein webtaugliches Modell entstehen muss.

Schadet ein 3D-Modell der Ladezeit und dem SEO?

Vor allem, wenn es beim Seitenaufruf startet. Mit Poster zuerst und 3D auf Klick fällt der Großteil der Startkosten erst an, wenn der Besucher das 3D öffnet – in unserer Labormessung (Lighthouse, emuliertes Mobilgerät) sank die Total Blocking Time so auf 0 ms. Für SEO zählt der Text um das Modell herum: Google indexiert, was im gerenderten HTML steht, nicht das Bild im Canvas ^[11].

Funktioniert 3D auf allen Smartphones?

Aktuelle Smartphone-Browser unterstützen WebGL. Ältere oder sehr günstige Geräte können beim Start langsam sein, und ohne WebGL sollte die Seite ein Bild statt einer leeren Fläche zeigen. Die Zahlen in diesem Artikel sind Labormessungen mit emulierten Mobilgeräten; echte Telefone haben wir dafür nicht getestet. In einem Projekt prüfen Sie die Ansicht über einen privaten Link auf Ihren eigenen Geräten.

Quellen

1. Google: <model-viewer> Dokumentation (Attribute poster, loading, reveal, alt, ar-modes, ios-src). https://modelviewer.dev/docs/
2. three.js Dokumentation: WebGLRenderer (setPixelRatio). https://threejs.org/docs/pages/WebGLRenderer.html
3. web.dev: It's time to lazy-load offscreen iframes! https://web.dev/articles/iframe-lazy-loading
4. Shopify Help Center: Produktmedientypen (3D-Modelle: GLB, USDZ). https://help.shopify.com/en/manual/products/product-media/product-media-types
5. Shopware Dokumentation: Produkte (Medien, 3D-Modelle). https://docs.shopware.com/en/shopware-6-en/catalogues/products
6. Khronos Group: glTF – Runtime 3D Asset Delivery. https://www.khronos.org/gltf/
7. WebKit: Viewing Augmented Reality Assets in Safari for iOS. https://webkit.org/blog/8421/viewing-augmented-reality-assets-in-safari-for-ios/
8. Khronos Group: KHR_draco_mesh_compression (glTF-Erweiterung). https://github.com/KhronosGroup/glTF/blob/main/extensions/2.0/Khronos/KHR_draco_mesh_compression/README.md
9. Khronos Group: EXT_meshopt_compression (glTF-Erweiterung). https://github.com/KhronosGroup/glTF/blob/main/extensions/2.0/Vendor/EXT_meshopt_compression/README.md
10. MDN Web Docs: prefers-reduced-motion. https://developer.mozilla.org/de/docs/Web/CSS/@media/prefers-reduced-motion
11. Google Search Central: Grundlagen von JavaScript-SEO. https://developers.google.com/search/docs/crawling-indexing/javascript/javascript-seo-basics