Wie du den Vectary WebAR-Viewer in Webflow einbettest

Mit dem Vectary Web-Viewer kannst du 3D und AR so einfach in deine Webflow-Website integrieren wie ein YouTube-Video. Webflow ist ein großartiges Online-Tool für Designer und Agenturen, um Websites ganz ohne Code zu erstellen. Möchtest du wissen, wie gut ein Vectary WebAR-Viewer auf einer Webflow-Website aussehen kann? Schau dir einfach unsere Homepage an..

Was ist WebAR?

WebAR ist eine Technologie, mit der Besucher Augmented Reality direkt im Web erleben können, ohne eine externe App herunterladen zu müssen. Der Vectary WebAR-Viewer unterstützt dies sowohl auf iPhones als auch auf Android-Geräten.

So bettest du dein 3D-Design in eine Webflow-Website ein

1. Importiere dein 3D-Modell in Vectary Studio oder erstelle es von Grund auf neu.
2. Drehe, verschiebe oder zoome das 3D-Modell und richte die Ansicht ein. Nutze Interaktionen und Animationen. Der Vorschaumodus zeigt, wie es im WebAR-Viewer aussehen wird.
3. Klicke auf den Share-Tab und aktiviere das Teilen.
4. Kopiere den Embed-Code.
5. Gehe zu deinem Webflow-Web-Editor. Klicke auf das „+“-Symbol, um ein Embed-Element hinzuzufügen. Du findest es unter „Components“. Ziehe das Embed-Element per Drag-and-Drop in den Container.
6. Füge deinen Vectary-Viewer-Code in den Code-Editor in Webflow ein.
7. Sobald du deine Website veröffentlichst, erscheint der Viewer genau dort, wo du ihn eingefügt hast.

Beispiel für einen Webflow WebAR-Viewer

So kann dein Viewer aussehen.

WebAR-Iframe-Code testen

Keine Zeit, deinen eigenen WebAR-Code zu generieren? Teste diesen Iframe auf deiner Website:<iframe src="https://app.vectary.com/p/6JUjnpxVLsmPmDGW0tpVSQ" frameborder="0" width="100%" height="480"></iframe>

Der Vectary WebAR-Viewer kann mit verschiedenen Animationen und Verhaltensweisen angepasst werden. Du kannst auch eine eigene interaktive Web-App mit der Viewer-API erstellen. Stell dir einen E-Shop vor, in dem deine Besucher verschiedene Farb- und Formvarianten in einem einzigen Viewer auswählen können.

So nimmst du Änderungen an deinem Vectary WebAR-Viewer vor

Angenommen, du möchtest die Farbe, die Ansicht oder die gesamte Form deines 3D-Modells ändern. Der Vectary-Editor funktioniert wie ein Echtzeit-3D/AR-CMS für deinen Web-Viewer:

1. Öffne dein 3D-Projekt auf Vectary
2. Nimm Änderungen vor
3. Klicke auf den Share-Tab und klicke auf „Syncronize changes“ – der Code muss nicht ausgetauscht werden. Der 3D-Viewer wird auf all deinen Websites automatisch aktualisiert.

So fügst du deinem Viewer in Vectary ein AR-Icon hinzu

1. Gehe zu Vectary Studio
2. Drücke Esc, um zu den Szeneneinstellungen zu gelangen
3. Klicke auf „Advanced settings“ und wähle „Augmented Reality“. Du kannst das Icon und seine Position anpassen.

Bitte beachte: Interaktionen in AR sind derzeit nicht verfügbar. Die AR-Vorschau kann jedoch die Produktvariante zeigen, die deine Besucher im 3D-Viewer konfiguriert haben.