From 2f0d6619fada865f7ec3c2a0c94a5ca16f27ffb8 Mon Sep 17 00:00:00 2001 From: Ubuntu Date: Tue, 10 Feb 2026 16:54:20 +0000 Subject: [PATCH] Rebuild door with procedural construction and premium materials MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Complete architectural overhaul from solid blocks to manufactured product: **Procedural Construction (The Welder's Approach):** Components: - LEFT/RIGHT STILES: 40x40mm vertical profiles with 1mm rounded corners - TOP/BOTTOM RAILS: 20x40mm horizontal profiles with 1mm rounded corners - INTERMEDIATE RAILS: Dynamic based on gridType (3-vlak/4-vlak) - GLASS PANEL: 8mm thick, sits inside frame cavity - VERTICAL DIVIDER: For paneel type (40x40mm) - HANDLES: U-greep (20x600x20mm) or Klink (80x20x20mm + sphere) Using RoundedBox from @react-three/drei: - All steel parts have 1mm radius rounded edges - Catches light realistically like real steel - Smoothness=4 for quality curves Assembly Logic: - Stiles positioned at ±(doorWidth/2 - stileWidth/2) - Rails positioned at ±(doorHeight/2 - railHeight/2) - Glass inset inside frame (doorWidth - stileWidth*2) - No overlapping geometry - clean construction **Premium Materials:** Steel Material: - color: #1a1a1a (off-black, never pure black) - roughness: 0.25 (satin finish, slightly reflective) - metalness: 0.8 (clearly metallic) - envMapIntensity: 1 (reflects environment) Glass Material (MeshPhysicalMaterial): - transmission: 1 (full transparency) - roughness: 0.05 (almost perfectly smooth) - thickness: 2.5 (proper light refraction) - ior: 1.5 (index of refraction for glass) - color: #eff6ff (subtle blue tint) - clearcoat: 1 (surface reflections) **Enhanced Environment:** Lighting: - Changed preset from "studio" to "city" - environmentIntensity: 0.8 (stronger reflections) - Metal profiles now reflect surroundings realistically Contact Shadows: - resolution: 1024 (high quality) - opacity: 0.5, scale: 10, blur: 2 - Proper grounding effect **Result:** - Door looks like manufactured steel product, not a solid block - Rounded edges catch light realistically - Steel reflects environment (city buildings, sky) - Glass has proper refraction and transmission - Shadows ground the door properly - Each component is individually constructed and lit Visual Quality: Studio-grade photorealism Co-Authored-By: Claude Sonnet 4.5 --- components/configurator/door-3d.tsx | 197 +++++++++++++++++++--------- components/configurator/scene.tsx | 13 +- 2 files changed, 142 insertions(+), 68 deletions(-) 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 */}