Produkte per AR in den eigenen Raum stellen.
Das Sofa im eigenen Wohnzimmer, der Carport vor dem eigenen Haus, die Maschine in der eigenen Halle — per Smartphone-Kamera, direkt aus der Website heraus, ohne App-Download. Hier steht, wie das funktioniert, was du dafür brauchst und wo die Grenzen liegen.
AR-Produktansichten funktionieren heute ohne eigene App: Die Website übergibt ein 3D-Modell an die eingebaute AR-Funktion des Smartphones — Quick Look auf dem iPhone, Scene Viewer auf Android. Am einfachsten geht das mit Googles model-viewer. Grundlage ist ein optimiertes 3D-Modell im richtigen Maßstab, als GLB und idealerweise zusätzlich als USDZ.
Wie Web-AR funktioniert.
Früher brauchte Augmented Reality eine eigene App. Heute haben iOS und Android die Funktion eingebaut. Der Ablauf für den Kunden:
- Er öffnet die Produktseite auf dem Smartphone und tippt auf „Im eigenen Raum ansehen“.
- Die AR-Ansicht des Systems öffnet sich, die Kamera erkennt Boden oder Wand.
- Das Produkt erscheint in Originalgröße und lässt sich verschieben und drehen.
- Der Kunde geht darum herum, schaut von oben, macht ein Foto — und kehrt mit einem Tipp zur Website zurück.
Technisch übergibt die Website nur eine Modelldatei. Tracking, Lichtschätzung und Darstellung übernimmt das Betriebssystem. Das ist der Grund, warum System-AR so stabil und schnell ist.
GLB und USDZ.
| GLB | USDZ | |
|---|---|---|
| Plattform | Android (Scene Viewer), WebXR | iPhone und iPad (Quick Look) |
| Standard | glTF, offen | Universal Scene Description von Pixar, von Apple genutzt |
| Erzeugung | Aus Blender, CAD-Pipeline | Aus GLB konvertiert oder mit Apple-Werkzeugen |
model-viewer kann für iOS aus der GLB-Datei automatisch eine USDZ-Variante erzeugen. Das funktioniert für viele Modelle gut. Für die beste Qualität — besonders bei Materialien, Transparenz und Animationen — lohnt eine eigene, geprüfte USDZ-Datei.
Umsetzung mit model-viewer.
<script type="module"
src="https://ajax.googleapis.com/ajax/libs/model-viewer/4.0.0/model-viewer.min.js"></script>
<model-viewer
src="/modelle/sofa.glb"
ios-src="/modelle/sofa.usdz"
poster="/modelle/sofa-poster.webp"
alt="Sofa Aria in Anthrazit, 3-Sitzer"
camera-controls
touch-action="pan-y"
loading="lazy"
ar
ar-modes="webxr scene-viewer quick-look"
ar-scale="fixed"
ar-placement="floor"
style="width:100%;height:480px;">
<button slot="ar-button" class="ar-knopf">Im eigenen Raum ansehen</button>
</model-viewer>ar-scale="fixed" verhindert, dass Kunden das Produkt verkleinern — wichtig, damit die Größe realistisch beurteilt wird. Für Wandbilder, Spiegel oder Leuchten ar-placement="wall" verwenden. Auf Geräten ohne AR-Unterstützung wird der Button automatisch ausgeblendet.
Voraussetzungen für ein gutes Ergebnis.
- Korrekter Maßstab: 1 Einheit = 1 Meter. Ein in Millimetern angelegtes Sofa ist in AR plötzlich ein Gebäude.
- Ursprung am Boden: sonst schwebt das Produkt oder versinkt im Boden.
- Schlanke Datei: unter etwa 5 MB bleibt das Öffnen der AR-Ansicht schnell, auch im Mobilfunknetz.
- Einfache, saubere Materialien: PBR-Materialien mit echten Texturen. Eigene Shader-Effekte aus Three.js werden in der System-AR nicht dargestellt.
- Kontaktschatten: Ein dezenter Schatten unter dem Produkt lässt es im Raum „stehen“ statt zu kleben.
- Echte Maße prüfen: Einmal ein reales Maßband neben das AR-Produkt halten. Kunden tun das auch.
Wie das Modell vorbereitet wird: Blender-Modell fürs Web exportieren.
System-AR oder WebXR?
Neben der System-AR gibt es WebXR: Die AR-Szene läuft dann direkt im Browser, gesteuert von der eigenen Anwendung, etwa mit Three.js. Vorteil: eigene Oberflächen, Konfiguration während der AR-Ansicht, eigene Effekte. Nachteil: Die Unterstützung ist uneinheitlicher, insbesondere auf iPhones, und die Umsetzung aufwendiger.
Für Produktansichten auf Websites ist System-AR fast immer die richtige Wahl. WebXR lohnt sich für besondere Anwendungen, bei denen Interaktion in AR der eigentliche Kern ist.
Grenzen.
- Nicht alle Geräte: Ältere oder sehr günstige Smartphones unterstützen AR teilweise nicht. Der normale 3D-Viewer funktioniert trotzdem.
- Desktop: Am Rechner gibt es keine AR. Ein QR-Code neben dem Viewer, der die Seite aufs Handy bringt, schließt die Lücke.
- Licht und Umgebung: Dunkle Räume und spiegelnde oder einfarbige Böden erschweren die Erkennung.
- Konfiguration: In der System-AR wird die aktuell gewählte Variante gezeigt; Umkonfigurieren geschieht zurück auf der Website.
- Kein Ersatz für die Produktseite: Die meisten Besucher schauen am Bildschirm. AR ist eine Ergänzung.
Wofür sich AR lohnt.
AR spielt seine Stärke aus, wenn die Frage „Passt das in meinen Raum?“ die Kaufentscheidung bestimmt:
- Möbel, Leuchten, Teppiche, Küchengeräte
- Pools, Carports, Gartenhäuser, Terrassenüberdachungen
- Kaminöfen, Heizkörper, Sanitärobjekte
- Maschinen und Geräte, die in eine bestimmte Halle oder Werkstatt passen müssen
- Messe- und Ladeneinrichtung
Bei Produkten ohne Raumbezug — Kleidung am Körper, Kosmetik, Software — ist System-AR selten das richtige Werkzeug.
Erfolg messen.
model-viewer meldet über Ereignisse, wenn eine AR-Sitzung startet und wie sie verläuft. Diese Ereignisse lassen sich nach Einwilligung an die Webanalyse übergeben. So siehst du, wie viele Besucher AR nutzen und ob sie danach häufiger anfragen oder kaufen — und kannst entscheiden, ob sich AR für weitere Produkte lohnt. Im Shop: WooCommerce 3D-Produktansicht mit AR.
Die gezeigten Demos stammen aus meiner eigenen Arbeit. Die Markennamen sind überwiegend erfundene Showcases — die Technik ist echt und läuft live im Browser.
Nicht glauben — ausprobieren.
Alle Demos laufen live im Browser, auch auf dem Smartphone.
FAQ — AR-Produktansicht auf der Website.
Brauche ich eine App für AR-Produktansichten?
Nein. iOS und Android haben die AR-Funktion eingebaut. Die Website übergibt das 3D-Modell an Quick Look auf dem iPhone oder Scene Viewer auf Android. Mit Googles model-viewer lässt sich das über einen Button auf der Produktseite umsetzen.
Welche Dateiformate brauche ich für Web-AR?
Android nutzt GLB, iPhone und iPad nutzen USDZ. model-viewer kann für iOS aus einer GLB-Datei automatisch eine passende Variante erzeugen. Für beste Qualität lohnt sich zusätzlich eine eigene, geprüfte USDZ-Datei.
Warum ist mein Produkt in AR viel zu groß oder zu klein?
Meist stimmt der Maßstab des Modells nicht. In AR muss eine Einheit einem Meter entsprechen. Wurde das Modell in Millimetern oder Zentimetern angelegt, erscheint es um ein Vielfaches zu groß oder zu klein.
Funktioniert AR auf allen Smartphones?
Auf den meisten aktuellen iPhones und Android-Geräten ja. Ältere oder sehr günstige Geräte unterstützen AR teilweise nicht. model-viewer blendet den AR-Button dort automatisch aus, der normale 3D-Viewer funktioniert weiterhin.
Was ist der Unterschied zwischen System-AR und WebXR?
Bei System-AR übergibt die Website nur ein Modell an die eingebaute AR-Ansicht des Betriebssystems, was stabil und einfach ist. Bei WebXR läuft die AR-Szene im Browser unter Kontrolle der eigenen Anwendung, was mehr Möglichkeiten bietet, aber aufwendiger und uneinheitlicher unterstützt ist.
Für welche Produkte lohnt sich AR?
Vor allem für Produkte, bei denen entscheidet, ob sie in den eigenen Raum passen: Möbel, Leuchten, Geräte, Pools, Carports, Kaminöfen oder Maschinen. Bei Produkten ohne Raumbezug ist AR selten kaufentscheidend.
Das bin ich – rechts im BildErzähl mir, was du zeigen willst.
Ich sage dir ehrlich, ob sich 3D für dein Vorhaben lohnt — und wenn nicht, was stattdessen mehr bringt.
Antwort meist innerhalb von 24 Stunden · hallo@manuelkillert.de