Le configurateur de bureau assis-debout peut être utilisé pendant la phase de prototypage (intégré dans Figjam ou Miro) ou comme contenu de marketing digital (intégré sur un site internet). Une fois connecté à une API, il fait également office de calculateur de prix et s’intègre en toute fluidité dans le parcours d’achat.
Ce configurateur doit représenter le jumeau numérique d’un bureau assis-debout doté de trois composants interactifs pour expliquer le fonctionnement du produit. Les interactions doivent montrer :
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 bureau a été modélisé dans le logiciel CAD Plasticity à l’aide de NURBS, puis exporté au format .step et importé dans Vectary Studio. La géométrie CAD importée a été ajustée afin de réduire le nombre de polygones, puis convertie par baking en géométrie de maillage. Le plateau du bureau a subi un dépliage UV dans Substance Painter, où ses textures ont également été créées.
Chaque interaction de cette scène est contrôlée et déclenchée par 3 hotspots.
1. Sélecteur de matériaux
Déclenchez la visibilité de la Floating UI en cliquant sur le hotspot. Cette interaction ouvre la FUI, affichant le nom et l’échantillon de couleur du matériau concerné. Ici, la FUI se compose de 3 images uniquement : le texte n’a donc pas été saisi dans la FUI directement, mais importé sous la forme d’une seule image. C’est une excellente astuce pour accélérer le processus et éviter de s’attarder sur la mise en page dans la Floating UI elle-même. Lorsque vous cliquez sur l’une de ces images, une autre interaction – Materials – se déclenche. Sélectionnez alors autant d’objets que vous le souhaitez et spécifiez le matériau à activer. Ce configurateur proposant deux tailles de plateau de bureau différentes, veillez à modifier le matériau pour chacune d’elles.
2. Mouvement
Le mouvement est contrôlé par des hotspots qui déclenchent une « Transformation » vers le haut ou vers le bas le long de l’axe Z.
Astuce : créez un groupe contenant tous les objets que vous souhaitez affecter par la transformation. Si vous voulez que les hotspots se déplacent avec des objets spécifiques, incluez-les également dans ce groupe.
3. Taille
Le dernier hotspot contrôle la taille du plateau de bureau, car il active soit la petite soit la grande taille, mais modifie également les hotspots. En effet, les deux hotspots se trouvent dans la variante, ce qui crée une boucle infinie. Cliquez sur le grand hotspot pour déclencher le grand plateau et le petit hotspot. Lorsque vous cliquez sur le petit, c’est l’inverse.
Astuce : chaque plateau possède sa propre lightmap calculée séparément, ce qui garantit que les ombres restent au bon endroit lors des changements de taille.
La configuration de l’éclairage comprend trois sources de lumière – deux rectangulaires et une directionnelle – ainsi qu’un environnement HDRi. L’objectif était d’éclairer le dessus du plateau pour créer un reflet agréable sur la surface de la table, tout en obtenant des arêtes contrastées sous d’autres angles. La lumière directionnelle diffuse l’éclairage de manière uniforme sur la scène, permettant un contrôle total de son orientation via un point de pivot. Les lumières rectangulaires ont été utilisées pour cibler des zones plus petites de la table.
Astuce : après le baking, désactiver l’ombre portée de chaque source de lumière peut améliorer les performances.
En ce qui concerne les matériaux, l’objectif était d’obtenir une scène neutre de type studio avec un arrière-plan infini, des ombres douces et le bois comme point focal principal. Le piétement utilise un matériau simple non métallique de couleur blanche, tandis que le plateau de table utilise une seule texture dépliée. D’autres types de matériaux ont été créés en dupliquant ce matériau de base et en ajustant la teinte, le contraste et la luminosité. Cette approche permet de réduire considérablement la taille du fichier et le temps de chargement lors de son partage.
Une fois le rendu visuel et l’éclairage de la scène finalisés, lancez le processus de baking. Le baking renforce le réalisme de la scène en y ajoutant de légères ombres et de l’occlusion ambiante.
Astuce : effectuez le baking à une résolution supérieure, puis réduisez-la. Par exemple, lancez le baking en résolution 2K, puis définissez la résolution finale sur 1K. N’oubliez pas d’activer le débruitage. Avant le baking, prévisualisez la scène à l’aide du mode de prévisualisation Lightmap et portez une attention particulière aux éléments mobiles comme le piétement afin d’éviter les ombres indésirables.
La variante finale doit également être prévisualisée en réalité augmentée (AR) pour être observée en situation réelle. Il est essentiel de travailler avec les dimensions exactes, car le modèle sera transposé en réalité augmentée à l’échelle 1:1. Les paramètres AR permettent d’activer ou de désactiver la mise à l’échelle lors de la prévisualisation du fichier. Actuellement, le seul moyen d’animer votre scène en AR est d’utiliser des animations. La première animation du mode Animation sera celle diffusée en boucle en AR. Dans cet exemple, nous avons fait monter et descendre le bureau en boucle.
Ce fabricant de mobilier haut de gamme a utilisé la plateforme Vectary pour créer un configurateur immersif pour son site web. Tout a été réalisé par une seule personne - leur designer produit - qui n'avait aucune expérience préalable avec Vectary.
