Mit einem 3D-Rucksack-Konfigurator können Nutzer ihre Rucksack-Designs anpassen und visualisieren. Die interaktiven Elemente erklären und zeigen verschiedene Farben, Materialien, Fächer, Gurte und andere Features – alles in einer Szene. Das Ergebnis ist ein Rucksack, der perfekt auf ihre individuellen Bedürfnisse und Wünsche zugeschnitten ist.
Mit dem Konfigurator für ultraleichte Rucksäcke kannst du Materialien über mehrere Hotspots ändern. Du hast die Wahl zwischen zwei Hauptfarbkombinationen: Grau/Schwarz oder Rot/Schwarz. In jeder Ecke zeigen FUI-Texte zusätzliche Informationen über das Produkt.
Sieh dir das fertige Design in Augmented Reality (AR) an. Mit einem Smartphone ist es ganz einfach, um die Tasche herumzugehen, um alle Seiten zu sehen, und heranzuzoomen auf Details.
Wir haben das Rucksack-Modell in 3D Studio Max entworfen und als .obj-Datei importiert. Dabei war es entscheidend, eine besonders detaillierte Geometrie zu erstellen, damit das Modell so realistisch wie möglich aussieht. Nach Fertigstellung des Modells haben wir verschiedene Texturen in Substance Painter vorbereitet und im Vectary Studio optimiert. Grafiken, Badges und Bemaßungen wurden in Figma gestaltet und über Figma Frames mit Vectary verknüpft. Wir haben uns für einen neutralen Hintergrund entschieden, damit der Rucksack und das Floating UI in der Szene perfekt zur Geltung kommen.
Die gesamte Szene wird von einem einzelnen direktionalen Licht beleuchtet, wobei die Intensität auf 60%, der Winkel auf 3% eingestellt und die Schatten aktiviert sind.
Um den gewünschten Look-and-Feel zu erzielen, haben wir Adjustments mit einem auf ACES eingestellten Tone-Mapping und einer Belichtung von 80% verwendet. In den erweiterten Einstellungen ist „Mouse Follow“ aktiviert.
Beim Rucksack haben wir uns auf detaillierte Texturen konzentriert und einige Sticker/Decals darauf platziert. Wir haben nur einige wenige Teile gebakt, da das Modell auch ohne aufwendiges Baking gut funktionierte, was zusätzlich die Dateigröße reduzierte. Um Maße anzuzeigen, haben wir ein transparentes .svg-Format verwendet und „Double Sided“-Material in den erweiterten Materialeigenschaften aktiviert, sodass es von beiden Seiten sichtbar ist.
Tipp: Nutze kleine Texturen mit niedriger Auflösung und erhöhe das Tiling, um die Dateigröße zu reduzieren und gleichzeitig eine gute Texturqualität beizubehalten.
Drei Hotspots lösen Materialwechsel für verschiedene Teile des Rucksacks aus. Diese Hotspots sind mit einer Material-Switcher-Aktion verknüpft, die zum nächsten Material wechselt. Tipp: Wenn du die Farben mehrerer Objekte gleichzeitig über die Swatches des Material-Switchers änderst, drücke X, um sie alle zu einer Geometrie zu verbinden.
