math-pixel
128 lines
3.5 KiB
Markdown
128 lines
3.5 KiB
Markdown
# ✅ 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`** :
|
|
|
|
```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)** :
|
|
|
|
```tsx
|
|
<EditorViewer
|
|
sceneData={sceneData!}
|
|
selectedNodeIndex={selectedNodeIndex}
|
|
onSelectNode={handleSelectNode}
|
|
transformMode={transformMode}
|
|
/>
|
|
```
|
|
|
|
**Props passés à EditorControls (HTML)** :
|
|
|
|
```tsx
|
|
<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
|
|
|
|
```tsx
|
|
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
|
|
|
|
1. **Erreur R3F ** éliminée
|
|
2. **Séparation claire** : HTML vs 3D
|
|
3. **État synchronisé** entre UI et scène 3D
|
|
4. **Build TypeScript** : Pas d'erreurs
|
|
5. **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
|
|
|
|
1. **Accéder à `/editor`** : Vérifier que l'erreur R3F disparaît
|
|
2. **Interaction** : Tester sélection d'objets (clic sur cubes)
|
|
3. **Panels** : Vérifier que EditorControls s'affiche correctement
|
|
4. **Keyboard shortcuts** : T/R/S, ESC, Ctrl+Z/Y
|
|
|
|
### 📁 Fichiers modifiés
|
|
|
|
1. `src/components/editor/EditorPage.tsx` → Gestion état + réorganisation
|
|
2. `src/components/editor/EditorViewer.tsx` → Props drilling + cleanup
|
|
3. 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 ! 🎉
|