Migrate to full 3D visualizer with React Three Fiber

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>

components/configurator/scene.tsx

@@ -0,0 +1,129 @@
+"use client";
+
+import { Canvas } from "@react-three/fiber";
+import { OrbitControls, PerspectiveCamera, Environment } from "@react-three/drei";
+import { Door3D } from "./door-3d";
+import * as THREE from "three";
+
+function Room() {
+  return (
+    <group>
+      {/* Floor */}
+      <mesh
+        rotation={[-Math.PI / 2, 0, 0]}
+        position={[0, 0, 0]}
+        receiveShadow
+      >
+        <planeGeometry args={[10, 10]} />
+        <meshStandardMaterial color="#8B7355" roughness={0.8} />
+      </mesh>
+
+      {/* Back Wall with Doorway */}
+      <group position={[0, 2.5, -1]}>
+        {/* Left wall section */}
+        <mesh position={[-3, 0, 0]} receiveShadow castShadow>
+          <boxGeometry args={[4, 5, 0.2]} />
+          <meshStandardMaterial color="#E5E5E5" roughness={0.9} />
+        </mesh>
+
+        {/* Right wall section */}
+        <mesh position={[3, 0, 0]} receiveShadow castShadow>
+          <boxGeometry args={[4, 5, 0.2]} />
+          <meshStandardMaterial color="#E5E5E5" roughness={0.9} />
+        </mesh>
+
+        {/* Top wall section (above door) */}
+        <mesh position={[0, 1.8, 0]} receiveShadow castShadow>
+          <boxGeometry args={[2, 1.4, 0.2]} />
+          <meshStandardMaterial color="#E5E5E5" roughness={0.9} />
+        </mesh>
+      </group>
+
+      {/* Side Walls */}
+      <mesh position={[-5, 2.5, 3]} receiveShadow castShadow>
+        <boxGeometry args={[0.2, 5, 8]} />
+        <meshStandardMaterial color="#F0F0F0" roughness={0.9} />
+      </mesh>
+
+      <mesh position={[5, 2.5, 3]} receiveShadow castShadow>
+        <boxGeometry args={[0.2, 5, 8]} />
+        <meshStandardMaterial color="#F0F0F0" roughness={0.9} />
+      </mesh>
+    </group>
+  );
+}
+
+function Lighting() {
+  return (
+    <>
+      {/* Ambient light for overall illumination */}
+      <ambientLight intensity={0.4} />
+
+      {/* Main directional light (sun) with shadows */}
+      <directionalLight
+        position={[5, 8, 5]}
+        intensity={1.2}
+        castShadow
+        shadow-mapSize-width={2048}
+        shadow-mapSize-height={2048}
+        shadow-camera-far={50}
+        shadow-camera-left={-10}
+        shadow-camera-right={10}
+        shadow-camera-top={10}
+        shadow-camera-bottom={-10}
+      />
+
+      {/* Fill light from the side */}
+      <directionalLight position={[-5, 5, 2]} intensity={0.3} />
+
+      {/* Spot light for drama */}
+      <spotLight
+        position={[0, 5, 2]}
+        angle={0.5}
+        penumbra={0.5}
+        intensity={0.5}
+        castShadow
+      />
+    </>
+  );
+}
+
+export function Scene3D() {
+  return (
+    <Canvas
+      shadows
+      gl={{
+        antialias: true,
+        toneMapping: THREE.ACESFilmicToneMapping,
+        toneMappingExposure: 1.2,
+      }}
+      style={{ background: "#f5f5f5" }}
+    >
+      {/* Camera */}
+      <PerspectiveCamera makeDefault position={[0, 1.5, 4]} fov={50} />
+
+      {/* Camera Controls - Limited rotation */}
+      <OrbitControls
+        enablePan={false}
+        enableZoom={true}
+        minDistance={3}
+        maxDistance={6}
+        minPolarAngle={Math.PI / 4}
+        maxPolarAngle={Math.PI / 2}
+        target={[0, 1.2, 0]}
+      />
+
+      {/* Lighting */}
+      <Lighting />
+
+      {/* Environment for reflections */}
+      <Environment preset="apartment" />
+
+      {/* The Room */}
+      <Room />
+
+      {/* The Door */}
+      <Door3D />
+    </Canvas>
+  );
+}