Includes room interior with floor, walls, glass you can see through,
and all uncommitted production changes that were running live.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Phase 1 (Logic): Add Dutch mounting constants to door-models.ts
- STELRUIMTE=10mm (tolerance), HANGNAAD=3mm (gap per side)
- WALL_THICKNESS=150mm (standard interior wall)
- calculateMountingDimensions() derives frame/leaf from sparingsmaat
Phase 2 (Visual): Replace LivingRoom with WallContainer in scene.tsx
- 4-box wall construction with precise rectangular hole
- Hole = doorLeafWidth + STELRUIMTE (visible 5mm gap per side)
- Door sits INSIDE the wall, not in front of it
Phase 3 (Detail): Reveal surfaces and door-type positioning
- Plaster/stucco material on reveal edges (inner hole surfaces)
- Taats: door centered in wall depth (pivot at center)
- Scharnier/Paneel: offset toward front face
- Dedicated fill light illuminating reveal depth
- Baseboard (plint) on both sides of opening
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
✨ New Features:
- 6 procedural 3D handles (Beugelgreep, Hoekgreep, Maangreep, Ovaalgreep, Klink, U-greep)
- Glass pattern generator (Standard, DT9 rounded corners, DT10 U-shapes)
- Dynamic living room scene with adaptive doorway
- Enhanced camera controls (zoomed out, more freedom)
- Texture loading system (prepared for future enhancement)
🎨 Visual Improvements:
- Professional handle details (screws, mounting blocks, rosettes)
- Realistic materials (metalness 0.95, proper roughness)
- Living room context (wood floor, white walls, baseboards)
- Better lighting (sunlight simulation, fill lights)
- Apartment environment preset
🏗️ Technical:
- Parametric glass shapes with THREE.Shape
- Dynamic doorway sizing based on door dimensions
- Store updates for handle and glass pattern types
- UI components for all new options
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
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>
