Der Stehschreibtisch-Konfigurator kann in der Prototyping-Phase (eingebettet in Figjam oder Miro) oder für digitale Marketing-Inhalte (eingebettet in eine Website) genutzt werden. Über eine API-Anbindung kann der Konfigurator zudem als Preiskalkulator fungieren und nahtlos in den Warenkorb-Workflow integriert werden.
Dieser Konfigurator stellt den digitalen Zwilling eines Stehschreibtisches mit drei interaktiven Komponenten dar, um die Produktfunktionalität zu erklären. Die Interaktionen zeigen:
Die finale Variante sollte zudem in Augmented Reality (AR) in der Vorschau angezeigt werden können, um sie an einem echten physischen Ort zu betrachten.
Der Schreibtisch wurde in der CAD-Software Plasticity mithilfe von NURBS modelliert, als .step-Datei exportiert und in Vectary Studio importiert. Die importierte CAD-Geometrie wurde angepasst, um die Anzahl der Polygone zu reduzieren, und in eine Mesh-Geometrie gebacken. Die Tischplatte wurde in Substance Painter UV-unwrapped, wo auch die Texturen erstellt wurden.
Jede Interaktion in dieser Szene wird gesteuert und ausgelöst durch 3 Hotspots.
1. Material-Switcher
Schalte die Sichtbarkeit der Floating UI mit einem Klick auf den Hotspot ein. Diese Interaktion öffnet die FUI, in der du den Namen und das Farbmuster des jeweiligen Materials siehst. In diesem Fall besteht die FUI nur aus 3 Bildern, sodass der Text nicht in der FUI selbst erstellt, sondern als ein einziges Bild importiert wurde. Das ist ein toller Tipp, wenn du den Prozess beschleunigen und dir das Ausprobieren des Layouts in der Floating UI sparen willst. Sobald du auf eines dieser Bilder klickst, wird eine weitere Interaktion – Materials – ausgelöst. Hier kannst du beliebig viele Objekte auswählen und festlegen, welches Material aktiv sein soll. Da dieser Konfigurator zwei verschiedene Tischplattengrößen hat, musst du die Materialien für beide ändern.
2. Bewegung
Die Bewegung wird durch Hotspots gesteuert, die eine „Transformation“ nach oben oder unten entlang der Z-Achse auslösen.
Tipp: Erstelle eine Gruppe mit allen Objekten, die von der Transformation betroffen sein sollen. Wenn sich Hotspots mit bestimmten Objekten mitbewegen sollen, füge sie ebenfalls dieser Gruppe hinzu.
3. Größe
Der letzte Hotspot steuert die Größe der Tischplatte, da er sowohl die kleine oder große Größe als auch Änderungen der Hotspots auslöst. Das liegt daran, dass sich beide Hotspots in der Variante befinden, was eine Endlosschleife erzeugt. Klicke auf den großen Hotspot, um die große Tischplatte und den kleinen Hotspot zu aktivieren. Klickst du auf den kleinen Hotspot, ist es genau umgekehrt.
Tipp: Jede Tischplatte hat eine separat gebackene Lightmap. So wird sichergestellt, dass die Schatten bei Größenänderungen an der richtigen Stelle bleiben.
Das Licht-Setup umfasst drei Lichtquellen – zwei rechteckige und eine gerichtete – zusammen mit einer HDRi-Umgebung. Das Ziel war es, den oberen Bereich zu beleuchten, um eine ansprechende Reflexion auf der Tischoberfläche zu erzeugen und gleichzeitig kontrastreiche Kanten aus anderen Winkeln zu erzielen. Das gerichtete Licht verteilt das Licht gleichmäßig in der Szene, wobei sich die Richtung über einen Pivot-Punkt vollständig steuern lässt. Rechteckige Lichter wurden für kleinere Bereiche auf dem Tisch eingesetzt.
Ein Tipp: Nach dem Baken kann das Deaktivieren des Schattenwurfs für jede Lichtquelle die Performance verbessern.
Bei den Materialien war das Ziel eine neutrale, studioähnliche Szene mit unendlichem Hintergrund, weichen Schatten und Holz im Mittelpunkt. Die Beine haben ein einfaches, nicht-metallisches Material mit weißer Farbe auf der Oberseite, während die Tischplatte eine einzelne, unwrapped Textur verwendet. Weitere Materialtypen wurden erstellt durch das Duplizieren dieses Basismaterials und das Anpassen von Farbton, Kontrast und Helligkeit. Dieser Ansatz reduziert die Dateigröße und die Ladezeit beim Teilen der Datei erheblich.
Sobald du mit dem Aussehen und der Beleuchtung der Szene zufrieden bist, starte den Baking-Prozess. Das Baking erhöht den Realismus der Szene durch feine Schatten und Ambient Occlusion.
Ein Tipp: Bake in einer höheren Auflösung und skaliere sie dann herunter. Bake zum Beispiel in einer 2K-Auflösung und setze die finale Auflösung dann auf 1K. Vergiss nicht, das Denoising zu aktivieren. Erstelle vor dem Baking eine Vorschau der Szene im Lightmap-Vorschaumodus und achte auf bewegliche Elemente wie die Beine, um unerwünschte Schatten zu vermeiden.
Die finale Variante sollte auch in Augmented Reality (AR) in der Vorschau angezeigt werden, um sie an einem echten physischen Ort zu betrachten. Es ist wichtig, mit den richtigen Maßen zu arbeiten, da das Modell im Maßstab 1:1 in die Augmented Reality übertragen wird. In den AR-Einstellungen kannst du die Skalierung aktivieren oder deaktivieren, sobald du dir die Vorschau der Datei ansiehst. Derzeit kannst du deine Szene in AR nur über Animationen animieren. Die erste Animation im Animationsmodus wird diejenige sein, die in AR in einer Schleife abgespielt und gezeigt wird. In diesem Beispiel haben wir die Bewegung des Schreibtischs so eingestellt, dass er sich in einer Schleife auf und ab bewegt.
Dieser Premium-Möbelhersteller nutzte die Vectary-Plattform, um einen immersiven Konfigurator für seine Website zu erstellen. Das Ganze wurde von einer einzigen Person umgesetzt – dem Produktdesigner –, der zuvor noch nie mit Vectary gearbeitet hatte.
