Umfassende Anleitungen, Parameter und Codebeispiele, damit Sie das Beste aus dem 3D-Konfigurator von Vulp herausholen.
Es ist unsere Mission, Vulp für unsere geschätzten Kund:innen so benutzerfreundlich wie möglich zu gestalten, sowohl bei der Implementierung als auch für die Endnutzer:innen. Auch wenn wir auf eine intuitive Bedienung setzen, wissen wir, dass ein umfassendes Handbuch von unschätzbarem Wert sein kann, besonders wenn Sie das volle Potenzial der umfangreichen Funktionen unseres 3D-Konfigurators ausschöpfen möchten.
Für ausführliche und detaillierte Erklärungen laden wir Sie ein, unsere umfangreiche Dokumentation unter https://docs.vulp.studio zu besuchen.
Wir möchten das ‘YouTube’ für virtuelle Produkte werden und Vulp einem breiten Publikum zugänglich machen, von Endnutzer:innen bis hin zu Betreiber:innen von Onlineshops und Websites. Dafür stellen wir aus unserem Content-Management-System (CMS) ein direkt einsetzbares Skript bereit:
Enthalten
<iframe
src="https://vulp.studio/<customerId>/<modelId>/<lang>"
allow="xr-spatial-tracking; fullscreen; web-share; clipboard-write"
referrerpolicy="no-referrer-when-downgrade"
width="600"
height="400"
frameBorder="0"
title="vulp.studio"
></iframe>
Im Beispielcode werden automatisch Werte wie Kundenname (customerId), Produktname (modelId) und Sprache (lang) eingesetzt.
Gestalten Sie den 3D-Konfigurator vollständig, indem Sie Parameter zur URL hinzufügen.
Wir unterteilen die Parameter in verschiedene Bereiche:
Vulp bietet zahlreiche Funktionen zur Präsentation Ihres Produktkatalogs. Über Parameter im Vulp-Skript ändern Sie einfach Farben und Materialien und fügen sogar neue Farben hinzu.
Passen Sie außerdem über URL-Parameter die Beleuchtung des Produkts an, einschließlich Reflexion, Ausleuchtung und Schatten.
Gestalten Sie das Erscheinungsbild des 3D-Konfigurators ganz nach Ihren Wünschen. Schalten Sie Buttons ein oder aus und passen Sie die Hintergrundfarbe an. Konfigurieren Sie Buttons passend zum Stil Ihrer Website, einschließlich Textfarbe, Hintergrundfarbe und Rahmen.
Passen Sie Texte an, legen Sie eine eigene Augmented-Reality-Nachricht pro Produkt fest und wählen Sie über die URL des Vulp-iframes die gewünschte Sprache.
Vulp eignet sich hervorragend, um detaillierte Produktinformationen bereitzustellen, ob auf einer Landingpage oder im Onlineshop. Über Text-Hotspots heben Sie Alleinstellungsmerkmale mit Text und Bildern hervor. Möchten Sie die technischen Aspekte Ihres Produkts betonen? Nutzen Sie die Ebenen-Funktion, um alle Maße klar in 3D darzustellen. Aktivieren Sie die Ebenen über Parameter.
Passen Sie die Position der Kamera relativ zum 3D-Modell an. Ob das Modell freistehend ist oder an einer Wand steht: Über Kamerabeschränkungen bei Rotation, Zoom und Startposition bestimmen Sie, was im Viewer sichtbar ist.
Vulp ist ein interaktiver 3D-Konfigurator. Neben der Möglichkeit, Kamerabewegungen zu steuern, um das 3D-Produkt aus jedem Winkel zu betrachten oder es mit Augmented Reality in der eigenen Umgebung zu platzieren, können Sie auch Animationen auf das 3D-Modell selbst anwenden. Denken Sie an Bewegungen, die das Innere in einer ‘Explosionsansicht’ zeigen, oder an realistische Bewegungen Ihres Produkts. Fast alles ist möglich. Mit Vulp erstellen Sie Ihre eigene interaktive 3D-Animation. Diese Animationen lassen sich auf verschiedene Weise auslösen: über Buttons, durch Interaktion mit dem 3D-Produkt oder automatisch. Legen Sie über Parameter fest, was die Animation tun soll.
Wir entwickeln unseren 3D-Konfigurator kontinuierlich weiter und fügen laufend neue Funktionen hinzu, damit sich der 3D-Viewer für E-Commerce, Landingpages oder interaktive Arbeitsbeschreibungen eignet. Eine detaillierte Beschreibung aller unserer Funktionen finden Sie auf unserer Dokumentations-Website: https://docs.vulp.studio.
| Parameter | Beschreibung |
|---|---|
| Modellgestaltung | |
color |
Legt die Standardfarbe des Produkts fest |
color-<group> |
Legt die Standardfarbe einer ‘Farbgruppe’ des Produkts fest |
shadow-intensity |
Legt die Intensität des Bodenschattens fest |
| Konfigurator-Gestaltung | |
background-color |
Legt die Farbe des Hintergrunds fest |
menu-color |
Legt die Farbe der Menü-Buttons fest |
menu-fill-color |
Legt die Hintergrundfarbe der Menü-Buttons fest |
menu-stroke-color |
Legt die Rahmenfarbe der Menü-Buttons fest |
menu-icon-color |
Legt die Farbe der Icons in den Menü-Buttons fest |
hotspot-color |
Legt die Farbe der Informations-Hotspots fest |
tooltip-background-color |
Legt die Hintergrundfarbe der ‘Tooltips’ fest |
tooltip-text-color |
Legt die Textfarbe der ‘Tooltips’ fest |
| Kamera | |
auto-rotate |
Legt fest, ob sich das Produkt automatisch drehen soll |
camera-orbit |
Legt die Startposition der Kamera fest |
camera-target |
Legt den Drehpunkt der Kamera fest |
ar-placement |
Legt fest, ob das virtuelle Produkt an der Wand oder auf dem Boden steht |
min-camera-orbit |
Legt Einschränkungen für die Kamerabewegung fest |
max-camera-orbit |
Legt Einschränkungen für die Kamerabewegung fest |
disable-zoom |
Legt fest, ob ein- und ausgezoomt werden kann. |
disable-tap |
Legt fest, ob sich der Drehpunkt der Kamera per Tippen verschieben lässt |
ar-scale |
Legt fest, ob sich das Produkt in Augmented Reality skalieren lässt |
| Buttons und Overlays | |
menu |
Schaltet das gesamte Menü aus |
color-button |
Schaltet den/die Farb-Button(s) aus |
overlay-button |
Schaltet den Overlay-Button aus |
hotspot-button |
Schaltet den Informations-Hotspot-Button aus |
title |
Schaltet den Titel/Produktnamen aus |
hotspots |
Legt fest, ob Hotspots beim Öffnen sichtbar sind |
| Animation | |
autoplay |
Legt fest, ob beim Öffnen von Vulp automatisch eine Animation startet |
