So binden Sie 3D und AR ohne App in Ihre Website ein

Um 3D und AR ohne App in Ihre Website einzubinden, veröffentlichen Sie Ihr Produkt im BASE 3D-AR Studio als 3D-AR-Seite und fügen deren Einbettungscode in Ihre Website ein. Besucher drehen und zoomen das Modell direkt auf Ihrer Seite. Auf iPhone und iPad öffnet der AR-Button Apple AR Quick Look, auf Android WebXR in Chrome. Am Desktop zeigt er einen QR-Code, mit dem Besucher direkt auf ihr Smartphone wechseln.

Was bedeutet „3D und AR ohne App“?

3D und AR ohne App auf einer Website bedeutet: Besucher betrachten ein interaktives 3D-Modell im Webbrowser und platzieren es über die Kamera des Smartphones im eigenen Raum, ohne vorher etwas herunterzuladen oder zu installieren.

Im BASE 3D-AR Studio von BASE BROS findet dieses Erlebnis auf einer gehosteten 3D-AR-Seite statt. Zu jedem Modell gehört genau eine Seite. Sie läuft auf dem BASE 3D Viewer (WebGPU mit automatischem WebGL-Fallback) und bringt einen integrierten Button für Augmented Reality mit. Zum Ansehen einer Seite ist kein Konto nötig: Jeder, der den Link oder den QR-Code hat oder Ihre Seite mit der Einbettung aufruft, kann sie öffnen.

Wie öffnet sich AR auf den einzelnen Geräten?

Dieselbe Seite passt sich automatisch an das Gerät des Besuchers an. Folgendes passiert, wenn jemand auf den AR-Button tippt oder klickt (standardmäßig mit View in AR beschriftet):

Auf iPhone, iPad und Android platziert das Surface Tracking (Flächenerkennung) das Produkt in Originalgröße auf einer realen Fläche, und Besucher verschieben und drehen es mit Touch-Gesten. Ist eine reale Größe festgelegt, bleibt der Maßstab fest auf dieser Größe. Unterstützt ein Android-Browser kein WebXR, bittet die Seite den Besucher, sie in Chrome zu öffnen. Warum iPhone und Android unterschiedliche Dateien brauchen, erklärt der Artikel GLB vs. USDZ: 3D-Modelle für Web und AR vorbereiten.

Wie binden Sie 3D und AR Schritt für Schritt in Ihre Website ein?

Die gesamte Einrichtung erfolgt im Browser. Der einzige Code ist ein Snippet, das Sie in Ihre Website einfügen:

Schritt 1: Ihr Produkt als 3D-Modell ins Studio bringen

Laden Sie eine .GLB-Datei mit bis zu 50 MB hoch oder erstellen Sie im 3D Generator ein Modell aus Produktfotos oder einem Textprompt. Ein neu hochgeladenes oder mit KI erzeugtes Modell ist auch ohne Save auf seiner eigenen 3D-AR-Seite live. Die vollständige Anleitung zum Hochladen, Generieren und Bearbeiten finden Sie im Artikel So erstellen Sie eine 3D- und AR-Produktseite mit dem BASE 3D-AR Studio. Tipps zur Auswahl von Fotos, die sich gut in 3D umwandeln lassen, gibt der Artikel Bild zu 3D: Produktfotos mit KI in 3D-Modelle umwandeln.

Schritt 2: Reale Größe und erste Ansicht festlegen

Öffnen Sie im Model Editor den Tab Controls und legen Sie Model Scale fest: Geben Sie die längste Seite des Produkts in Zentimetern ein oder nutzen Sie den Multiplikator. Die 3D-Ansicht ändert sich dadurch nicht, in AR erscheint das Modell jedoch exakt in dieser Größe. Im selben Tab legen Sie mit Set Start View den Blickwinkel fest, den Besucher zuerst sehen. Soll der Viewer nahtlos mit Ihrer Seite verschmelzen, wählen Sie im Tab Scene das Farbfeld No Background für einen transparenten Hintergrund.

Schritt 3: Den AR-Button im Page Designer gestalten

Im Page Designer finden Sie im Tab AR Button den Schalter Show AR button, mit dem Sie den Button ein- oder ausblenden, sowie Einstellungen für Beschriftung (bis zu 40 Zeichen), Position, Schrift, Farben, Eckenradius und Deckkraft. Im QR Popup Editor legen Sie Titel, Text und vier Farben des Popups fest, das Besucher am Desktop sehen. Gestalten Sie Desktop- und Mobilansicht getrennt oder halten Sie beide mit der Checkbox Use the same on desktop and mobile identisch. Mit Save veröffentlichen Sie die Seite. Im Studio bedeutet Speichern zugleich Veröffentlichen: Keine Änderung erscheint auf der Live-Seite, bevor Sie speichern.

Schritt 4: Den Einbettungscode in Share & Embed kopieren

Öffnen Sie Share & Embed über das Drei-Punkte-Menü des Modells, über die Library oder mit Share Page im Page Designer oder in More Details. Eine einzige Karte enthält alles: den QR-Code mit Download PNG, den öffentlichen Link mit Copy, den sofort einsetzbaren Einbettungscode mit Copy embed code sowie den Button Open live page.

Schritt 5: Den Einbettungscode in eine HTTPS-Seite einfügen

Fügen Sie das iframe dort ein, wo der 3D-Viewer erscheinen soll, etwa in einer Produktbeschreibung oder einem Abschnitt Ihrer Landingpage. Übernehmen Sie das Snippet genau so, wie das Studio es bereitstellt:

