•
Babylon.js - Configurateur 3D Mur, Sol et Objets
› Prends mon fichier index.html Babylon.js existant et modifie-le pour ajouter un système de sélection et de chargement
de scènes complètes depuis le dossier ./models, sans les intégrer à la scène déjà affichée.
Objectif général :
- je veux pouvoir choisir une nouvelle scène 3D depuis le dossier ./models
- quand je sélectionne une scène, elle doit remplacer complètement la scène actuelle
- je ne veux pas ajouter cette scène comme un objet dans la scène existante
- je veux quil ny ait quune seule scène active à la fois
Contexte du projet :
- jai déjà un index.html avec Babylon.js
- il contient une scène actuelle avec floor, walls, textures, panneaux latéraux, etc.
- je veux conserver lapplication et son interface générale
- mais je veux ajouter une nouvelle section "Scènes"
- les fichiers de scènes sont dans le dossier ./models
- exemple :
- models/showroom.glb
- models/kitchen.glb
- models/bathroom.glb
Comportement attendu :
- ajouter une section "Scènes" dans le panneau latéral
- afficher une liste ou une grille propre des scènes disponibles
- utiliser pour cette première version un tableau JavaScript du type :
const sceneItems = [
{ name: "Showroom", file: "models/showroom.glb" },
{ name: "Kitchen", file: "models/kitchen.glb" },
{ name: "Bathroom", file: "models/bathroom.glb" }
];
- quand lutilisateur clique sur une scène dans le panneau :
- la scène actuelle doit être nettoyée
- les meshes, transform nodes, materials et textures de la scène précédente doivent être supprimés proprement si
nécessaire
- la nouvelle scène .glb doit être chargée ensuite
- il ne doit pas y avoir de superposition entre lancienne et la nouvelle scène
- une seule scène doit être visible à la fois
Choix technique recommandé :
- garder le même engine Babylon.js
- garder une seule variable scene globale
- recréer une nouvelle scène Babylon propre quand on change de scène
- après chargement, réinitialiser les éléments nécessaires :
- caméra
- lumières
- environnement si nécessaire
- gizmos ou sélections si présents
- prévoir une fonction centrale du type loadCompleteScene(sceneItem)
Important :
- la nouvelle scène choisie doit remplacer complètement la précédente
- ne pas traiter les fichiers de scène comme des objets à ajouter
- ne pas utiliser le système addModel() pour ça
- il faut une logique séparée pour les scènes complètes
Interface demandée :
- garder le panneau latéral existant
- ajouter une vraie section "Scènes"
- afficher les scènes sous forme de cartes simples et propres
- chaque carte doit contenir au moins :
- le nom de la scène
- un bouton ou une zone cliquable "Charger"
- mettre en évidence la scène active si possible
- garder le design moderne, scrollable et lisible
Contraintes techniques :
- utiliser uniquement HTML, CSS et JavaScript dans un seul fichier HTML
- ne pas utiliser de framework
- conserver Babylon.js en CDN
- ne pas casser le reste de lapplication
- le code doit rester lisible, structuré et bien commenté pour un débutant
Fonctionnalités à coder :
1. Tableau de scènes :
- créer const sceneItems = [...]
- permettre dajouter facilement de nouvelles scènes plus tard
2. Rendu du panneau :
- créer une fonction renderScenePanel()
- générer automatiquement la liste des scènes dans le panneau à partir de sceneItems
3. Chargement dune scène complète :
- créer une fonction loadCompleteScene(sceneItem)
- cette fonction doit :
- nettoyer correctement la scène actuelle
- créer une nouvelle scène Babylon.js propre
- recréer une caméra fonctionnelle
- recréer les lumières nécessaires
- rebrancher le render loop si besoin
- charger ensuite le fichier .glb sélectionné
- si possible, repositionner automatiquement la caméra pour bien voir la scène chargée
4. Réinitialisation des états :
- réinitialiser les sélections courantes
- vider selectedObject, selectedTarget, active texture selection, gizmos, etc. si ces systèmes existent déjà
- éviter les erreurs liées à danciens meshes supprimés
5. Robustesse :
- ajouter une gestion derreur si une scène ne charge pas
- afficher un message simple dans la console ou dans linterface si le fichier est introuvable ou invalide
6. Extensibilité :
- commenter à la fin du fichier comment ajouter une nouvelle scène dans sceneItems
- structurer le code pour quon puisse plus tard remplacer sceneItems par un fichier JSON ou une API
Qualité attendue :
- code final propre, exécutable, complet
- bien intégré dans mon application actuelle
- pas de pseudo-code
- ne pas réécrire toute lapplication inutilement
- modifier intelligemment le fichier existant
- retourner uniquement le code HTML final complet
Rappel important :
- une scène choisie doit remplacer totalement la précédente
- ne pas intégrer la nouvelle scène avec lexistante
- ne pas la charger comme un simple objet
•
Babylon.js - Configurateur 3D et Scènes