Der komplette Leitfaden für 3D-Web-Embeds und wie du sie nutzt

Eines der größten Features von Vectary ist das Web-AR-Embedding. Hier erfährst du im Detail, was 3D-WebAR-Embedding is und wie du es nutzen kannst, um deine Geschäftsziele zu erreichen.

Selbst wenn du keine Programmiersprache beherrschst, gehört Web-Embedding vielleicht noch nicht zu deinem Wortschatz – aber das wird sich gleich ändern. Ein Web-Embed (oder eine eingebettete Datei) ist jede Art von Medium, das du ganz einfach in deine Website einfügen kannst, indem du ein Stück HTML-Code oder ein Skript einfügst.

Egal, ob du deinen Blogbeitrag interessanter gestalten, ein interaktives Element auf deiner Website hinzufügen, deine Kunden Produkte in AR erleben lassen oder einen Teil eines Artikels mit einem Designelement aus beliebten sozialen Netzwerken hervorheben möchtest – es kann deiner Website und den Besuchern einen großen Mehrwert bieten.

Heutzutage stoßen Internetnutzer täglich auf Web-Embeds. Diese erscheinen in Form von Social-Media-Beiträgen, auf News- und Medien-Websites und vielen anderen. YouTube ist wahrscheinlich eines der bekanntesten Embeds. Wenn du ein Video in deinen Blogbeitrag einbinden möchtest, handelt es sich meist um ein Stück Code, das unter jedem YouTube-Video zu finden ist und einfach kopiert und eingefügt wurde. Auch 3D-Projekte bewegen sich in diese Richtung.

Ein Beispiel für ein 3D- und AR-Web-Embed

Das Bild unten ist ein interaktiver Vectary 3D-Viewer – er wird WebAR genannt, weil er sowohl das 3D-Webelement als auch das Augmented-Reality-Erlebnis unterstützt. Versuche, ihn zu drehen, oder klicke auf das AR-Symbol, um ihn in Augmented Reality zu sehen:

So bereitest du ein WebAR-Embed in Vectary vor

Schritt 1: Erstelle ein 3D-Objekt oder eine 3D-Szene

Um ein Objekt in einen Blog oder eine Website einzubetten, musst du planen, wo das eingebettete Objekt erscheinen soll. Darauf basierend kannst du das Embed so vorbereiten, dass es sich natürlich in die Umgebung der Website einfügt. Es gibt verschiedene Möglichkeiten, ein webfreundliches 3D-Projekt zu erstellen.

Importiere dein eigenes 3D-Modell

Wenn du bereits Erfahrung im 3D-Modeling hast, besitzt du wahrscheinlich schon ein paar Modelle und Dateien, um dein 3D-Web-Embed zu starten. Importiere sie einfach in Vectary und warte, bis sie geladen sind. Derzeit unterstützen wir über 60 Dateiformate, darunter: .obj, .dae, .stl, .gltf, .glb, .jpg, .png, .svg – die gesamte Liste aller unterstützten Formate findest du hier.

Nutze die Bibliothek und greife auf 3D-Repositories oder vorgefertigte Kollektionen zu

Für Einsteiger im 3D-Modeling haben wir eine Reihe kuratierter Kollektionen zusammengestellt, die aus Assets, Materialien und Umgebungen bestehen. Sobald du das Passende gefunden hast, ziehe es per Drag & Drop in die Szene und fahre mit der Erstellung des Embeds fort.

Erstelle ein Projekt von Grund auf neu

Für fortgeschrittene Nutzer bietet Vectary intuitives Mesh-Modeling im Edit-Modus. Ähnlich wie beim Importieren von Projekten kannst du ein Modell von Grund auf neu erstellen oder ein bestehendes Modell bearbeiten, das du importiert oder aus der Bibliothek in der Szene platziert hast. Wenn du mit dem 3D-Modeling fertig bist, fahre mit der Generierung deines Embed-Codes fort.

Schritt 2: So generierst du einen 3D-Web-Embed-Code

Sobald du bereit bist und dein Projekt sowie dein 3D-Objekt vorbereitet hast, ist das Erstellen eines WebAR-Embed-Codes ganz einfach und unkompliziert. Unsere Software erledigt die ganze Arbeit für dich mit einem einfachen Klick auf den Share-Button und dem Aktivieren von „Share to web“. Sobald dies abgeschlossen ist, wird ein iframe-Code generiert, den du direkt in deinem HTML-Code verwenden kannst.

Vectary 3D-Web-Embed-Einstellungen

Du hast die Möglichkeit, das Ergebnis deines Embeds im erweiterten Menü anzupassen:

Texturqualität

Der wichtigste Parameter, der das Embed beeinflusst, ist die Texturqualität. Detailliertere Texturen benötigen mehr Zeit für die Generierung, da sie sehr detailreich sind. Sie können auch zu einer langsameren Performance führen, wenn sie auf der Website implementiert sind. Texturen mit geringerer Auflösung laden hingegen schneller. Du kannst die Qualität für jede in deinen Materialien verwendete Textur einzeln verringern.

Augmented Reality

