diff --git a/components/configurator/door-3d.tsx b/components/configurator/door-3d.tsx index 60f9bf5..140d37d 100644 --- a/components/configurator/door-3d.tsx +++ b/components/configurator/door-3d.tsx @@ -2,8 +2,34 @@ import { useRef } from "react"; import { useConfiguratorStore } from "@/lib/store"; +import { RoundedBox } from "@react-three/drei"; import * as THREE from "three"; +// Steel material configuration +const SteelMaterial = ({ color }: { color: string }) => ( + +); + +// Glass material configuration +const GlassMaterial = () => ( + +); + export function Door3D() { const { doorType, gridType, finish, handle, doorLeafWidth, height } = useConfiguratorStore(); @@ -19,11 +45,16 @@ export function Door3D() { // Convert mm to meters for 3D scene const doorWidth = doorLeafWidth / 1000; // Convert mm to m const doorHeight = height / 1000; // Convert mm to m - 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 + // Profile dimensions (in meters) + const stileWidth = 0.04; // 40mm vertical profiles + const stileDepth = 0.04; // 40mm depth + const railHeight = 0.02; // 20mm horizontal profiles + const railDepth = 0.04; // 40mm depth + const glassThickness = 0.008; // 8mm glass + const profileRadius = 0.001; // 1mm rounded corners + + // Calculate positions for grid dividers const getDividerPositions = () => { if (gridType === "3-vlak") { return [-doorHeight / 3, doorHeight / 3]; @@ -37,82 +68,124 @@ export function Door3D() { return ( - {/* Outer Frame - Top */} - - - - + {/* LEFT STILE - Vertical profile */} + + + - {/* Outer Frame - Bottom */} - - - - + {/* RIGHT STILE - Vertical profile */} + + + - {/* Outer Frame - Left */} - - - - + {/* TOP RAIL - Horizontal profile */} + + + - {/* Outer Frame - Right */} - - - - + {/* BOTTOM RAIL - Horizontal profile */} + + + - {/* Glass Panel - Premium Physical Material */} - - - - - - {/* Horizontal Dividers (Grid) - Slim profiles */} + {/* INTERMEDIATE RAILS (Grid dividers) */} {dividerPositions.map((yPos, index) => ( - - - - + + + ))} - {/* Vertical Divider for Paneel */} + {/* VERTICAL DIVIDER for Paneel */} {doorType === "paneel" && ( - - - - + + + )} - {/* Handle - U-Greep for Taats */} + {/* GLASS PANEL - Sits inside the frame */} + + + + + + {/* HANDLE - U-Greep for Taats */} {doorType === "taats" && handle === "u-greep" && ( - - - - + + + )} - {/* Handle - Klink for Scharnier */} + {/* HANDLE - Klink for Scharnier */} {doorType === "scharnier" && handle === "klink" && ( - - - - - - - + + + + + + diff --git a/components/configurator/scene.tsx b/components/configurator/scene.tsx index 2459adc..e9c8766 100644 --- a/components/configurator/scene.tsx +++ b/components/configurator/scene.tsx @@ -136,16 +136,17 @@ export function Scene3D() { {/* Premium Studio Lighting */} - {/* Studio Environment for realistic reflections */} - + {/* City/Apartment Environment for realistic steel reflections */} + - {/* Contact Shadows for "Anti-Gravity" premium look */} + {/* High-Resolution Contact Shadows for grounding */} {/* The Room */}