Présentation de Vectary Canvas, un nouvel espace d'idéation accélérée par l'AI. → Canvas

Configurateur de chaussures de cyclisme

Créez une présentation 3D interactive ou un configurateur de chaussures sur mesure pour votre design.

Qu'est-ce qu'un configurateur de chaussures ?

Le configurateur de chaussures de cyclisme est une visualisation 3D interactive qui va bien au-delà du simple choix de couleurs et de matériaux. Grâce à l'animation 3D, il explore en profondeur la technologie de la chaussure. La présentation finale peut être partagée directement sous forme de lien pour des réunions internes, ou intégrée à votre site internet (et même connectée au checkout).

Développement du concept

L'objectif de ce projet de chaussure était de présenter des informations techniques et des innovations uniques grâce à des configurations interactives.

‍

Les éléments interactifs expliquent :

  • La structure de la semelle, avec une vue éclatée pour révéler les différentes couches.
  • La fixation des cales, la manière dont elles s'attachent et se fixent sur la chaussure.
  • Le système de serrage de la chaussure
  • Les différentes options de matériaux

‍

La déclinaison finale peut également être partagée en réalité augmentée (AR) pour être visualisée dans un environnement réel.

Comment créer un configurateur de chaussures de cyclisme

Configuration du modèle

‍

Le modèle a été créé dans Rhino et exporté sous forme de fichier .fbx. En raison de la complexité de la plupart des surfaces, une attention particulière a été accordée à la topologie du modèle pour ce projet. La chaussure a donc été importée dans Blender pour corriger le dépliage UV, garantissant ainsi que toutes les textures s'appliquent correctement dans Vectary.

‍

Configuration de l'éclairage

‍

Étant donné les surfaces complexes et incurvées de la chaussure, l'éclairage a pour rôle d'accentuer ces formes et de renforcer la perception des volumes. Pour y parvenir, les lumières rectangulaires sont le choix idéal, offrant un contrôle simple de leur position et de leur orientation. Comme dans beaucoup de projets, il est cruel de baisser l'intensité dans les paramètres d'environnement pour privilégier les lumières locales. L'ajout d'ombres à la source de lumière principale renforce le réalisme et les détails de la scène.

‍

Matériaux

‍

La sélection des matériaux est cruciale pour ce projet. Bien qu'une chaussure de cyclisme présente des contours souples, son matériau principal a tendance à être rugueux. L'objectif était de trouver un équilibre entre l'aspect du plastique et la douceur du tissu, créant une apparence hybride à la fois souple et robuste. L'intégration de motifs dans la color map renforce le réalisme du matériau. Après avoir finalisé l'aspect général de la texture, il est essentiel de baker sa lightmap et son occlusion ambiante pour apporter des détails supplémentaires qui sublimeront le résultat final.

Interactions

‍

Les interactions dans cette scène reposent principalement sur des hotspots, représentés par des images 2D animées. Ces hotspots déclenchent des animations telles que la rotation de la chaussure pour examiner les détails de la semelle, ou l'éclatement de diverses pièces pour explorer des caractéristiques comme l'amorti et les types de mesh. L'animation montre également comment fixer les cales sur la chaussure à l'aide de vis aux emplacements dédiés sur la semelle. De plus, un sélecteur de matériaux est accessible en cliquant sur le logo, permettant de choisir entre les versions noire et blanche de la chaussure. Des informations techniques sont incluses dans la Floating UI et s'affichent en cliquant sur un hotspot.

Les avantages d'un configurateur 3D pour chaussures de cyclisme

Explication

Visualisation

Prise de décision

Intégrez l'expérience interactive à votre site web

Découvrez le storytelling interactif grâce à l'intégration d'une API qui facilite la communication entre un configurateur d'objets 3D et une page web. L'objectif de ce projet est de montrer comment l'animation d'un objet se synchronise avec le défilement du site et le changement de couleur de l'interface. Ce projet a été développé sur la plateforme web Framer.

Try Business Workspaces

  • Ideate together in Canvas
  • Create and review 3D as a team
  • Organize projects and control access
  • Publish 3D and AR across every channel
  • Scale with APIs, hosting, and expert support
Talk to our team
Vectary Workspaces with shared folders, team cursors, and a 3D material board