Ce configurateur offre une visualisation dynamique du fonctionnement du système, tel que défini par les équipes de conception. Véritable outil précieux pour de nombreux services, il permet d'observer en temps réel les performances du climatiseur, la composition de ses matériaux, ses dimensions et son interface utilisateur. Ce configurateur de climatiseur est également un outil de visualisation numérique qui permet aux consommateurs de configurer et de tester le système de refroidissement en temps réel, en sélectionnant leurs besoins de climatisation et leurs préférences en matière d'efficacité énergétique.
L'objectif de ce configurateur de climatiseur est d'expliquer toutes les fonctionnalités à l'aide de Interface flottante, interactions et animations.
L'interface flottante doit :
L'animation doit :
Le projet a été modélisé de zéro dans Vectary Studio à l'aide d'objets primitifs, du mode d'édition et de modificateurs. La partie supérieure du climatiseur a d'abord été dessinée dans Figma puis importée en tant que fichier .svg, où elle a été convertie en géométrie et utilisée dans un booléen pour créer la découpe.
Divisons ce projet en quelques catégories, en commençant par les animations. Il y a au total quatre animations : Start, Stop, Fan et Swing mode. Comme leur nom l'indique, chacune remplit une fonction spécifique.
Créer plusieurs animations plutôt qu'une seule offre un contrôle bien plus précis. Lors de la configuration des interactions, créez l'illusion d'une animation continue grâce à des délais définis selon leur durée. Ainsi, une animation commence dès que la précédente se termine. Cette méthode offre un bien meilleur contrôle sur les animations par la suite, lors de leur association avec les éléments de l'interface flottante et de la configuration des interactions. N'oubliez pas de configurer les bonnes conditions ; sinon, l'ordre risque de ne pas fonctionner. Par exemple, le mode Swing déclenche l'animation Swing, qui ne peut être lue que lorsque l'animation Start est terminée.
Toute la scène utilise une palette de couleurs neutre gris clair/blanc. Les climatiseurs d’intérieur se fondent généralement dans la pièce et attirent peu l’attention, c’est pourquoi nous avons opté pour du blanc et des matériaux métalliques. L'un des points forts du design de ce modèle est son capot avant, qui masque les composants internes lorsque l'appareil est éteint. Au-dessus du capot se trouve un élément géométrique fin doté d'un matériau verre appliqué, lui donnant de la profondeur et de superbes reflets. La température et les icônes sont placées sous ce panneau de verre. Une lightmap a été générée sur les parties externes, tandis que l'occlusion ambiante (AO) a été utilisée pour les parties internes. Les textures AO sont plus légères que les lightmaps, ce qui les rend idéales pour les zones où un niveau de détail élevé n'est pas nécessaire.
Des matériaux animés sont appliqués sur deux plans avec des modificateurs noise et bend à l'aide de fichiers Lottie au format .json, tous deux configurés sur émissif avec une certaine opacité.
Astuce : Le plan de sol ne peut pas être pivoté. Pour obtenir une ombre parfaitement uniforme sur le mur derrière le climatiseur, utilisez un plan avec une carte AO générée par baking.
L'interface flottante reproduit une version simplifiée d'une véritable télécommande de climatiseur. Elle comprend un bouton marche/arrêt, des boutons pour augmenter ou diminuer la température, ainsi que des boutons pour activer/désactiver le mode Swing et la filtration de l'air. Masquez ou affichez l'interface flottante (FUI) d'un clic sur l'icône du logo dans le coin, afin d'éviter qu'elle ne masque le Canvas en permanence.
L'icône du purificateur d'air gère la visibilité de deux états d'icône : l'un coloré indiquant l'arrêt, et l'autre en vert indiquant la mise en marche. Elle déclenche également l'apparition d'une icône de feuille 3D directement sur le climatiseur.
Le mode Swing déclenche l'animation Swing, à condition que l'animation Start soit terminée.
L'icône du bouton d'alimentation utilise une astuce : deux icônes alternent grâce à des interactions d'affichage/masquage, évitant ainsi d'avoir à définir des conditions. Ce bouton déclenche plusieurs actions comme l'affichage du flux d'air avec des matériaux animés, le passage du bouton à l'état activé (On), le lancement de l'animation Start et l'affichage de la température via un texte 3D. L'extinction déclenche ensuite l'animation Stop et masque les matériaux animés du flux d'air avec ses flèches.
Le point clé de ce projet réside dans l'utilisation d'Événements, qui définissent une certaine logique selon le comportement des éléments. Dans cette scène, les événements contrôlent les réglages de température. Tout d'abord, définissez la valeur de l'événement au chargement (on-load). Nous utilisons ici un événement de type Number, avec la création d'un événement Temp_def dont la valeur est réglée sur 24. Ainsi, dès l'ouverture du projet, la température par défaut dans la FUI et sur le climatiseur s'affiche à 24. Intégrez ce Temp_def à d'autres éléments de Studio, comme un texte 3D ou le champ de texte de l'interface flottante.
Ensuite, configurez l'augmentation d'une unité de Temp_def au clic. La nouvelle interaction se présentera ainsi :
L'interaction pour diminuer la température est configurée au clic sur l'icône Down, avec une condition pour l'événement minimum : type number, événement Temp_def, et valeur supérieure à 18. L'action est ensuite définie sur événement, type number, événement Temp_def, et valeur Temp_def-1.
Grâce à cette configuration, cliquer sur les icônes haut ou bas permettra de d'augmenter ou de diminuer la température de 1, avec un minimum de 18 et un maximum de 28.
