Der Licht-Konfigurator fungiert als interaktive Anzeige aller Produktoptionen. Er kann sowohl in der Konzeptphase als auch als Vertriebstool auf der Website eingesetzt werden. Die Darstellung von Varianten mit ein- und ausgeschaltetem Licht ist entscheidend, um Schatten hervorzuheben – ein Detail, das in einem physischen Geschäft oft nur schwer zu zeigen ist. Mithilfe von Augmented-Reality-Funktionen können Kunden das Lampendesign vor der Bestellung in der Vorschau betrachten.
Ziel dieses Licht-Konfigurators war es, verschiedene Muster innerhalb einer Produktpalette zu präsentieren und nahtlos zwischen ihnen zu wechseln. Jede Version bietet:
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.
Das Modell wurde in Rhino erstellt und dann importiert als .fbx-Datei in Vectary importiert. Rhino verwendet NURBS-Geometrien, während Vectary Mesh-Geometrien unterstützt. Daher ist es wichtig, die Konvertierung zwischen diesen Formaten zu überprüfen. In diesem Fall waren die Oberflächen des Modells relativ einfach, sodass keine speziellen Anpassungen der Geometrie erforderlich waren, um die gesamte Szene in Vectary flüssig zu halten.
Da die Beleuchtung eine zentrale Rolle spielt, besteht der erste Schritt darin, die Lichtintensität in den Umgebungseinstellungen anzupassen, um die Wirkung manuell platzierter Lichter zu priorisieren. Typischerweise bietet ein Rechtecklicht eine präzise Beleuchtung und Schattenbildung, aber für dieses Projekt, das darauf abzielt, eine Glühbirne zu simulieren, ist ein Punktlicht die beste Wahl.
Es wurden zwei Punktlichter erstellt: eines mit hoher Intensität, das angezeigt wird, wenn der „Light on“-Button ausgewählt ist, und ein weiteres mit sanfter, dezenter Intensität für den „Light off“-Zustand.
Bei den Materialien war das Ziel eine neutrale Ästhetik mit einfachen Texturen wie rauem Kunststoff und Metallpaneelen. Die Glühbirne (Glas) erhielt besondere Aufmerksamkeit. Im echten Leben wirkt die Birne mattiert, wenn das Licht eingeschaltet ist. Ist es ausgeschaltet, wird das Glas transparent und gibt den Blick auf die Drähte im Inneren frei.
Um diesen Ein/Aus-Zustand in 3D nachzubilden, wurden zwei Materialien für das Glas der Glühbirne erstellt:
Ein mattiertes, emissives Material, das sichtbar ist, wenn der „Lights on“-Button ausgewählt ist.Ein transparentes Material mit feinen Kratzern, das sichtbar ist, wenn der „Lights off“-Button ausgewählt ist.
Die Interaktion beginnt mit dem Ein- und Ausschalten des Lichts. Um diesen Effekt zu erzielen, sind Triggerpunkte erforderlich, die durch zwei mit Floating UI erstellte Buttons dargestellt werden. Es werden zwei Interaktionen eingerichtet: eine zum Einschalten des Lichts und eine weitere zum Ausschalten.
Beim Einschalten des Lichts wird „point light 1“ (das helle, emissive) sichtbar gemacht und „point light 2“ ausgeblendet. Zudem wechselt das Material des Glases zum emissiven, mattierten. Das Ausschalten des Lichts folgt einem ähnlichen Prinzip, nur dass diesmal „point light 2“ angezeigt wird und das Material des Glases zum transparenten wechselt.
Sobald die Ein/Aus-Funktion für das Licht eingerichtet ist, geht es an den Wechsel des Lampenschirms. Zuerst wird eine Variante mit den drei verschiedenen Schirm-Optionen erstellt. Danach wird ein weiteres Floating UI mit drei Buttons erstellt, um den sichtbaren Schirm zu steuern (ein Klick auf den Button oder Namen 1 zeigt Schirm 1; diese Interaktion replizierst du für die anderen beiden Schirme).
Schließlich zeigt das Projekt Animationen für jeden Schirm, um verschiedene Licht- und Schatteneffekte zu demonstrieren. Dazu werden sechs Zustände vorbereitet, einschließlich der geöffneten/entfalteten und geschlossenen/gefalteten Zustände für jeden Schirm. Jeder Schirm erhält zwei Floating UIs mit eigenen Grafiken, um die jeweiligen Animationen auszulösen. Danach musst du nur noch das Sichtbarkeits-Feature nutzen, um sicherzustellen, dass die richtige Grafik (die die zugehörige Animation auslöst) zur richtigen Zeit sichtbar ist.
Sobald alle Interaktionen finalisiert sind und das Projekt geteilt werden kann, gibt es einen letzten Schritt, der das Gesamterlebnis aufwertet: Augmented Reality. Durch Aktivieren dieses Features können Betrachter das Projekt im eigenen Raum erleben. In diesem Fall ist AR hilfreich, um zu prüfen, ob die Lampe in eine bestimmte Inneneinrichtung passt, und um zu visualisieren, wie sie sich von „offen“ zu „geschlossen“ animiert (da Vectary Animationen in AR unterstützt).