Füge Augmented Reality über das Menü „Advanced“ im Eigenschaften-Panel deines Projekts in Vectary Studio hinzu. Die erforderlichen Dateien für verschiedene Plattformen (Android, iOS) werden automatisch generiert im Hintergrund.

Kameraansicht zentrieren

Um die Kamera zu zentrieren auf dein Hauptobjekt zu zentrieren, stelle zuerst sicher, dass du die Kamera aktiviert hast (gekennzeichnet durch ein „+“-Symbol neben dem Kameranamen). Klicke dann auf das Objekt (oder die Objektgruppe) und klicke auf das Symbol „Fit View“ in der Symbolleiste unten (Tastaturkürzel „a“). Dadurch wird der Pivot-Punkt der Kamera auf deine ausgewählten Objekte zentriert (wenn nichts ausgewählt war, wird die Kamera in der Mitte der Szene zentriert). Scrolle zum Vergrößern/Verkleinern, bewege die Ansicht (Pan) oder rotiere sie, um deine Ansicht anzupassen.

Eingeschränkte Kameraansicht

Füge der Szene eine Kamera aus der Symbolleiste hinzu. Da du mehrere Kameras in deinem Projekt haben kannst, musst du die Kamera aktivieren, um die Kameraeinstellungen im geteilten Projekt tatsächlich zu nutzen. Wähle deine Kamera aus und passe die Einstellungen im Eigenschaften-Panel auf der rechten Seite an. Aktiviere „View Limits“ (Schalter), um Blickwinkel einzuschränken, das Bewegen (Pan) und das Zoomen einzuschränken. Klicke auf „Preview“, um deine neuen Einstellungen auszuprobieren. Um die Kamera zu zentrieren auf dein Hauptobjekt zu zentrieren, stelle zuerst sicher, dass du die Kamera aktiviert hast (gekennzeichnet durch ein „+“-Symbol neben dem Kameranamen). Klicke dann auf das Objekt (oder die Objektgruppe) und klicke auf das Symbol „Fit View“ in der Symbolleiste unten (Tastaturkürzel „a“). Dadurch wird der Pivot-Punkt der Kamera auf deine ausgewählten Objekte zentriert (wenn nichts ausgewählt war, wird die Kamera in der Mitte der Szene zentriert). Scrolle zum Vergrößern/Verkleinern, bewege die Ansicht (Pan) oder rotiere sie, um deine Ansicht anzupassen.

Effekte (nur Web)

Wenn du die Bodenebene (Ground Plane) aktiviert hast oder ein Licht Schatten wirft, möchtest du vielleicht „Soft Shadows“ aus der Effektliste hinzufügen. Ein weiterer ähnlicher Effekt, der deinen 3D-Objekten Schatten/Tiefe verleiht, ist „Ambient Occlusion“, das ebenso wie „Reflections“ in Echtzeit berechnet wird.

Schritt 3: Vorschau des WebAR-Embeds

Manchmal ist es ratsam, eine Vorschau deines WebAR-Viewers vor dem Einbetten anzuzeigen, oder du möchtest einfach die Augmented-Reality-Vorschau mit Kollegen und Kunden teilen. Gehe auf „Share“, klicke auf „Share to web“, kopiere den direkten Link und öffne ihn in einem neuen Tab.

Schritt 4: Platziere das Web-Embed im Code deiner Website

Kopiere einfach das Web-Embed aus dem Bereich „Share“ und füge es in deine Website ein. Das Prinzip ist dasselbe wie beim YouTube-Embed-Code. Du kannst Dateien auch in Diensten wie Squarespace, Wix, Shopify, Weebly, oder ähnlichen Plattformen einbetten.

So bearbeitest du den 3D-Web-Embed-Code

Wer sich mit HTML-Code auskennt, kann den generierten iframe-Code bearbeiten. Aktuell lassen sich nur grundlegende Parameter wie Breite, Höhe und Rahmen anpassen. In Zukunft wird es im Embed-Code mehr Anpassungs- und Bearbeitungsoptionen geben. Diese werden ganz ohne Programmierkenntnisse zugänglich sein. Wenn du beispielsweise die Größe deines Embeds ändern und es verkleinern möchtest, damit es perfekt auf deine Website passt, passe einfach die Attribute „width“ und „height“ an deine Bedürfnisse an. Wir empfehlen, das Attribut framerborder auf dem Wert „0“ zu belassen, damit sich das Objekt nahtlos in den Hintergrund einfügt.

Schritt 4: So bearbeitest du den 3D-Viewer auf deiner Website

Eingebettete Objekte auf der Website sind die Ergebnisse von 3D-Designs, die im Vectary-Editor erstellt wurden. Vectary geht jedoch noch einen Schritt weiter und ermöglicht es dir, bereits eingebettete WebAR-Projekte zu bearbeiten und in Echtzeit zu ändern. Öffne das Projekt in Vectary, nimm deine Änderungen vor und aktualisiere es neben den „Share to web“-Einstellungen. Alle Änderungen sollten sofort übernommen werden.

FAQ

Was kostet die Nutzung des Vectary 3D-Web-Embeds?

WebAR-Tests sind jetzt Teil des PRO-Tarifs mit einer begrenzten Anzahl von Aufrufen. Sieh dir unsere Preise an, um mehr zu erfahren.