"use client"; import { useRef, useMemo, Suspense } from "react"; import { useConfiguratorStore } from "@/lib/store"; import { RoundedBox, useTexture } from "@react-three/drei"; import * as THREE from "three"; import { Beugelgreep, Hoekgreep, Maangreep, Ovaalgreep, Klink, UGreep, } from "./handles-3d"; import { createStandardGlass, createRoundedCornerGlass, createInvertedUGlass, createNormalUGlass, } from "@/lib/glass-patterns"; import { generateDoorAssembly, mmToMeters, getDividerPositions, PROFILE_CORNER_RADIUS, type PhysicalPart, } from "@/lib/door-models"; // ============================================ // PHOTOREALISTIC MATERIALS // ============================================ /** * Steel Material with Aluwdoors Texture * Vertical steel grain for industrial look */ function SteelMaterialTextured({ color, finish }: { color: string; finish: string }) { try { // Load texture based on finish const texturePath = { zwart: "/textures/aluwdoors/aluwdoors-configurator-metaalkleur-zwart.jpg", brons: "/textures/aluwdoors/aluwdoors-configurator-metaalkleur-brons.jpg", grijs: "/textures/aluwdoors/aluwdoors-configurator-metaalkleur-antraciet.jpg", }[finish] || "/textures/aluwdoors/aluwdoors-configurator-metaalkleur-zwart.jpg"; const texture = useTexture(texturePath); // Configure texture for vertical steel grain texture.wrapS = texture.wrapT = THREE.RepeatWrapping; texture.repeat.set(0.5, 3); // Vertical grain texture.colorSpace = THREE.SRGBColorSpace; return ( ); } catch (error) { // Fallback to solid color if texture fails return ; } } /** * Fallback Steel Material (Solid Color) * Used when textures fail to load or as initial state */ function SteelMaterialFallback({ color }: { color: string }) { return ( ); } /** * Photorealistic Glass Material * High transmission for realistic glass look */ const GlassMaterial = () => ( ); // ============================================ // PHYSICAL PART RENDERER // ============================================ /** * Renders a single physical part with correct geometry */ function PhysicalPartComponent({ part, frameColor, finish, }: { part: PhysicalPart; frameColor: string; finish: string; }) { // Convert mm to meters const x = mmToMeters(part.x); const y = mmToMeters(part.y); const z = mmToMeters(part.z); const width = mmToMeters(part.width); const height = mmToMeters(part.height); const depth = mmToMeters(part.depth); // Glass uses different material if (part.isGlass) { return ( ); } // Steel profiles use RoundedBox for realistic edges const cornerRadius = mmToMeters(PROFILE_CORNER_RADIUS); return ( }> ); } // ============================================ // MAIN DOOR COMPONENT // ============================================ export function Door3DEnhanced() { const { doorType, gridType, finish, handle, glassPattern, doorLeafWidth, height } = useConfiguratorStore(); const doorRef = useRef(null); // Frame color based on finish const frameColor = { zwart: "#1a1a1a", brons: "#8B6F47", grijs: "#525252", }[finish] || "#1a1a1a"; // Generate door assembly from manufacturing specs const doorAssembly = useMemo( () => generateDoorAssembly(doorType, gridType, doorLeafWidth, height), [doorType, gridType, doorLeafWidth, height] ); // Convert dimensions to meters const doorWidth = mmToMeters(doorLeafWidth); const doorHeight = mmToMeters(height); // Profile dimensions in meters (for handle positioning) const stileWidth = mmToMeters(40); const railDepth = mmToMeters(40); // Get divider positions for glass patterns (backward compatibility) const dividerPositions = getDividerPositions(gridType, height); return ( {/* RENDER ALL PHYSICAL PARTS */} {doorAssembly.parts.map((part, index) => ( ))} {/* GLASS PANELS WITH PATTERNS */} {glassPattern !== "standard" && ( {glassPattern === "dt9-rounded" && ( )} {glassPattern === "dt10-ushape" && dividerPositions.length > 0 && ( <> {/* Top section - Inverted U */} {/* Bottom section - Normal U */} )} )} {/* PROFESSIONAL 3D HANDLES */} {handle === "beugelgreep" && ( )} {handle === "hoekgreep" && ( )} {handle === "maangreep" && ( )} {handle === "ovaalgreep" && ( )} {handle === "klink" && ( )} {handle === "u-greep" && ( )} ); }