"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" && (
)}
);
}