3D-Modell auf der Website und AR auf der Produktseite

Ein Foto zeigt ein Produkt von einer Seite. Ein 3D-Modell auf der Seite lässt sich drehen, heranzoomen und von allen Seiten ansehen, und in AR stellt man es zu Hause auf und sieht, ob das Sofa passt. So machst du beides in ARClip – ohne Code und ohne eigenes Hosting.

Schritt 1. Szene mit dem Produkt bauen

Leg ein Projekt an und zieh das Produktmodell hinein: GLB, glTF, FBX und OBJ funktionieren – der Editor macht von selbst GLB daraus. Kein Modell? Du kannst es aus einem Foto machen.

Für eine Webseite eignet sich eine normale 3D-Szene am besten: Sie öffnet sofort, auf jedem Gerät und ohne Kamera. Lass die Kamera um das Produkt kreisen und begrenz die Neigung, damit niemand es von unten betrachtet.

Schritt 2. Varianten hinzufügen

Farben, Ausführungen und Ausstattungen sind Zustände eines Objekts. Gib dem Produkt eine Komponente Zustände mit den Varianten und eine Komponente Ereignisse: Der Schritt Zustand setzen zeigt eine andere Variante, wenn jemand auf ein Farbmuster oder das Modell selbst tippt. Ganz ohne Code.

• Stoff, Metall und Glas baust du im Material-Editor aus Knoten und siehst das Ergebnis sofort.
• Auswahlbuttons, Farbmuster, Hinweise und einen Preis über dem 3D baust du im UI-Editor.
• Brauchst du den Preis der gewählten Ausstattung und den Weg zum Kauf, gibt es in der Dokumentation ein fertiges Rezept: Ein Skript merkt sich die Auswahl, zeigt den Preis und öffnet die Kaufseite mit der gewählten Ausführung – Produktkonfigurator.
• Auch deine eigene Seite kann Varianten umschalten und erfährt, welche gewählt wurde: <arclip-viewer> meldet das per Event. Dafür braucht es ein paar Zeilen Skript auf deiner Website, und die Szene muss In der Seite eingebettet sein, nicht Im iframe.

Schritt 3. Szene auf der Website einbetten

1. Klick auf Veröffentlichen und veröffentliche das Projekt im Browser.
2. Wähl im selben Fenster ARClip Viewer und klick auf Code kopieren.
3. Füg den Code dort in die Seite ein, wo die Szene stehen soll.

Der Code besteht aus einer <script>-Zeile und einem <arclip-viewer>-Tag:

<arclip-viewer
  address="my-chair"
  ar
  style="display:block;width:100%;height:480px"
></arclip-viewer>

Die Größe legen die Styles deiner Seite fest. Animationen, Logik und UI laufen mit: Auf der Seite steht eine lebendige Szene, kein Modell, das man nur drehen kann. Es eignet sich jede Website, auf der du eigenen HTML-Code einfügen kannst.

Schritt 4. AR auf die Produktseite bringen

1. Klick im selben Projekt auf Raum hinzufügen und stell den Auslöser der Szene im neuen Raum auf Oberfläche – das Produkt steht dann auf dem Boden oder einem Tisch im Zimmer der Kundschaft.
2. Veröffentliche das Projekt noch einmal.

Die eingebettete Szene bekommt dann einen Button „In AR ansehen“: Auf dem Handy öffnet er AR, am Computer zeigt er einen QR-Code, den man mit der Handykamera scannt. Eingeschaltet wird der Button durch das Attribut ar im Code – ohne es gibt es keinen Button.

Lieber ein eigener Button auf der Seite? Wähl im Veröffentlichungsfenster unter Öffnet in den AR-Raum: Link und QR-Code dort führen direkt hinein.

AR öffnet sich direkt im Handybrowser, ohne App. Das funktioniert in jedem Tarif.

Was ein Shop noch brauchen kann

• Bilder und Clips für den Katalog. Renderings, Screenshots und Videos direkt aus dem Editor, dazu das Plugin „Produktfoto“, das ein Modell für ein sauberes Produktfoto inszeniert.
• Produktanimation. Eine Tür öffnen, das Produkt zerlegen, die Mechanik zeigen – mit Keyframes auf der Zeitleiste.
• Statistik. Aufrufzähler gibt es in jedem Tarif.
• Eigene Domain – in den bezahlten Tarifen.

Was es noch nicht gibt

• Eine fertige Anbindung an den Warenkorb eines Shops: Zum Kauf geht es per Link.

Du wählst zwischen Diensten? Wir haben ARClip ehrlich mit bekannten verglichen: ARClip oder Sketchfab, ARClip oder Threekit, ARClip oder Zakeke. Spline und Vectary findest du auf der Seite Vergleiche.