• Behalten Sie das allow-Attribut bei. Seine Berechtigungen camera, gyroscope, accelerometer und xr-spatial-tracking sorgen dafür, dass AR funktioniert. Ohne sie blockieren Browser den Zugriff auf die Sensoren.
• Liefern Sie die Seite über HTTPS aus. AR benötigt für den Kamerazugriff eine sichere Verbindung und funktioniert nicht über unverschlüsseltes HTTP.
• Behalten Sie loading="lazy" bei. Die 3D-Engine startet dann erst, wenn die Einbettung in den sichtbaren Bereich gelangt.
• Vermeiden Sie auf Mobilgeräten eine feste Höhe in Pixeln. Setzen Sie das iframe stattdessen in einen Container mit dem Seitenverhältnis 4 / 3, damit es mit dem Bildschirm skaliert.

Schritt 6: Auf iPhone, Android-Smartphone und Desktop testen

Öffnen Sie Ihre Seite auf einem iPhone oder iPad und tippen Sie auf den AR-Button, um Quick Look zu prüfen. Öffnen Sie sie auf Android in Chrome, um WebXR zu prüfen. Klicken Sie am Desktop auf den Button und scannen Sie den QR-Code. Prüfen Sie jeweils, ob das Produkt in der Größe erscheint, die Sie in Model Scale festgelegt haben.

Link, QR-Code oder Einbettung: Was passt wann?

Alle drei öffnen dieselbe Live-Seite, Sie können sie also beliebig kombinieren:

Da die Einbettung die gehostete Seite anzeigt, aktualisiert jedes Speichern mit Save im Studio auch Ihre Website, ohne dass Sie etwas neu einfügen müssen. Bei eigenen Uploads tauscht Change Model in More Details die .GLB-Datei aus und behält Seite, Link und Analysedaten bei.

Wie bleibt der 3D-Viewer auf Ihrer Website schnell?

Ein schlankeres Modell lädt schneller und öffnet sich früher in AR, besonders auf Smartphones. Vieles davon übernimmt das Studio für Sie:

• KI-Modelle starten bereits optimiert. Direkt nach der Generierung reduziert das Studio automatisch die Dreiecke auf der Stufe Balanced, wandelt die Texturen in 2K-WebP um und wendet Draco-Komprimierung an.
• Die Live-Datei optimieren. More Details > Optimize reduziert die Dreiecke um etwa 25, 50 oder 75 Prozent und bietet für Texturen WebP, PNG oder Keep, eine Texturgröße von 1K oder 2K sowie Draco-Komprimierung. Sie sehen die gemessene Endgröße, bevor Sie auf Apply klicken. Revert stellt die Sicherung wieder her, und das Studio erzeugt die USDZ-Datei für iPhone und iPad automatisch neu.
• Dateien vor dem Upload verschlanken. Der kostenlose Model Optimizer verkleinert eine .GLB-Datei direkt in Ihrem Browser, ohne Konto und ohne die Datei hochzuladen.

Eine vollständige Checkliste zu Dreiecken, Texturen und Draco finden Sie im Leitfaden 3D-Modelle für Web und AR vorbereiten.

Wie messen Sie die Interaktion mit 3D und AR?

Analytics im Studio wertet alle Seiten gemeinsam oder eine einzelne Seite aus, wahlweise für All Time, 30 Tage, 7 Tage, 24 Stunden oder einen frei wählbaren Zeitraum. Quick Stats zeigt 12 Kennzahlen, darunter Total Views, Unique Sessions, QR Scans, AR Activations, 3D Interactions, Avg View Duration und Bounce Rate. Distribution schlüsselt die Besuche nach Betriebssystem, Gerät, Browser und Standort auf, Top Referrers zeigt, woher die Besucher kamen, und über Export PDF speichern Sie einen Bericht. Details finden Sie in der Analytics-Dokumentation.

Was kosten 3D und AR auf Ihrer Website?

Das BASE 3D-AR Studio wird pro Modell abgerechnet. Bearbeitung, AR, Veröffentlichung und das Teilen per Link, QR-Code oder Einbettung sind in jedem Tarif enthalten:

• Free: 0 $ ohne Kreditkarte, bis zu 3 Live-Modelle und 3 neue Modelle pro Monat. Seiten und Einbettungen zeigen ein kleines Wasserzeichen „Powered by BASE“.
• Pro: 0,50 $ pro Modell und Monat (Einführungspreis), mindestens 20 $ pro Monat für 40 Modelle, ohne Wasserzeichen.
• Enterprise: individuelle Preise und Kapazitäten, maßgeschneiderte 3D-Projekte und dedizierter Support.

Auf der Preisseite sehen Sie den Monatspreis für die Anzahl an Modellen, die Sie benötigen.

Fazit

Um 3D und AR in Ihre Website einzubinden, brauchen Sie nur eine gehostete Seite und ein Snippet: Erstellen Sie das Modell im Studio, legen Sie seine reale Größe fest, gestalten Sie den AR-Button, klicken Sie auf Save und fügen Sie den Einbettungscode in eine HTTPS-Seite ein. Besucher erhalten auf jedem Bildschirm eine interaktive 3D-Ansicht und auf dem Smartphone AR, ganz ohne App-Installation. Starten Sie kostenlos, lesen Sie die Dokumentation zur Einbettung, sehen Sie sich den Showcase mit Markenprojekten an oder kontaktieren Sie das Team von BASE BROS, wenn Sie individuelle 3D-Projekte oder Enterprise-Kapazitäten benötigen.

Kostenlos starten