Voici les différentes étapes que nous avons réalisées pour créer cette animation avec Gemini Google

• Création de l’assemblage dans Onshape. (projet Brouette à jardin)
  • Éviter l’utilisation d’accents dans le nom des pièces avant de l’exportation.

• Exportation en format GLTF
  • Lors de l’exportation sélectionner : Exporter les modèles avec l’axe Y vers le haut (Brouette.gltf)

• Dans Gemini ( Canvas ), importer le fichier instructions IA et faire la requête suivante :
  • Crée une application web interactive utilisant Three.js pour visualiser un fichier GLTF/GLB en vue éclatée. Suivre les instructions dans le documents Instructions IA - 17 mars 2026 (Fichier à télécharger et à ajouter dans la requête) et considérer les fonctionnalités requises :
    • Chargement : Ajoute un bouton d’upload pour charger un fichier local.
    • Logique d’éclatement :
      • Calcule le centre géométrique du modèle complet. Lors de l’activation d’un slider, déplace chaque pièce depuis le centre vers l’extérieur selon son propre vecteur de direction.
      • Lors de la programmation de la fonction d’éclatement, sépare uniquement les pièces (les composants ou groupes principaux) et ne divise surtout pas les sous-maillages individuels qui composent une même pièce.
    • Contrôles : Intègre OrbitControls pour la navigation et un slider avec une interface moderne (Glassmorphism) pour contrôler le pourcentage d’éclatement (0 à 100%). Ajouter sous le slider le % d’éclatement.
    • Annotations : Génère automatiquement des étiquettes (Sprites) au-dessus de chaque pièce en utilisant le nom des nœuds du fichier GLTF, avec une option pour les masquer. Lors de l’ouverture du fichier, la case à cocher ne doit pas être cochée.
    • Rendu : Utilise un éclairage de type HemisphereLight couplé à une DirectionalLight pour des ombres portées.
    • L’arrière-plan de la scène doit être sombre.
    • Responsive : L’application doit s’adapter à toutes les tailles d’écran.
    • Créer une boîte d’affichage (overlay) fixe, positionnée dans le coin supérieur droit de l’interface utilisateur. Insérer au centre exact de cette boîte un Gizmo 3D visuel représentant les trois axes orthogonaux (X, Y et Z). L’extrémité de chaque axe doit être identifiée clairement par sa lettre correspondante. Le Gizmo doit être synchronisé uniquement avec la rotation de la pièce principale (ou de la caméra orbitale). Il doit pivoter en temps réel pour refléter l’orientation actuelle de l’objet.L’origine du Gizmo (le point d’intersection des 3 axes) doit rester strictement verrouillée au centre de la boîte du coin supérieur droit. Il ne doit subir aucun mouvement de translation, même si la pièce principale se déplace dans la vue 3D de la page web.

• Par la suite faire les ajustements souhaités en ajustant la requête. Voici quelques exemples :
  • Modifier le code pour conserver le cadre immobile lors de l’éclatement des pièces.
  • Les pièces sont trop loin du cadre lorsque le curseur est à 100%. Modifier le code pour diminuer de moitié le déplacement total des pièces.
  • Modifie le code pour encore diminuer de moitié la distance d’éclatement total des pièces lorsque le curseur est à 100%
  • Modifier le code pour que les goupilles se déplacent uniquement vers le +Y. Ne pas faire d’autre modification au code.
  • Modifier le code pour effectuer la séquence d’éclatement suivante :
    • Entre 0 % et 20 % déplacer uniquement les goupilles. Les autres pièces ne doivent pas bouger.
    • Arrêter le déplacement des goupilles lorsque le curseur est à 20%.
    • À 20 % déplacer uniquement l’axe vers le +Z. Les autres pièces ne doivent pas bouger.
    • Arrêter le déplacement de l’axe lorsque le curseur est à 30 %.
    • Débuter le déplacement des autres pièces lorsque le curseur est à 30%.
    • À 30 % débuter le déplacement de la roue et des espaceurs pour qu’ils se déplacent vers le -Y. La distance parcourue par les espaceurs doit être la moitié de la distance parcourue par la roue. Et la cuve ne doit pas se déplacer.
    • Arrêter le déplacement de la roue et des espaceurs à 60%.
    • À 60% débuter le mouvement de la cuve vers le +Y et -X.
    • Modifier le code pour retirer dans le nom des pièces le "occurence_of_" et les "_" entre les mots.
    • Modifier le code pour rapprocher l’étiquette du centre de sa pièce respective et non du centre la brouette.