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>

components/configurator/door-3d.tsx

@@ -10,16 +10,17 @@ export function Door3D() {
 
   // Frame color based on finish
   const frameColor = {
-    zwart: "#1f1f1f",
+    zwart: "#1a1a1a",
     brons: "#8B6F47",
     grijs: "#525252",
   }[finish];
 
-  // Door dimensions
+  // Door dimensions (more realistic proportions)
   const doorWidth = doorType === "paneel" ? 1.5 : 1.2;
   const doorHeight = 2.4;
-  const frameThickness = 0.08;
-  const glassThickness = 0.02;
+  const frameThickness = 0.03; // Slim steel profile (3cm)
+  const frameDepth = 0.05; // Depth of frame
+  const glassThickness = 0.015; // Realistic glass thickness
 
   // Calculate grid divider positions
   const getDividerPositions = () => {
@@ -37,79 +38,80 @@ export function Door3D() {
     <group ref={doorRef} position={[0, doorHeight / 2, 0]}>
       {/* Outer Frame - Top */}
       <mesh position={[0, doorHeight / 2, 0]} castShadow>
-        <boxGeometry args={[doorWidth + frameThickness * 2, frameThickness, frameThickness]} />
-        <meshStandardMaterial color={frameColor} metalness={0.7} roughness={0.3} />
+        <boxGeometry args={[doorWidth + frameThickness * 2, frameThickness, frameDepth]} />
+        <meshStandardMaterial color={frameColor} metalness={0.9} roughness={0.2} />
       </mesh>
 
       {/* Outer Frame - Bottom */}
       <mesh position={[0, -doorHeight / 2, 0]} castShadow>
-        <boxGeometry args={[doorWidth + frameThickness * 2, frameThickness, frameThickness]} />
-        <meshStandardMaterial color={frameColor} metalness={0.7} roughness={0.3} />
+        <boxGeometry args={[doorWidth + frameThickness * 2, frameThickness, frameDepth]} />
+        <meshStandardMaterial color={frameColor} metalness={0.9} roughness={0.2} />
       </mesh>
 
       {/* Outer Frame - Left */}
       <mesh position={[-doorWidth / 2 - frameThickness / 2, 0, 0]} castShadow>
-        <boxGeometry args={[frameThickness, doorHeight + frameThickness * 2, frameThickness]} />
-        <meshStandardMaterial color={frameColor} metalness={0.7} roughness={0.3} />
+        <boxGeometry args={[frameThickness, doorHeight + frameThickness * 2, frameDepth]} />
+        <meshStandardMaterial color={frameColor} metalness={0.9} roughness={0.2} />
       </mesh>
 
       {/* Outer Frame - Right */}
       <mesh position={[doorWidth / 2 + frameThickness / 2, 0, 0]} castShadow>
-        <boxGeometry args={[frameThickness, doorHeight + frameThickness * 2, frameThickness]} />
-        <meshStandardMaterial color={frameColor} metalness={0.7} roughness={0.3} />
+        <boxGeometry args={[frameThickness, doorHeight + frameThickness * 2, frameDepth]} />
+        <meshStandardMaterial color={frameColor} metalness={0.9} roughness={0.2} />
       </mesh>
 
-      {/* Glass Panel */}
+      {/* Glass Panel - Premium Physical Material */}
       <mesh position={[0, 0, 0]} castShadow receiveShadow>
         <boxGeometry args={[doorWidth, doorHeight, glassThickness]} />
         <meshPhysicalMaterial
-          color="#87CEEB"
+          color="#eef6fc"
           transparent
-          opacity={0.3}
-          roughness={0.1}
-          metalness={0.1}
-          transmission={0.9}
-          thickness={0.5}
+          transmission={1}
+          roughness={0}
+          thickness={2}
+          envMapIntensity={1}
+          clearcoat={1}
+          clearcoatRoughness={0}
         />
       </mesh>
 
-      {/* Horizontal Dividers (Grid) */}
+      {/* Horizontal Dividers (Grid) - Slim profiles */}
       {dividerPositions.map((yPos, index) => (
-        <mesh key={`divider-${index}`} position={[0, yPos, 0]} castShadow>
-          <boxGeometry args={[doorWidth, frameThickness, frameThickness]} />
-          <meshStandardMaterial color={frameColor} metalness={0.7} roughness={0.3} />
+        <mesh key={`divider-${index}`} position={[0, yPos, 0.01]} castShadow>
+          <boxGeometry args={[doorWidth, frameThickness, frameDepth]} />
+          <meshStandardMaterial color={frameColor} metalness={0.9} roughness={0.2} />
         </mesh>
       ))}
 
       {/* Vertical Divider for Paneel */}
       {doorType === "paneel" && (
-        <mesh position={[0, 0, 0]} castShadow>
-          <boxGeometry args={[frameThickness, doorHeight, frameThickness]} />
-          <meshStandardMaterial color={frameColor} metalness={0.7} roughness={0.3} />
+        <mesh position={[0, 0, 0.01]} castShadow>
+          <boxGeometry args={[frameThickness, doorHeight, frameDepth]} />
+          <meshStandardMaterial color={frameColor} metalness={0.9} roughness={0.2} />
         </mesh>
       )}
 
       {/* Handle - U-Greep for Taats */}
       {doorType === "taats" && handle === "u-greep" && (
-        <mesh position={[0, 0, frameThickness]} castShadow>
-          <boxGeometry args={[0.03, 0.6, 0.03]} />
-          <meshStandardMaterial color={frameColor} metalness={0.8} roughness={0.2} />
+        <mesh position={[0, 0, frameDepth + 0.01]} castShadow>
+          <boxGeometry args={[0.025, 0.6, 0.025]} />
+          <meshStandardMaterial color={frameColor} metalness={0.9} roughness={0.15} />
         </mesh>
       )}
 
       {/* Handle - Klink for Scharnier */}
       {doorType === "scharnier" && handle === "klink" && (
-        <group position={[doorWidth / 2 - 0.15, 0, frameThickness]}>
+        <group position={[doorWidth / 2 - 0.12, 0, frameDepth + 0.01]}>
           <mesh castShadow>
-            <boxGeometry args={[0.12, 0.03, 0.03]} />
-            <meshStandardMaterial color={frameColor} metalness={0.8} roughness={0.2} />
+            <boxGeometry args={[0.1, 0.025, 0.025]} />
+            <meshStandardMaterial color={frameColor} metalness={0.9} roughness={0.15} />
           </mesh>
-          <mesh position={[0.06, 0, 0]} castShadow>
-            <sphereGeometry args={[0.025, 16, 16]} />
+          <mesh position={[0.05, 0, 0]} castShadow>
+            <sphereGeometry args={[0.02, 32, 32]} />
             <meshStandardMaterial
               color={finish === "brons" ? "#6B5434" : frameColor}
-              metalness={0.9}
-              roughness={0.1}
+              metalness={0.95}
+              roughness={0.05}
             />
           </mesh>
         </group>

components/configurator/scene.tsx

@@ -1,53 +1,75 @@
 "use client";
 
 import { Canvas } from "@react-three/fiber";
-import { OrbitControls, PerspectiveCamera, Environment } from "@react-three/drei";
+import { OrbitControls, PerspectiveCamera, Environment, ContactShadows } from "@react-three/drei";
 import { Door3D } from "./door-3d";
 import * as THREE from "three";
 
 function Room() {
+  const wallThickness = 0.15;
+  const doorWidth = 1.3;
+  const doorHeight = 2.5;
+
   return (
     <group>
-      {/* Floor */}
+      {/* Floor - Clean shadow catcher */}
       <mesh
         rotation={[-Math.PI / 2, 0, 0]}
         position={[0, 0, 0]}
         receiveShadow
       >
-        <planeGeometry args={[10, 10]} />
-        <meshStandardMaterial color="#8B7355" roughness={0.8} />
+        <planeGeometry args={[15, 15]} />
+        <meshStandardMaterial color="#f5f5f5" roughness={0.9} metalness={0} />
       </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} />
+      {/* Proper Doorway with Reveal */}
+      <group position={[0, 0, -wallThickness / 2]}>
+        {/* Left Pillar */}
+        <mesh position={[-(doorWidth / 2 + wallThickness / 2), doorHeight / 2, 0]} receiveShadow castShadow>
+          <boxGeometry args={[wallThickness, doorHeight + wallThickness, wallThickness]} />
+          <meshStandardMaterial color="#fafafa" roughness={1} />
         </mesh>
 
-        {/* Right wall section */}
-        <mesh position={[3, 0, 0]} receiveShadow castShadow>
-          <boxGeometry args={[4, 5, 0.2]} />
-          <meshStandardMaterial color="#E5E5E5" roughness={0.9} />
+        {/* Right Pillar */}
+        <mesh position={[doorWidth / 2 + wallThickness / 2, doorHeight / 2, 0]} receiveShadow castShadow>
+          <boxGeometry args={[wallThickness, doorHeight + wallThickness, wallThickness]} />
+          <meshStandardMaterial color="#fafafa" roughness={1} />
         </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} />
+        {/* Top Lintel */}
+        <mesh position={[0, doorHeight + wallThickness / 2, 0]} receiveShadow castShadow>
+          <boxGeometry args={[doorWidth + wallThickness * 2, wallThickness, wallThickness]} />
+          <meshStandardMaterial color="#fafafa" roughness={1} />
+        </mesh>
+
+        {/* Main Wall - Left Section */}
+        <mesh position={[-doorWidth - wallThickness * 2, 2.5, 0]} receiveShadow castShadow>
+          <boxGeometry args={[6, 5, wallThickness]} />
+          <meshStandardMaterial color="#fafafa" roughness={1} />
+        </mesh>
+
+        {/* Main Wall - Right Section */}
+        <mesh position={[doorWidth + wallThickness * 2, 2.5, 0]} receiveShadow castShadow>
+          <boxGeometry args={[6, 5, wallThickness]} />
+          <meshStandardMaterial color="#fafafa" roughness={1} />
+        </mesh>
+
+        {/* Main Wall - Top Section */}
+        <mesh position={[0, doorHeight + wallThickness + 1.25, 0]} receiveShadow castShadow>
+          <boxGeometry args={[doorWidth + wallThickness * 2, 2.5, wallThickness]} />
+          <meshStandardMaterial color="#fafafa" roughness={1} />
         </mesh>
       </group>
 
-      {/* Side Walls */}
-      <mesh position={[-5, 2.5, 3]} receiveShadow castShadow>
-        <boxGeometry args={[0.2, 5, 8]} />
-        <meshStandardMaterial color="#F0F0F0" roughness={0.9} />
+      {/* Side Walls for depth */}
+      <mesh position={[-7, 2.5, 2]} receiveShadow castShadow>
+        <boxGeometry args={[0.15, 5, 10]} />
+        <meshStandardMaterial color="#fcfcfc" roughness={1} />
       </mesh>
 
-      <mesh position={[5, 2.5, 3]} receiveShadow castShadow>
-        <boxGeometry args={[0.2, 5, 8]} />
-        <meshStandardMaterial color="#F0F0F0" roughness={0.9} />
+      <mesh position={[7, 2.5, 2]} receiveShadow castShadow>
+        <boxGeometry args={[0.15, 5, 10]} />
+        <meshStandardMaterial color="#fcfcfc" roughness={1} />
       </mesh>
     </group>
   );
@@ -56,34 +78,29 @@ function Room() {
 function Lighting() {
   return (
     <>
-      {/* Ambient light for overall illumination */}
-      <ambientLight intensity={0.4} />
+      {/* Soft ambient light */}
+      <ambientLight intensity={0.5} />
 
-      {/* Main directional light (sun) with shadows */}
+      {/* Key light - main illumination */}
       <directionalLight
-        position={[5, 8, 5]}
-        intensity={1.2}
+        position={[5, 10, 8]}
+        intensity={1.5}
         castShadow
-        shadow-mapSize-width={2048}
-        shadow-mapSize-height={2048}
+        shadow-mapSize-width={4096}
+        shadow-mapSize-height={4096}
         shadow-camera-far={50}
         shadow-camera-left={-10}
         shadow-camera-right={10}
         shadow-camera-top={10}
         shadow-camera-bottom={-10}
+        shadow-bias={-0.0001}
       />
 
-      {/* Fill light from the side */}
-      <directionalLight position={[-5, 5, 2]} intensity={0.3} />
+      {/* Rim light for separation */}
+      <directionalLight position={[-3, 3, -5]} intensity={0.6} />
 
-      {/* Spot light for drama */}
-      <spotLight
-        position={[0, 5, 2]}
-        angle={0.5}
-        penumbra={0.5}
-        intensity={0.5}
-        castShadow
-      />
+      {/* Fill light */}
+      <directionalLight position={[0, 2, 5]} intensity={0.4} />
     </>
   );
 }
@@ -95,29 +112,41 @@ export function Scene3D() {
       gl={{
         antialias: true,
         toneMapping: THREE.ACESFilmicToneMapping,
-        toneMappingExposure: 1.2,
+        toneMappingExposure: 1.3,
+        outputColorSpace: THREE.SRGBColorSpace,
       }}
-      style={{ background: "#f5f5f5" }}
+      style={{ background: "#fafafa" }}
     >
       {/* Camera */}
-      <PerspectiveCamera makeDefault position={[0, 1.5, 4]} fov={50} />
+      <PerspectiveCamera makeDefault position={[0, 1.6, 4.5]} fov={45} />
 
       {/* Camera Controls - Limited rotation */}
       <OrbitControls
         enablePan={false}
         enableZoom={true}
-        minDistance={3}
-        maxDistance={6}
-        minPolarAngle={Math.PI / 4}
-        maxPolarAngle={Math.PI / 2}
+        minDistance={3.5}
+        maxDistance={7}
+        minPolarAngle={Math.PI / 3.5}
+        maxPolarAngle={Math.PI / 2.2}
+        maxAzimuthAngle={Math.PI / 6}
+        minAzimuthAngle={-Math.PI / 6}
         target={[0, 1.2, 0]}
       />
 
-      {/* Lighting */}
+      {/* Premium Studio Lighting */}
       <Lighting />
 
-      {/* Environment for reflections */}
-      <Environment preset="apartment" />
+      {/* Studio Environment for realistic reflections */}
+      <Environment preset="studio" environmentIntensity={0.6} />
+
+      {/* Contact Shadows for "Anti-Gravity" premium look */}
+      <ContactShadows
+        position={[0, 0.01, 0]}
+        opacity={0.4}
+        scale={15}
+        blur={2}
+        far={3}
+      />
 
       {/* The Room */}
       <Room />