Alle Plattformen / Anleitung
3D-Modell und AR in Webflow
In Webflow nutzen Sie das Element Code Embed. In der Produktvorlage (Ecommerce oder CMS) können Sie die ID des Modells aus einem Feld holen, sodass jedes Produkt sein eigenes Modell zeigt.
- Plugin / App
- Nicht nötig
- Wo der Code hinkommt
- Add → Code Embed
- AR auf dem Handy
- Ja, Android und iPhone
Variante 1: Code Embed auf einer Seite
Für eine bestimmte Seite. Eigener Code erfordert einen kostenpflichtigen Webflow-Tarif (Site oder Workspace).
Schritt 1
Code aus 3DView kopieren
Öffnen Sie in Ihrem Konto „Meine Modelle“ und klicken Sie beim Modell auf „Code für die Website“: Der Code wird sofort kopiert. Die Tabs „Shopify“, „WooCommerce“ und „Jede Website“ zeigen nur, wo Sie ihn einfügen; der Code ist derselbe.
Code aus 3DView kopieren Schritt 2
Element Code Embed hinzufügen
Öffnen Sie im Designer das Add-Panel (A) und ziehen Sie „Code Embed“ auf die Seite.
Element Code Embed hinzufügen Schritt 3
Code einfügen
Fügen Sie den Code in das Code-Fenster ein und klicken Sie auf „Save & Close“.
Code einfügen Schritt 4
Veröffentlichen
Klicken Sie auf Publish und prüfen Sie die veröffentlichte Website (im Designer sehen Sie das Modell nicht).
Veröffentlichen
Variante 2: Produktvorlage mit CMS-Feld
Ein einziges Code Embed in der Vorlage; jedes Produkt zeigt sein Modell.
Schritt 1
Code aus 3DView kopieren
Öffnen Sie in Ihrem Konto „Meine Modelle“ und klicken Sie beim Modell auf „Code für die Website“: Der Code wird sofort kopiert. Die Tabs „Shopify“, „WooCommerce“ und „Jede Website“ zeigen nur, wo Sie ihn einfügen; der Code ist derselbe.
Code aus 3DView kopieren Schritt 2
Feld hinzufügen
Fügen Sie in der Collection Products (oder Ihrer CMS-Collection) ein Plain-text-Feld namens „Model 3D ID“ hinzu.
Schritt 3
ID eintragen
Die ID des Modells ist der Teil nach /embed/ im kopierten Code. Tragen Sie sie bei jedem Produkt in das Feld ein.
Schritt 4
Code Embed in die Vorlage setzen
Fügen Sie in der Vorlage Product (Template) ein Code Embed hinzu, setzen Sie den Code unten ein und ersetzen Sie [Model 3D ID] über „+ Add Field“ durch Ihr Feld.
<iframe src="https://www.3dview.ai/embed/[Model 3D ID]" title="[Name]" loading="lazy" allow="xr-spatial-tracking; fullscreen; accelerometer; gyroscope" allowfullscreen style="width:100%;height:480px;border:0;border-radius:12px"></iframe>
Der Code, den Sie einfügen
So sieht der aus 3DView kopierte Code aus (bei Ihnen steht die ID des Modells statt MODEL_ID). Die Höhe (height:480px) können Sie ändern; den Rest lassen Sie unverändert. Hängen Sie ?controls=0 an die ID an, um die Bedienleiste unter dem Modell auszublenden.
<iframe src="https://www.3dview.ai/embed/MODEL_ID" title="Sofa Oslo" loading="lazy" allow="xr-spatial-tracking; fullscreen; accelerometer; gyroscope" allowfullscreen style="width:100%;height:480px;border:0;border-radius:12px"></iframe>
So prüfen Sie, ob es funktioniert
- Am Computer: Das Modell lädt, lässt sich mit der Maus drehen, und die Schaltfläche „Auf dem Handy ansehen“ zeigt einen QR-Code für AR.
- Auf Android (Chrome): Tippen Sie auf die AR-Schaltfläche in der Ecke des Modells. Der AR-Viewer von Google öffnet sich und Sie stellen das Produkt in Originalgröße in den Raum. Das Handy muss ARCore unterstützen.
- Auf iPhone/iPad (Safari): Tippen Sie auf die AR-Schaltfläche. AR Quick Look öffnet sich, ganz ohne App.
- Testen Sie in Safari oder Chrome, nicht im internen Browser von Facebook/Instagram: Dort startet AR nicht.
Häufige Probleme und Lösungen
Ich kann kein Code Embed hinzufügen
Im kostenlosen Webflow-Tarif wird eigener Code nicht veröffentlicht. Sie brauchen einen kostenpflichtigen Site-Tarif oder einen kostenpflichtigen Workspace.
Der Code verschwindet oder wird nach dem Speichern zu Text
Der Editor hat ihn bereinigt: Fügen Sie den Code im HTML- bzw. Quellcode-Modus ein, nicht im visuellen Modus (die Schritte oben zeigen die genaue Schaltfläche). Verschwindet er trotzdem, erlaubt die Plattform keine iframes: Nutzen Sie Link und QR-Code aus „Teilen / QR“.
Das Modell ist zu klein oder wird abgeschnitten
Erhöhen Sie die Höhe im Code: aus height:480px wird zum Beispiel height:600px. Die Breite (100%) passt sich automatisch an die Spalte an. Auf dem Handy reichen meist 400–500px.
Die AR-Schaltfläche erscheint nicht oder startet nicht auf dem iPhone
AR auf dem iPhone braucht Safari (oder Chrome unter iOS) und ein iPhone/iPad mit iOS 12 oder neuer. 3DView erstellt die iPhone-Variante (USDZ) automatisch. Öffnen Sie den Link des Modells direkt (Schaltfläche „In AR ansehen“ im Konto): Funktioniert es dort, blockiert Ihre Plattform AR in eingebetteten Frames; setzen Sie unter das Modell einen Link „In AR ansehen“ zu diesem Link.
Der Browser meldet „unsichere Inhalte“ oder das Modell lädt nicht
Ändern Sie die Adresse im Code nicht auf http://. Auf einer https-Seite blockieren Browser http-Frames (gemischte Inhalte). Lassen Sie die Adresse genau so: https://www.3dview.ai/embed/…
Auf dem Modell erscheint das 3DView-Logo
Sie entfernen es pro Modell im Konto: „Logo entfernen“, eine einmalige Zahlung in Credits. Der Code bleibt derselbe.
Wird die Seite langsamer?
Nein: Der Code hat loading="lazy", das Modell lädt also erst, wenn es auf dem Bildschirm erscheint. Das Hosting ist inklusive, ohne Abo.
Vereinfachte Illustrationen, keine Screenshots; die Menüs können in Ihrer Version etwas anders aussehen.
Häufige Fragen
Brauche ich eine Webflow-App?
Nein. Code Embed ist in Webflow enthalten.
Kann ich die Script-Variante nutzen?
Ja: Sie setzen das Script /embed.js einmal in Site settings → Custom code ein, dann <view3d-model> in Code Embed. Für die meisten Websites genügt das iframe.
Sie haben noch kein 3D-Modell?
Scannen Sie das Produkt mit dem Handy oder starten Sie mit einem Foto. Sie erhalten den Code für die Website, den Link mit QR-Code und AR inklusive.
Erstes Modell erstellen