Un configurateur 3D de sac à dos permet de personnaliser et de visualiser les designs de sacs à dos. Les éléments interactifs guident l'utilisateur et lui permettent de visualiser les différentes options de couleurs, de matériaux, de compartiments, de sangles et d'autres fonctionnalités au sein d'une seule et même scène. Le résultat ? Un sac à dos parfaitement adapté à leurs besoins et préférences.
Les configurateurs de sacs à dos ultralégers permettent de changer les matériaux grâce à plusieurs hotspots. Choisissez parmi deux combinaisons de couleurs principales : gris/noir ou rouge/noir. Chaque coin affiche des textes FUI qui fournissent des informations supplémentaires sur le produit.
Visualisez le design final en réalité augmentée (AR). Depuis un téléphone mobile, il vous suffit de tourner autour du sac pour en observer toutes les faces et de zoomer sur les détails.
Nous avons conçu le modèle de sac à dos dans 3D Studio Max et l'avons importé en tant que fichier .obj. Il était crucial de concevoir une géométrie très détaillée pour garantir un rendu aussi réaliste que possible. Une fois le modèle terminé, nous avons préparé plusieurs textures dans Substance Painter et les avons optimisées dans Vectary Studio. Les graphismes, les badges et les dimensions ont été créés dans Figma et connectés à Vectary via les Figma Frames. Nous avons opté pour un arrière-plan neutre afin de mettre en valeur le sac à dos et l'interface utilisateur flottante dans la scène.
L'ensemble de la scène est éclairé par une lumière directionnelle unique avec une intensité réglée à 60 %, un angle de 3 % et des ombres activées.
Pour obtenir le rendu visuel souhaité, nous avons ajusté les réglages avec un tone mapping configuré sur ACES et une exposition réglée à 80 %. Dans les paramètres avancés, la fonction Mouse Follow est activée.
Pour le sac à dos, nous nous sommes concentrés sur des textures détaillées et avons ajouté un ensemble de stickers/décals appliqués sur le dessus. Nous avons seulement effectué un baking sur quelques parties car le modèle fonctionnait parfaitement sans baking approfondi, ce qui a également permis de réduire la taille du fichier. Pour afficher les dimensions, nous avons utilisé un format .svg transparent et activé le matériau Double Sided dans les propriétés avancées du matériau, le rendant visible des deux côtés.
Astuce : Utilisez de petites textures à basse résolution et augmentez la répétition pour réduire la taille du fichier tout en préservant une bonne qualité de texture.
Trois hotspots déclenchent des changements de matériau pour différentes parties du sac à dos. Ces hotspots sont associés à une action de type Material switcher qui passe au matériau suivant. Astuce : Lorsque vous changez de couleur sur plusieurs objets simultanément à l'aide des échantillons natifs du Material switcher, appuyez sur X pour les combiner en une seule géométrie.
