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>
Replaced SVG lines with CSS borders and glass effects:
- Frame: Thick CSS borders (12px) with shadow-2xl and ring-1 ring-white/10
- Glass: backdrop-blur + backdrop-brightness + sky-100/10 tint
- Grid: CSS Grid with gaps (gaps show frameColor as steel profiles)
- Handles: Absolute positioned divs with realistic shadows
- Background: Room image with white/60 overlay for contrast
Frame colors: #1f1f1f (charcoal black), #8B6F47 (bronze), #525252 (grey)
Result: Looks like a photo of a door, not a drawing
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Major Changes:
- Replaced static preview with dynamic SVG door visualizer
- Integrated Zustand for real-time state management
- Redesigned UI with Dark Green (#1A2E2E) and Pistachio (#C4D668) colors
- Removed all orange branding (brand-orange)
- Premium selection tiles with active/inactive states
- Live door rendering that updates instantly on selection
Features:
- Dynamic SVG draws door based on configuration
- Real-time updates: doorType, gridType, finish, handle
- Background room image with semi-transparent overlay
- Animated "Live Voorbeeld" badge with pulse effect
- Configuration info card showing current selections
- Premium typography with Inter font
Technical:
- Added Zustand state management (lib/store.ts)
- Created DoorVisualizer component with SVG logic
- Updated step-product and step-options with premium tiles
- Color swatches for finish selection
- Check icons for selected states
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
