Complete architectural overhaul from CSS to WebGL 3D rendering:
**Dependencies Added:**
- three, @types/three
- @react-three/fiber (R3F)
- @react-three/drei (helpers)
**New Components:**
1. components/configurator/scene.tsx
- Canvas with shadows and tone mapping
- PerspectiveCamera with OrbitControls
- Lighting: Ambient + Directional + Spot + Environment
- 3D Room: Floor (wood texture) + Walls with doorway opening
- Limited camera rotation (minPolarAngle/maxPolarAngle)
2. components/configurator/door-3d.tsx
- Door constructed from 3D mesh primitives (BoxGeometry)
- Frame: Metal material (metalness 0.7, roughness 0.3)
- Glass: PhysicalMaterial with transmission for realistic glass
- Dynamic grid dividers based on gridType
- Handles: 3D U-greep (vertical bar) or Klink (horizontal + sphere)
- All meshes cast shadows
3. components/configurator/door-visualizer.tsx
- Integrated Scene3D with Suspense
- Loading fallback with spinner
- Control hints for user interaction
- Badge changed to "3D Voorbeeld"
**Features:**
- True depth and perspective
- Realistic shadows on floor and walls
- Reflective glass material
- Interactive camera (drag to rotate, scroll to zoom)
- Door appears IN the doorway, not floating
- Apartment environment preset for reflections
- Real-time updates from Zustand store
**Result:** Photorealistic 3D room with proper lighting, shadows, and materials
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
065451988c