math-pixel/La-Fabrik

Fork 0

Files

T

math-pixel d0cf876372 feat editor

2026-04-23 15:24:40 +02:00

4.5 KiB

Raw Blame History

Editor Integration - La-Fabrik

✅ Intégration terminée

L'éditeur du POC-Editor a été entièrement intégré dans La-Fabrik sous la route /editor.

🎯 Fonctionnalités implémentées

1. Routing React (React Router DOM)

Route / → Jeu original La-Fabrik
Route /editor → Éditeur de map 3D
Navigation fluide entre les deux

2. Chargement automatique de map.json

Cherche /map.json dans public/ au démarrage
Scan automatique des modèles dans public/models/
Fallback: interface d'upload de dossier

3. Système de caméra hybride

Réutilise useCameraMode() existant de La-Fabrik
Mode debug : OrbitControls (édition libre)
Mode player : FPSController custom (WASD/ZQSD + souris + jump)
Pas de dépendance à octree dans l'éditeur

4. Visualisation 3D avancée

Support complet des MapNode (position, rotation, scale)
Chargement de modèles GLB/GLTF depuis models/{nom}/model.glb
Fallback: cubes colorés pour modèles manquants
Highlight orange pour sélection

5. Panneau de contrôle latéral

Transformations: Translate (T), Rotate (R), Scale (S)
Undo/Redo avec compteurs (Ctrl+Z / Ctrl+Y)
Export JSON des modifications
Info sur la sélection et contrôles

6. Interaction et sélection

Click pour sélectionner objets
ESC pour désélectionner
Intégration avec InteractionManager (système existant)
Visual feedback avec highlighting

📁 Structure des fichiers

src/components/editor/
├── EditorPage.tsx         # Composant route /editor + CSS + upload
├── EditorViewer.tsx      # Composant principal (logique état + effets)
├── EditorCamera.tsx      # Caméra (switch OrbitControls/FPS)
├── EditorFPSController.tsx # Controller FPS sans collisions
├── MapViewer.tsx         # Visualisation map.json + modèles
├── EditorControls.tsx    # Panneau latéral UI
├── types.ts              # Types: MapNode, SceneData, TransformMode
└── EditorPage.css        # Styles scoped (~150 lignes)

🔧 Setup initial

Dépendances installées :

npm install react-router-dom --legacy-peer-deps

Modifications apportées :

main.tsx → Enveloppé par <BrowserRouter>
App.tsx → Routes avec <Route path="/editor">
vite.config.ts → Pas de modif nécessaire

🚀 Utilisation

Accès à l'éditeur

Lancer le serveur : npm run dev
Ouvrir http://localhost:5176/editor
Si map.json manque → uploader un dossier

Structure du dossier

public/
├── map.json              # Fichier JSON avec MapNode[]
└── models/
    ├── arbre/
    │   └── model.glb     # Modèle 3D
    ├── building/
    │   └── model.glb
    └── ...

Format map.json

[
  {
    "name": "arbre",
    "type": "Mesh",
    "position": [0, 5, 0],
    "rotation": [0, 1.57, 0],
    "scale": [1, 1, 1]
  }
]

Contrôles claviers

T : Translate (déplacement)
R : Rotate (rotation)
S : Scale (échelle)
Ctrl+Z : Undo
Ctrl+Y : Redo
ESC : Désélection
WASD/ZQSD : Déplacement (mode player)
Espace : Saut (mode player)
Clic souris : Sélection objet

🧪 Tests recommandés

Navigation : / ↔ /editor
Upload dossier : Télécharger un dossier test
Caméra : Tester debug vs player mode
Transformations : T/R/S sur objets sélectionnés
Undo/Redo : Modifier puis annuler/rétablir
Export JSON : Exporter map.json modifié
Performances : Avec maps complexes (test map.json 12K lignes)

📝 Points d'attention

Performance

Map.json de 12K+ lignes peut impacter perfs
Optimization: implémenter LOD si nécessaire
Cleanup des blob URLs après upload

Intégration systèmes existants

Réutilise useCameraMode() de La-Fabrik
Compatible avec InteractionManager
Styles scoped (editor- prefix) pour éviter conflits

Évolution future

Ajouter snap/toggle grid
Implémenter duplication objets
Ajouter outils texturing/matériaux
Synchronisation avec backend

🔗 URLs de test

Jeu : http://localhost:5176/
Éditeur : http://localhost:5176/editor
Page de test : file:///C:/Users/mathc/Documents/Programation/LA-FABRIK/La-Fabrik/test-editor.html

Statut : ✅ Intégration complète avec toutes les fonctionnalités demandées. Prochaines étapes : Tests utilisateur + optimisation performance.

4.5 KiB Raw Blame History