✅ Résolution de l'erreur R3F "Div is not part of the THREE namespace!"

❌ Problème initial

Erreur : Uncaught Error: R3F: Div is not part of the THREE namespace! Did you forget to extend?

Cause : Le composant EditorControls était rendu à l'intérieur du <Canvas> de React Three Fiber, alors qu'il contient des éléments HTML (<div>, <button>, <h3>).

✅ Solution implémentée

Changement 1 : Réorganisation de la structure des composants

Ancienne structure (PROBLÉMATIQUE)

EditorPage.tsx
└── Canvas
    ├── EditorViewer
    │   ├── EditorCamera
    │   ├── EditorFPSController
    │   ├── MapViewer
    │   └── EditorControls ← HTML DANS LE CANVAS !
    └── Lumières

Nouvelle structure (CORRIGÉE)

EditorPage.tsx
├── Canvas (uniquement 3D)
│   ├── EditorViewer
│   │   ├── EditorCamera
│   │   ├── EditorFPSController
│   │   └── MapViewer
│   └── Lumières
└── EditorControls ← HTML EN DEHORS DU CANVAS

Changement 2 : Props drilling pour partager l'état

État partagé dans EditorPage.tsx :

const [selectedNodeIndex, setSelectedNodeIndex] = useState<number | null>(null);
const [transformMode, setTransformMode] = useState<TransformMode>("translate");
const [undoCount, setUndoCount] = useState(0);
const [redoCount, setRedoCount] = useState(0);

Props passés au Canvas (3D) :

<EditorViewer
  sceneData={sceneData!}
  selectedNodeIndex={selectedNodeIndex}
  onSelectNode={handleSelectNode}
  transformMode={transformMode}
/>

Props passés à EditorControls (HTML) :

<EditorControls
  transformMode={transformMode}
  onTransformModeChange={handleTransformModeChange}
  selectedNodeIndex={selectedNodeIndex}
  nodesCount={sceneData.mapNodes.length}
  // ... autres props
/>

Changement 3 : Mise à jour des interfaces

EditorViewer : Accepte maintenant les props de l'état

interface EditorViewerProps {
  sceneData: SceneData;
  selectedNodeIndex: number | null;
  onSelectNode: (index: number | null) => void;
  transformMode: TransformMode;
}

Changement 4 : Simplification de `EditorViewer`

Retrait de la gestion d'état local
Propagation de onSelectNode à MapViewer
Suppression de EditorControls du return JSX
Focus sur le rendu 3D uniquement

🧪 Résultats

✅ Résolu

**Erreur R3F ** éliminée
Séparation claire : HTML vs 3D
État synchronisé entre UI et scène 3D
Build TypeScript : Pas d'erreurs
Serveur dev : Démarre sur port 5177

⚡ Fonctionnalités préservées

✅ Upload dossier map.json
✅ Visualisation 3D avec MapNode
✅ Transformations T/R/S
✅ Undo/Redo (Ctrl+Z/Y)
✅ Export JSON
✅ Mode player FPS
✅ Sélection objets + highlight
✅ Navigation jeu ↔ éditeur

📋 Tests recommandés

Accéder à /editor : Vérifier que l'erreur R3F disparaît
Interaction : Tester sélection d'objets (clic sur cubes)
Panels : Vérifier que EditorControls s'affiche correctement
Keyboard shortcuts : T/R/S, ESC, Ctrl+Z/Y

📁 Fichiers modifiés

src/components/editor/EditorPage.tsx → Gestion état + réorganisation
src/components/editor/EditorViewer.tsx → Props drilling + cleanup
Props updates dans l'arbre de composants

L'erreur R3F est maintenant résolue avec une architecture propre qui sépare correctement le HTML du 3D ! 🎉

3.5 KiB Raw Blame History