youztech/stalendeuren
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
6 Commits 1 Branch 0 Tags
1a65bcbd5a1e986a09aa1244a0fbba092239d4fd
Commit Graph

2 Commits

Author SHA1 Message Date
Ubuntu
1a65bcbd5a Upgrade to premium studio-quality 3D rendering 
Material Upgrades:
- Glass: MeshPhysicalMaterial with transmission=1, thickness=2, clearcoat
  - Color: Subtle blue tint (#eef6fc)
  - Settings: roughness=0, envMapIntensity=1 for realistic transparency
- Steel: MeshStandardMaterial with metalness=0.9, roughness=0.2
  - Satin finish, not matte
  - Color: Deep charcoal (#1a1a1a)
- Walls: Clean off-white plaster (#fafafa, roughness=1)

Geometry Refinements:
- Slim steel profiles: 3cm (was 8cm) for modern industrial look
- Frame depth: 5cm for proper dimensionality
- Handles: Refined proportions, higher poly sphere (32 segments)
- Glass thickness: 1.5cm (realistic heavy glass)
- Dividers: Positioned slightly forward (z=0.01) flush with glass

Architecture Improvements:
- Proper doorway with reveal (15cm thick wall)
- Fitted pillars (left/right) and lintel (top)
- Door sits INSIDE the reveal for depth and shadows
- Clean white floor as shadow catcher

Premium Lighting:
- Environment preset="studio" for realistic reflections on steel
- ContactShadows for "anti-gravity" floating effect
- Key light (5,10,8) with 4K shadow maps
- Rim light for separation
- Fill light for softness
- Tone mapping exposure: 1.3

Camera Refinements:
- FOV: 45° (was 50°) for less distortion
- Position: (0, 1.6, 4.5) - better viewing angle
- Limited azimuth rotation (±30°) for controlled perspective
- Min polar: PI/3.5 (was PI/4) for better elevation

Result: Cold metallic steel + heavy transparent glass + studio lighting
        = Premium "Anti-Gravity" photorealistic look

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
 2026-02-10 16:38:23 +00:00
Ubuntu
065451988c 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>
 2026-02-10 16:30:52 +00:00