Ladegerät-Konfigurator

Ein Ladegerät-Konfigurator ist eine dynamische digitale Lösung für interne und externe Anforderungen. Als leistungsstarkes Tool hilft er Herstellern und Designern, Ladegerät-Designs präzise nach bestimmten Anforderungen und Vorlieben anzupassen und zu konzipieren. Intern erleichtert er die Teamarbeit, optimiert Designprozesse und beschleunigt die Entscheidungsfindung. Extern fungiert er als ansprechendes Vertriebstool, mit dem Kunden ihre gewünschte Ladegerät-Konfiguration schon vor dem Kauf personalisieren und visualisieren können. Dieses vielseitige Tool steigert die Effizienz, verkürzt Produktionszeiten und erhöht die Kundenzufriedenheit durch interaktive Anpassungsoptionen.

Ziel dieses Projekts war es zu zeigen, was die Vectary-Plattform alles leisten kann. Es sollte ein digitaler Zwilling eines Ladegeräts erstellt werden, um alle Interaktionsmöglichkeiten zu demonstrieren, die Nutzer auch im echten Leben haben.

‍

Für diese Demonstration wurden hauptsächlich zwei Features von Vectary genutzt:

• Animationen (um die Bewegungen einzelner Komponenten des Objekts zu erklären)
• Sichtbarkeit (um Elemente ein- und auszublenden und das “Ein- und Ausschalten” zu simulieren)

Setup

‍

Das Ladegerät wurde in Rhino modelliert und als FBX-Datei importiert, um die gleiche Ebenenstruktur zwischen Vectary und Rhino beizubehalten. Es ist wichtig, die verschiedenen Teile des Modells direkt in der CAD-Software so zu sortieren, wie du dir die Materialien des Objekts für die Rendering-Phase vorstellst.

‍

Materialien & Baking

‍

Für dieses Projekt war ein neutraler Gesamtstil das Ziel, der die klassische Schwarz-Weiß-Kombination vermeidet. Daher haben wir uns für ein metallisches Gehäuse mit leichten grünen und orangefarbenen Akzenten an einigen Details oder interaktiven Elementen entschieden. Wir empfehlen, als ersten Schritt immer bereits auf dem Markt erhältliche Produkte zu analysieren. Das hilft dir dabei, branchenübliche Details, Formen und Materialien zu identifizieren, was den Realismus insgesamt verbessert (z. B. metallische Enden der Stecker).

‍

Sobald die Materialien vorbereitet sind, vergiss nicht, sie zu baken. Beachte jedoch, dass eine Lightmap (die oft hervorragende Ergebnisse liefert) nicht mit Materialien funktioniert, bei denen der Metalness-Wert auf 100 % eingestellt ist. In solchen Fällen lohnt es sich, die Metalness-Intensität zu reduzieren, um vom Gesamteffekt der Lightmap zu profitieren.Der Bildschirm wurde in Figma als Frame erstellt und dann als Plane in Vectary importiert. Bearbeite das Design in Figma und synchronisiere einfach die Texturen in Vectary, um effizienter zu arbeiten. Eine dünne Glasschicht wurde über dieser Bildschirm-Ebene (Grafik) hinzugefügt, um den Reflexionseffekt eines echten Bildschirms zu imitieren.

‍

Sticker & Decals

‍

Wie der Bildschirm wurden auch alle Sticker in Figma erstellt, um sie einfach bearbeiten zu können – ganz ohne erneutes Importieren, Skalieren, Neuausrichten und Positionieren. Es reicht völlig aus, die Opacity Map und die Color Map zu synchronisieren. Unterschätze niemals die Wirkung von Grafiken auf dem Weg zu mehr Realismus, besonders bei Konsumgütern.

‍

Beleuchtung

‍

A Standard-HDRi wurde in diesem Projekt mit einer Intensität zwischen 25% und 30% verwendet, um beweglichen Lichtern mehr Gewicht zu verleihen. Mehrere rechteckige Lichter wurden um das Objekt herum platziert (mit aktivierten Schattenoptionen), um unabhängig von der Kameraposition schöne Reflexionen zu gewährleisten.

‍

Die LED-Leuchten auf dem Frontpanel wurden realisiert, indem die Intensität der Emission Map auf 800% eingestellt wurde. (Der Schieberegler lässt sich zwar nicht über 100% hinaus bewegen, aber du kannst manuell höhere Werte eingeben).

‍

Um sicherzustellen, dass die Belichtung der Lichter nicht zu stark ist, hat Vectary einen Effekt namens "Adjustments" entwickelt, der sich im rechten Panel (unter dem AR-Feature) befindet. Im Bereich für Tone-Mapping gibt es eine Liste verschiedener Optionen. In diesem Fall haben wir die Filmic-Option verwendet, da sie die Balance zwischen Schatten und Highlights bewahrt.

‍

Ein weiterer Effekt, der bei der Verwendung von LED-Leuchten einen großen Mehrwert bietet, ist der Bloom-Effekt. Du musst ihn jedoch so anpassen, dass nur die LEDs diesen Effekt erhalten und nicht die hellen Bereiche des Produkts. Meistens ist eine hohe Intensität zusammen mit einem hohen Schwellenwert (hier kannst du wie bei der Emission Map Werte über 100 eingeben) eine gute Kombination.

Interaktionen

‍

Dieses Projekt umfasst vier verschiedene Interaktionsarten:

• Animationen: Diese werden durch den Ein-/Ausschalter, den Button oben rechts und die Stecker ausgelöst. Die Animationen wurden im Animate-Modus erstellt, um über Keyframes eine präzisere Bewegungskontrolle zu erhalten.
• Objektsichtbarkeit: Hierbei geht es um das Ein- und Ausblenden von Objekten wie dem Bildschirm und der LED auf dem Frontpanel. Als Trigger dient der Ein-/Ausschalter. Eine Verzögerung bei der Aktion einzubauen, kann einen sehr interessanten Effekt erzeugen. Füge beispielsweise jeder LED beim Einschalten eine eigene Verzögerung hinzu, um einen fließenden "Nacheinander"-Effekt zu erzielen.
• Highlights: Highlights erfüllen in diesem Projekt verschiedene Zwecke. Sie dienen als visuelle Wegweiser, die zur Interaktion einladen. Durch einen Klick auf den Hintergrund werden der Ein-/Ausschalter und der Button oben rechts hervorgehoben. Das signalisiert dem Betrachter, sich auf diese Bereiche zu konzentrieren, um mit der Demo zu interagieren.
• Material-Switcher: Die FUI (Floating User Interface), welche die Materialien der drei verschiedenen Teile steuert, ist relativ zu einem Hotspot positioniert. Ihre Sichtbarkeit wird durch einen Klick auf diesen Hotspot gesteuert. Da die FUI auf automatisches Ausblenden eingestellt ist, kannst du sie jederzeit schließen, indem du auf eine beliebige Stelle in der Szene klickst.

‍

‍