3D-Modelle auf der Website: Formate, Ladezeit, Zugang

Für drehbare Produktansichten auf der Website ist glTF das Standardformat, für Augmented Reality auf iPhone und iPad kommt USDZ dazu. Googles Open-Source-Komponente model-viewer bindet beides mit einem einzigen HTML-Element ein. Die Ladezeit bleibt im Griff, wenn das Modell erst bei Bedarf lädt und ein Vorschaubild den Platz hält. Barrierefrei wird die Ansicht mit einer Textbeschreibung und allen wichtigen Informationen auch außerhalb des Modells.

Welche Dateiformate brauchen Sie?

glTF ist ein offenes, lizenzfreies Format der Khronos Group, die es als „JPEG of 3D“ bezeichnet. Es soll Dateien klein halten und schnell darstellbar machen. Seit 2022 ist es als ISO/IEC 12113 international genormt. Die binäre Variante heißt GLB und packt alles in eine Datei (Khronos Group).

USDZ ist das Format für AR Quick Look auf Apple-Geräten. Die Komponente model-viewer kann eine USDZ-Datei sogar beim Tippen auf den AR-Knopf selbst erzeugen. Alternativ hinterlegen Sie eine eigene Datei über das Attribut ios-src (model-viewer-Dokumentation).

Die Ausgangsdaten kommen meist aus der Konstruktion. CAD-Modelle sind für das Web aber zu detailliert und müssen vorher vereinfacht werden. Dieselben Modelle lassen sich auch für Renderings und Produktfilme nutzen, mehr dazu auf unserer Seite zu Film und Video.

Wie kommt das Modell auf die Seite?

Die einfachste Lösung ist model-viewer, eine Web-Komponente von Google. Sie lädt ausschließlich glTF- und GLB-Modelle, lässt Besucher das Objekt drehen und zoomen und startet auf Wunsch eine AR-Ansicht (model-viewer-Dokumentation). Für AR gibt es drei Wege, die die Komponente nach Priorität ausprobiert:

→ WebXR direkt im Browser,
→ Scene Viewer auf Android-Geräten,
→ Quick Look auf iPhone und iPad.

Mit dem Attribut ar-placement legen Sie fest, ob das Objekt in der AR-Ansicht auf dem Boden oder an der Wand erscheint. Für Möbel, Maschinen oder Wandgeräte ist das ein spürbarer Unterschied.

Was bedeutet ein Modell für die Core Web Vitals?

Google bewertet Ladezeit und Bedienbarkeit mit drei Werten. Gut sind ein Largest Contentful Paint bis 2,5 Sekunden, eine Interaction to Next Paint bis 200 Millisekunden und ein Cumulative Layout Shift bis 0,1, jeweils gemessen am 75. Perzentil der Seitenaufrufe (web.dev: Web Vitals).

Ein Modell kann alle drei Werte belasten. Diese Punkte helfen:

→ Vorschaubild optimieren. Als LCP-Element zählen unter anderem Bilder, Video-Poster und Textblöcke (web.dev: Largest Contentful Paint). Ein Canvas wird dort nicht genannt. Oben auf der Seite kann daher das Vorschaubild das entscheidende Element sein. Behandeln Sie es wie ein Titelbild: passende Größe, modernes Format, früh geladen.
→ Modell spät laden. Bei model-viewer lädt die Standardeinstellung das Modell erst, wenn es in die Nähe des sichtbaren Bereichs kommt. Die Einstellung eager lädt sofort und sollte die Ausnahme bleiben (model-viewer-Dokumentation).
→ Platz reservieren. Geben Sie dem Element feste Maße, damit beim Laden nichts verrutscht.
→ Dateien verkleinern. Weniger Polygone und komprimierte Texturen sparen Ladezeit. glTF unterstützt dafür unter anderem KTX2-Texturen mit Basis-Universal-Kompression (Khronos Group).
→ Mobil testen. Messen Sie mit echten Smartphones, nicht nur am Desktop. Das Darstellen eines Modells fordert schwächere Geräte stärker.

Wie wird die Ansicht barrierefrei?

Ein drehbares Modell ist für Menschen, die nicht sehen oder keine Maus nutzen, zunächst eine Hürde. model-viewer bietet dafür das Attribut alt, eine Textbeschreibung für Screenreader (model-viewer-Dokumentation). Die Richtlinien WCAG 2.2 verlangen Textalternativen für Nicht-Text-Inhalte und Bedienbarkeit per Tastatur (W3C: WCAG 2.2).

Die wichtigste Regel: Keine Information darf nur im Modell stecken. Maße, Varianten und Ausstattung gehören zusätzlich als Text und Foto auf die Seite. Die animierte Hand, die zum Drehen auffordert, können Sie abschalten, wenn sie stört.

Für Dienstleistungen im elektronischen Geschäftsverkehr mit Verbrauchern, also etwa Onlineshops, gilt seit dem 28. Juni 2025 das Barrierefreiheitsstärkungsgesetz (§ 1 Abs. 3 BFSG). Kleinstunternehmen, die Dienstleistungen anbieten, sind nach § 3 Abs. 3 ausgenommen. Als Kleinstunternehmen gilt laut § 2 BFSG, wer weniger als 10 Personen beschäftigt und höchstens 2 Millionen Euro Jahresumsatz oder Jahresbilanzsumme hat (Barrierefreiheitsstärkungsgesetz). Ob Ihre Seite darunter fällt, hängt vom Einzelfall ab. Das ist keine Rechtsberatung.

Lohnt sich ein Modell für Ihr Produkt?

Ein Modell lohnt sich, wenn Form, Größe oder Aufbau beim Kauf eine Rolle spielen. Das gilt für Maschinen und Komponenten, für Möbel und Einrichtung oder für Produkte mit vielen Varianten. Im Vertrieb funktioniert dieselbe Ansicht auch auf dem Tablet im Kundengespräch oder am Messestand.

Weniger sinnvoll ist es bei flachen oder sehr einfachen Produkten. Dort reichen gute Fotos aus mehreren Blickwinkeln meist aus und laden schneller.

Wenn Sie eine Produktseite mit interaktiver Ansicht planen, finden Sie unseren Ansatz auf der Seite zu Webentwicklung. Für ein erstes Gespräch erreichen Sie uns über Kontakt.