Visualisation 3D et Simulation d'un Système de Climatisation
Informations
Visualisation 3D et Simulation d'un Système de Climatisation
Ce simulateur vous démontre les possibilités de Google AI Studio qui permet la création d'applications en ligne. La courbe d'apprentissage est plus longue qu'avec Gemini mais vous obtenez au final une activité crée de manière modulaire avec la page html, la feuille de style et de multiples fichiers javascript. Ces fichiers peuvent être importés dans une activité "Fichier" de Moodle.
Auteur
Yvon Quémener
Date
2026-01-05
Secteur
FP
Matière
5298
Type de ressource
Simulateur
Organisation
CSS des Premières-Seigneuries
Fonction
Récit National
IAG
Gemini
Production
HTML
Méthodologie de Création
Étape 1 : Modélisation des Composants
La première étape a consisté à modéliser en 3D chaque composant du système (compresseur, condenseur, etc.) à l'aide de logiciels de CAO pour garantir la précision et le réalisme. J'ai tiré profit de la communauté en utilisant ce modèle partagé.
Étape 2 : Intégration
J'ai importé le fichier CAO dans le logiciel Autodesk Inventor. Ce logiciel permet d'exporter le dessin dans un format GLB / GLTF compatible avec les navigateurs web.
Étape 3 : Développement de l'Interactivité
J'ai ensuite utilisé l'éditeur modelviewer.dev. Il offre des fonctionnalités interactives qui ont pour but de permettre à l'utilisateur de manipuler la vue : rotation, zoom. On peut ajouter des étiquettes et l'outil est très convivial. Une fois la scène terminée, j'ai téléchargé le fichier .zip
Étape 4 : Intégration dans Moodle
J'ai créé une activité « Fichier » dans Moodle et j'ai téléversé le zip. J'ai ensuite cliqué sur celui-ci afin de le décompresser. J'ai finalement cliqué sur le fichier index.html afin de le « Spécifier comme fichier principal ».
La visualisation 3D nécessite un délai de téléchargement d'environ 30 secondes.
Démarche de Création
Étape 1 : Conception de l'Interface Utilisateur (UI)
J'ai utilisé l'option « Build » de Google AI Studio afin de créer le simulateur. Par des commandes simples, j'ai été en mesure de créer un environnement de simulation. Le plus grand défi consiste à créer des éléments visuels en format SVG pouvant être contrôlés à partir du code. Par exemple, obtenir un cadran dont la position de l'aiguille varie selon le code du simulateur.
La création du SVG est un véritable défi car on doit décire de manière très explicite la postion de chaque composant du circuit et indiquer de manière précise chaque raccord afin que l'IA génère le SVG de manière attendue.
Étape 2 : Implémentation de la Logique de Simulation
L'interface de création Google AI Studio offre une visualisation en temps réel qui diminue de manière significative la complexité de la tâche. J'ai pris soin de ne pas inclure une API Google afin de rendre possible l'exportation vers un site web sans devoir utiliser une API.
Étape 3 : L'importation dans Moodle
Une fois le simulateur fonctionnel, j'ai demandé à l'IA de faire un « Build » car la création est en React. J'ai précisé à l'IA de créer un dossier export_Moodle et de placer un fichier index.html unique afin de rendre la page entièrement autonome. J'ai enregistré le projet et téléchargé le fichier zip. J'ai ensuite extrait le fichier index.html que j'ai ensuite glissé-déposé dans ce cours Moodle.
