diff --git a/components/configurator/door-3d.tsx b/components/configurator/door-3d.tsx index 3f1f4d1..6bcd8b3 100644 --- a/components/configurator/door-3d.tsx +++ b/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() { {/* Outer Frame - Top */} - - + + {/* Outer Frame - Bottom */} - - + + {/* Outer Frame - Left */} - - + + {/* Outer Frame - Right */} - - + + - {/* Glass Panel */} + {/* Glass Panel - Premium Physical Material */} - {/* Horizontal Dividers (Grid) */} + {/* Horizontal Dividers (Grid) - Slim profiles */} {dividerPositions.map((yPos, index) => ( - - - + + + ))} {/* Vertical Divider for Paneel */} {doorType === "paneel" && ( - - - + + + )} {/* Handle - U-Greep for Taats */} {doorType === "taats" && handle === "u-greep" && ( - - - + + + )} {/* Handle - Klink for Scharnier */} {doorType === "scharnier" && handle === "klink" && ( - + - - + + - - + + diff --git a/components/configurator/scene.tsx b/components/configurator/scene.tsx index 792014c..2459adc 100644 --- a/components/configurator/scene.tsx +++ b/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 ( - {/* Floor */} + {/* Floor - Clean shadow catcher */} - - + + - {/* Back Wall with Doorway */} - - {/* Left wall section */} - - - + {/* Proper Doorway with Reveal */} + + {/* Left Pillar */} + + + - {/* Right wall section */} - - - + {/* Right Pillar */} + + + - {/* Top wall section (above door) */} - - - + {/* Top Lintel */} + + + + + + {/* Main Wall - Left Section */} + + + + + + {/* Main Wall - Right Section */} + + + + + + {/* Main Wall - Top Section */} + + + - {/* Side Walls */} - - - + {/* Side Walls for depth */} + + + - - - + + + ); @@ -56,34 +78,29 @@ function Room() { function Lighting() { return ( <> - {/* Ambient light for overall illumination */} - + {/* Soft ambient light */} + - {/* Main directional light (sun) with shadows */} + {/* Key light - main illumination */} - {/* Fill light from the side */} - + {/* Rim light for separation */} + - {/* Spot light for drama */} - + {/* Fill light */} + ); } @@ -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 */} - + {/* Camera Controls - Limited rotation */} - {/* Lighting */} + {/* Premium Studio Lighting */} - {/* Environment for reflections */} - + {/* Studio Environment for realistic reflections */} + + + {/* Contact Shadows for "Anti-Gravity" premium look */} + {/* The Room */}