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 Pompe à eau manuelle)
  • É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 (pompe_a_eau.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 HTML 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%).
  • 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 les modifications demandées :
  • Les pièces ne se séparent pas les unes des autres lorsque je déplace le curseur. Modifier le code pour corriger la situation.
  • Ça ne fonctionne toujours pas. Dans le fichier .gltf, les différentes pièces se retrouvent sous le format : occurence of ... Ce sont ces parties qui doivent se séparer les unes des autres lors du déplacement du curseur.
  • Modifier le code pour conserver le corps immobile lors de l’éclatement des pièces.
  • Les pièces sont trop loin du corps lorsque le curseur est à 100%. Il faudrait diminuer du tiers le déplacement total des pièces.
  • Modifier le code pour afficher les lettres X, Y et Z à chacun des axes dans le Gizmo.
  • Modifier le code pour qu’entre 0 et 20% uniquement les vis et les écrous bougent.
  • Modifier le code pour que lorsque le curseur est à 20% les vis et les écrous aient parcouru uniquement 20% du déplacement.
  • Modifier le code pour que les pièces autres que les vis et les écrous commencent à bouger lorsque le curseur est à 20 %.
  • Modifier le code pour le même comportement mais pour 0 à 30 %.
  • Modifier le code pour que le couvercle et la tige se déplacent uniquement vers+Y et que le couvercle parcoure le double de la distance de la tige.
  • Modifier le code pour que le couvercle parcourt cette distance mais que la tige parcourt la moitié de la distance du couvercle
  • Modifier le code pour déplacer le bec uniquement vers le +Z.
  • Modifier le code pour que le bec se déplace de la moitié de la distance actuelle.
  • Modifier le code pour que la base se déplace uniquement vers les -Y.
  • Modifier le code pour que le corps du piston, le clapet du piston, le joint du piston, la base du piston, la clapet, l’anneau du clapet et la plaque inférieure se déplacent vers le -Y uniquement.
  • Modifier le code pour que la séquence de déplacement soit que le premierélément de cette liste se déplace le plus loin et que le dernier se déplace le moins loin et répartissant équitablement les autres pièces entre la première et la dernière pièce de cette liste. Voici la liste : Base, Joint d’étanchéité de la base, Anneau du clapet, Clapet, Base du piston, Joint d’étanchéité du piston, Clapet du piston, Corps du piston. Ne rien modifier d’autre au code.
  • Modifier le code pour que toutes les vis et les écrous soient visible entre 0% et 30 % du curseur et disparaissent entre 30% et 100% sans modidier d’autre éléments dans le code.
  • Modifier le code pour retirer dans le nom des pièces le "occurence_of_" et les "_" entre les mots.
  • Modifier le nom des étiquettes pour que les accents français s’affichent correctement dans le nom des pièces.
  • Modifier le code pour que l’étiquette de l’élastique soit plus près du sommet de l’élastique.