Le configurateur de luminaires sert de vitrine interactive pour l'ensemble des options du produit. Il s'utilise aussi bien lors de la phase de conception que comme outil de vente sur votre site web. Présenter des variantes avec la lumière allumée et éteinte est essentiel pour mettre en valeur les ombres, un détail souvent difficile à exposer en magasin. Grâce aux fonctionnalités AR, vos clients peuvent prévisualiser le design de la lampe avant de passer commande.
L'objectif de ce configurateur de luminaires était de présenter différents modèles d'une gamme de produits et de passer de l'un à l'autre de manière fluide. Chaque version présente :
La version finale doit également être prévisualisée en réalité augmentée (AR) afin de l'observer dans un environnement physique réel.
Le modèle a été créé dans Rhino, puis importée importé dans Vectary sous forme de fichier .fbx. Rhino utilise des géométries NURBS, tandis que Vectary prend en charge les géométries de maillage, ce qui rend cruciale la vérification de la conversion entre ces formats. Dans ce cas précis, les surfaces du modèle étaient relativement simples, de sorte qu'aucun ajustement particulier de la géométrie n'a été nécessaire pour maintenir la fluidité globale de la scène dans Vectary.
Compte tenu du rôle clé de l'éclairage, la première étape consiste à ajuster l'intensité de la lumière dans les paramètres d'environnement afin de privilégier l'impact des lumières placées manuellement. Généralement, une lumière rectangulaire offre un éclairage et une projection d'ombres précis, mais pour ce projet visant à simuler une ampoule, une lumière ponctuelle est le meilleur choix.
Deux lumières ponctuelles ont été créées : l'une avec une intensité élevée, affichée lorsque le bouton "Light on" est sélectionné, et l'autre avec une intensité douce et subtile pour l'état "Light off".
Concernant les matériaux, l'objectif était d'obtenir une esthétique neutre avec des textures simples comme du plastique rugueux et des panneaux métalliques. L'ampoule(verre) a fait l'objet d'une attention particulière. Dans une situation réelle, lorsqu'une lumière est allumée, l'ampoule semble dépolie. Lorsqu'elle est éteinte, le verre devient transparent, révélant les filaments à l'intérieur.
Reproduire cet état allumé/éteint en 3D a nécessité la création de deux matériaux pour la partie en verre de l'ampoule :
Un matériau dépoli et émissif visible lorsque le bouton "Lights on" est sélectionné.Un matériau transparent avec de légères rayures visibles lorsque le bouton "Lights off" est sélectionné.
L'interaction commence par l'allumage et l'extinction de la lumière. Pour obtenir cet effet, des points de déclenchement, représentés par deux boutons créés via Floating UI, sont nécessaires. Deux interactions sont configurées : l'une pour allumer la lumière et l'autre pour l'éteindre.
Allumer la lumière consiste à rendre visible "point light 1" (la plus brillante, émissive) et à masquer "point light 2". De plus, le matériau du verre de l'ampoule est remplacé par le matériau émissif et dépoli. Éteindre la lumière suit un processus similaire, mais cette fois-ci "point light 2" est affichée, et le matériau du verre de l'ampoule est remplacé par le matériau transparent.
Une fois la fonctionnalité d'allumage/extinction de la lumière établie, l'étape suivante consiste à changer l'abat-jour. Tout d'abord, une variante comprenant les trois options d'abat-jour est configurée. Ensuite, un autre Floating UI avec trois boutons est créé pour contrôler l'abat-jour visible (un clic sur le bouton ou le nom 1 affichera l'abat-jour 1, et vous reproduisez cette interaction pour les 2 autres abat-jours).
Enfin, le projet consiste à présenter des animations pour chaque abat-jour afin de démontrer différents effets d'éclairage et d'ombre. Six états sont préparés, incluant les états ouvert/déplié et fermé/plié pour chaque abat-jour. Chaque abat-jour aura deux Floating UI dotés de graphismes dédiés pour déclencher les animations correspondantes. Ensuite, il vous suffit d'utiliser la fonctionnalité de visibilité pour vous assurer que le bon graphisme (qui déclenche l'animation associée) soit visible au bon moment.
Une fois toutes les interactions finalisées et le projet prêt à être partagé, une dernière étape vient enrichir l'expérience globale : la réalité augmentée. L'activation de cette fonctionnalité permet aux visiteurs de visualiser le projet dans leur propre espace. Dans ce cas précis, l'AR est utile pour vérifier si la lampe s'intègre bien dans un design d'intérieur particulier et pour visualiser comment elle s'anime de "ouvert" à "fermé" (puisque Vectary prend en charge les animations en AR).
