From fbc9fefeeac6ca652296542cab9b0f674edbaeb4 Mon Sep 17 00:00:00 2001
From: Ubuntu <anisy@vps-6507ef7a.vps.ovh.net>
Date: Sat, 14 Feb 2026 01:19:54 +0000
Subject: [PATCH] fix: Physically mounted handles with proper standoffs and
 powder-coat material

- All 6 handle types now have cylindrical mount standoffs (pootjes)
  connecting grip to door face: r=6mm, length=40mm
- Z-positioning: grip sits at PROFILE_DEPTH/2 + MOUNT_LENGTH (60mm from
  center), no more floating handles inside the door
- Material: replaced chrome HandleMaterial (metalness=0.95) with
  PowderCoatMaterial matching door frame texture (roughness=0.7, metalness=0.6)
- UGreep fully redesigned: proper U-shape with 2 standoffs + vertical bar
- All handles cast shadows onto the door frame for depth

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 components/configurator/handles-3d.tsx | 478 ++++++++++++++++---------
 1 file changed, 311 insertions(+), 167 deletions(-)

diff --git a/components/configurator/handles-3d.tsx b/components/configurator/handles-3d.tsx
index 784ee65..11d650a 100644
--- a/components/configurator/handles-3d.tsx
+++ b/components/configurator/handles-3d.tsx
@@ -1,9 +1,25 @@
 "use client";
 
-import { RoundedBox } from "@react-three/drei";
+import { Suspense } from "react";
+import { RoundedBox, useTexture } from "@react-three/drei";
 import * as THREE from "three";
 
-interface HandleProps {
+// ============================================
+// PHYSICAL CONSTANTS (mm converted to meters)
+// ============================================
+
+const PROFILE_DEPTH_M = 0.04;       // 40mm profile depth
+const DOOR_FACE_Z = PROFILE_DEPTH_M / 2; // 20mm - front face of door
+
+const MOUNT_RADIUS = 0.006;          // 6mm radius standoff cylinders
+const MOUNT_LENGTH = 0.04;           // 40mm standoff length
+const MOUNT_CENTER_Z = DOOR_FACE_Z + MOUNT_LENGTH / 2; // Center of mount
+const GRIP_CENTER_Z = DOOR_FACE_Z + MOUNT_LENGTH;       // Front face of mount = grip center
+
+const GRIP_RADIUS = 0.01;            // 10mm radius for round grips
+const GRIP_BAR_SIZE = 0.02;          // 20mm for square grip cross-section
+
+export interface HandleProps {
   finish: string;
   doorWidth: number;
   doorHeight: number;
@@ -11,66 +27,190 @@ interface HandleProps {
   stileWidth: number;
 }
 
-// Steel material for handles
-const HandleMaterial = ({ color }: { color: string }) => (
-  <meshStandardMaterial
-    color={color}
-    roughness={0.3}
-    metalness={0.95}
-    envMapIntensity={1.5}
-  />
-);
+// ============================================
+// MATERIALS
+// ============================================
 
 /**
- * Beugelgreep - Vertical bar handle with mounting blocks
- * Classic industrial style, common on steel pivot doors
+ * Powder-coated steel material matching door frame finish.
+ * Loaded with texture for visual continuity with the frame.
  */
-export function Beugelgreep({ finish, doorHeight, railDepth }: HandleProps) {
-  const color = ({
-    zwart: "#1a1a1a",
-    brons: "#8B6F47",
-    grijs: "#525252",
-  }[finish] || "#1a1a1a") as string;
+function HandleMaterialTextured({ color, finish }: { color: string; finish: string }) {
+  try {
+    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 handleLength = Math.min(doorHeight * 0.35, 0.8); // Max 80cm
-  const barDiameter = 0.025; // 25mm diameter bar
-  const mountBlockSize: [number, number, number] = [0.04, 0.06, 0.03]; // Mount block dimensions
+    const texture = useTexture(texturePath);
+    texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
+    texture.repeat.set(0.2, 1);
+    texture.colorSpace = THREE.SRGBColorSpace;
+
+    return (
+      <meshStandardMaterial
+        map={texture}
+        color={color}
+        roughness={0.7}
+        metalness={0.6}
+        envMapIntensity={1.5}
+      />
+    );
+  } catch {
+    return <HandleMaterialFallback color={color} />;
+  }
+}
+
+function HandleMaterialFallback({ color }: { color: string }) {
+  return (
+    <meshStandardMaterial
+      color={color}
+      roughness={0.7}
+      metalness={0.6}
+      envMapIntensity={1.5}
+    />
+  );
+}
+
+/** Wrap textured material in Suspense */
+function PowderCoatMaterial({ color, finish }: { color: string; finish: string }) {
+  return (
+    <Suspense fallback={<HandleMaterialFallback color={color} />}>
+      <HandleMaterialTextured color={color} finish={finish} />
+    </Suspense>
+  );
+}
+
+function getColor(finish: string): string {
+  return { zwart: "#1a1a1a", brons: "#8B6F47", grijs: "#525252" }[finish] || "#1a1a1a";
+}
+
+// ============================================
+// SHARED MOUNT COMPONENT
+// ============================================
+
+/**
+ * A single cylindrical standoff (pootje) connecting handle to door face.
+ * Rotated 90° on X to point outward from the door surface.
+ */
+function MountStandoff({
+  position,
+  color,
+  finish,
+}: {
+  position: [number, number, number];
+  color: string;
+  finish: string;
+}) {
+  return (
+    <mesh
+      position={position}
+      rotation={[Math.PI / 2, 0, 0]}
+      castShadow
+    >
+      <cylinderGeometry args={[MOUNT_RADIUS, MOUNT_RADIUS, MOUNT_LENGTH, 16]} />
+      <PowderCoatMaterial color={color} finish={finish} />
+    </mesh>
+  );
+}
+
+// ============================================
+// HANDLE COMPONENTS
+// ============================================
+
+/**
+ * U-Greep: Proper U-shaped bar handle with two standoff mounts.
+ * The grip sits 40mm off the door face, connected by two cylindrical pootjes.
+ */
+export function UGreep({ finish, doorHeight }: HandleProps) {
+  const color = getColor(finish);
+  const gripLength = Math.min(doorHeight * 0.25, 0.6); // Max 60cm, proportional
+  const mountSpacing = gripLength - GRIP_BAR_SIZE; // Distance between mount centers
 
   return (
-    <group position={[0, 0, railDepth / 2 + 0.02]}>
-      {/* Main vertical bar */}
-      <mesh castShadow>
-        <cylinderGeometry args={[barDiameter / 2, barDiameter / 2, handleLength, 32]} />
-        <HandleMaterial color={color} />
-      </mesh>
+    <group position={[0, 0, 0]}>
+      {/* Top mount standoff */}
+      <MountStandoff
+        position={[0, mountSpacing / 2, MOUNT_CENTER_Z]}
+        color={color}
+        finish={finish}
+      />
 
-      {/* Top mounting block */}
+      {/* Bottom mount standoff */}
+      <MountStandoff
+        position={[0, -mountSpacing / 2, MOUNT_CENTER_Z]}
+        color={color}
+        finish={finish}
+      />
+
+      {/* Vertical grip bar */}
+      <RoundedBox
+        args={[GRIP_BAR_SIZE, gripLength, GRIP_BAR_SIZE]}
+        radius={0.003}
+        smoothness={4}
+        position={[0, 0, GRIP_CENTER_Z]}
+        castShadow
+        receiveShadow
+      >
+        <PowderCoatMaterial color={color} finish={finish} />
+      </RoundedBox>
+    </group>
+  );
+}
+
+/**
+ * Beugelgreep: Vertical bar handle (round) with mounting blocks.
+ * Two rectangular mounting blocks press against the door face,
+ * with a round bar connecting them.
+ */
+export function Beugelgreep({ finish, doorHeight }: HandleProps) {
+  const color = getColor(finish);
+  const gripLength = Math.min(doorHeight * 0.35, 0.8); // Max 80cm
+  const barDiameter = 0.025; // 25mm
+  const mountBlockSize: [number, number, number] = [0.04, 0.05, MOUNT_LENGTH];
+  const mountSpacing = gripLength * 0.85;
+
+  return (
+    <group position={[0, 0, 0]}>
+      {/* Top mounting block (sits on door face, extends outward) */}
       <RoundedBox
         args={mountBlockSize}
         radius={0.003}
-        position={[0, handleLength / 2 + mountBlockSize[1] / 2, -0.01]}
+        smoothness={4}
+        position={[0, mountSpacing / 2, MOUNT_CENTER_Z]}
         castShadow
+        receiveShadow
       >
-        <HandleMaterial color={color} />
+        <PowderCoatMaterial color={color} finish={finish} />
       </RoundedBox>
 
       {/* Bottom mounting block */}
       <RoundedBox
         args={mountBlockSize}
         radius={0.003}
-        position={[0, -handleLength / 2 - mountBlockSize[1] / 2, -0.01]}
+        smoothness={4}
+        position={[0, -mountSpacing / 2, MOUNT_CENTER_Z]}
         castShadow
+        receiveShadow
       >
-        <HandleMaterial color={color} />
+        <PowderCoatMaterial color={color} finish={finish} />
       </RoundedBox>
 
-      {/* Mounting screws (detail) */}
-      {[
-        [0, handleLength / 2 + mountBlockSize[1] / 2, 0.005],
-        [0, -handleLength / 2 - mountBlockSize[1] / 2, 0.005],
-      ].map((pos, i) => (
-        <mesh key={i} position={pos as [number, number, number]} castShadow>
-          <cylinderGeometry args={[0.003, 0.003, 0.008, 16]} />
+      {/* Main vertical round bar */}
+      <mesh position={[0, 0, GRIP_CENTER_Z]} castShadow>
+        <cylinderGeometry args={[barDiameter / 2, barDiameter / 2, gripLength, 32]} />
+        <PowderCoatMaterial color={color} finish={finish} />
+      </mesh>
+
+      {/* Mounting screw details */}
+      {[mountSpacing / 2, -mountSpacing / 2].map((y, i) => (
+        <mesh
+          key={i}
+          position={[0, y, DOOR_FACE_Z + MOUNT_LENGTH + 0.002]}
+          castShadow
+        >
+          <cylinderGeometry args={[0.003, 0.003, 0.005, 12]} />
           <meshStandardMaterial color="#2a2a2a" metalness={0.9} roughness={0.1} />
         </mesh>
       ))}
@@ -79,32 +219,44 @@ export function Beugelgreep({ finish, doorHeight, railDepth }: HandleProps) {
 }
 
 /**
- * Hoekgreep - L-shaped corner handle
- * Minimalist flush-mount design
+ * Hoekgreep: L-shaped corner handle with standoff mounts.
+ * Horizontal bar + vertical bar meeting at a rounded corner.
  */
-export function Hoekgreep({ finish, doorWidth, railDepth, stileWidth }: HandleProps) {
-  const color = ({
-    zwart: "#1a1a1a",
-    brons: "#8B6F47",
-    grijs: "#525252",
-  }[finish] || "#1a1a1a") as string;
+export function Hoekgreep({ finish, doorWidth, stileWidth }: HandleProps) {
+  const color = getColor(finish);
+  const horizontalLength = 0.15;
+  const verticalLength = 0.12;
+  const barThickness = 0.02;
+  const barWidth = 0.03;
 
-  const horizontalLength = 0.15; // 15cm horizontal
-  const verticalLength = 0.12; // 12cm vertical
-  const barThickness = 0.02; // 20mm thick
-  const barWidth = 0.03; // 30mm wide
+  // Position near right stile
+  const xPos = doorWidth / 2 - stileWidth - 0.12;
 
   return (
-    <group position={[doorWidth / 2 - stileWidth - 0.12, 0, railDepth / 2 + 0.015]}>
+    <group position={[xPos, 0, 0]}>
+      {/* Top mount standoff */}
+      <MountStandoff
+        position={[horizontalLength * 0.8, verticalLength / 2, MOUNT_CENTER_Z]}
+        color={color}
+        finish={finish}
+      />
+
+      {/* Bottom mount standoff */}
+      <MountStandoff
+        position={[0, -verticalLength * 0.3, MOUNT_CENTER_Z]}
+        color={color}
+        finish={finish}
+      />
+
       {/* Horizontal bar */}
       <RoundedBox
         args={[horizontalLength, barWidth, barThickness]}
         radius={0.003}
         smoothness={4}
-        position={[horizontalLength / 2, verticalLength / 2, 0]}
+        position={[horizontalLength / 2, verticalLength / 2, GRIP_CENTER_Z]}
         castShadow
       >
-        <HandleMaterial color={color} />
+        <PowderCoatMaterial color={color} finish={finish} />
       </RoundedBox>
 
       {/* Vertical bar */}
@@ -112,157 +264,173 @@ export function Hoekgreep({ finish, doorWidth, railDepth, stileWidth }: HandlePr
         args={[barWidth, verticalLength, barThickness]}
         radius={0.003}
         smoothness={4}
-        position={[0, 0, 0]}
+        position={[0, 0, GRIP_CENTER_Z]}
         castShadow
       >
-        <HandleMaterial color={color} />
+        <PowderCoatMaterial color={color} finish={finish} />
       </RoundedBox>
 
-      {/* Corner radius (decorative) */}
-      <mesh position={[0.015, verticalLength / 2 - 0.015, 0]} rotation={[0, 0, 0]} castShadow>
-        <torusGeometry args={[0.015, 0.01, 16, 32, Math.PI / 2]} />
-        <HandleMaterial color={color} />
+      {/* Corner radius */}
+      <mesh
+        position={[0.015, verticalLength / 2 - 0.015, GRIP_CENTER_Z]}
+        castShadow
+      >
+        <torusGeometry args={[0.015, barThickness / 2, 16, 32, Math.PI / 2]} />
+        <PowderCoatMaterial color={color} finish={finish} />
       </mesh>
     </group>
   );
 }
 
 /**
- * Maangreep - Crescent/moon shaped recessed handle
- * Elegant curved design for flush doors
+ * Maangreep: Crescent/moon shaped handle with standoff mounts.
+ * Curved torus section mounted on two pootjes.
  */
-export function Maangreep({ finish, doorWidth, railDepth, stileWidth }: HandleProps) {
-  const color = ({
-    zwart: "#1a1a1a",
-    brons: "#8B6F47",
-    grijs: "#525252",
-  }[finish] || "#1a1a1a") as string;
-
-  const curveRadius = 0.08; // 8cm radius
-  const handleDepth = 0.025; // 25mm deep recess
+export function Maangreep({ finish, doorWidth, stileWidth }: HandleProps) {
+  const color = getColor(finish);
+  const curveRadius = 0.08;
+  const xPos = doorWidth / 2 - stileWidth - 0.12;
 
   return (
-    <group position={[doorWidth / 2 - stileWidth - 0.12, 0, railDepth / 2]}>
+    <group position={[xPos, 0, 0]}>
+      {/* Left mount standoff */}
+      <MountStandoff
+        position={[-curveRadius * 0.8, 0, MOUNT_CENTER_Z]}
+        color={color}
+        finish={finish}
+      />
+
+      {/* Right mount standoff */}
+      <MountStandoff
+        position={[curveRadius * 0.8, 0, MOUNT_CENTER_Z]}
+        color={color}
+        finish={finish}
+      />
+
       {/* Main curved handle body */}
-      <mesh rotation={[Math.PI / 2, 0, 0]} castShadow>
+      <mesh
+        rotation={[Math.PI / 2, 0, 0]}
+        position={[0, 0, GRIP_CENTER_Z]}
+        castShadow
+      >
         <torusGeometry args={[curveRadius, 0.015, 16, 32, Math.PI]} />
-        <HandleMaterial color={color} />
+        <PowderCoatMaterial color={color} finish={finish} />
       </mesh>
 
       {/* Left end cap */}
-      <mesh position={[-curveRadius, 0, 0]} castShadow>
+      <mesh position={[-curveRadius, 0, GRIP_CENTER_Z]} castShadow>
         <sphereGeometry args={[0.015, 32, 32]} />
-        <HandleMaterial color={color} />
+        <PowderCoatMaterial color={color} finish={finish} />
       </mesh>
 
       {/* Right end cap */}
-      <mesh position={[curveRadius, 0, 0]} castShadow>
+      <mesh position={[curveRadius, 0, GRIP_CENTER_Z]} castShadow>
         <sphereGeometry args={[0.015, 32, 32]} />
-        <HandleMaterial color={color} />
+        <PowderCoatMaterial color={color} finish={finish} />
       </mesh>
-
-      {/* Recessed mounting plate */}
-      <RoundedBox
-        args={[curveRadius * 2.2, 0.05, handleDepth]}
-        radius={0.005}
-        position={[0, 0, -handleDepth / 2]}
-        receiveShadow
-      >
-        <meshStandardMaterial color={color} roughness={0.8} metalness={0.3} />
-      </RoundedBox>
     </group>
   );
 }
 
 /**
- * Ovaalgreep - Oval/elliptical pull handle
- * Modern minimalist design
+ * Ovaalgreep: Oval/elliptical pull handle with standoff mounts.
+ * Extruded ellipse shape mounted on two pootjes.
  */
-export function Ovaalgreep({ finish, doorWidth, railDepth, stileWidth }: HandleProps) {
-  const color = ({
-    zwart: "#1a1a1a",
-    brons: "#8B6F47",
-    grijs: "#525252",
-  }[finish] || "#1a1a1a") as string;
+export function Ovaalgreep({ finish, doorWidth, stileWidth }: HandleProps) {
+  const color = getColor(finish);
+  const xPos = doorWidth / 2 - stileWidth - 0.12;
 
-  // Create oval shape using THREE.Shape
   const shape = new THREE.Shape();
-  const rx = 0.06; // 6cm horizontal radius
-  const ry = 0.03; // 3cm vertical radius
-
-  // Draw ellipse
+  const rx = 0.06;
+  const ry = 0.03;
   for (let i = 0; i <= 64; i++) {
     const angle = (i / 64) * Math.PI * 2;
     const x = Math.cos(angle) * rx;
     const y = Math.sin(angle) * ry;
-    if (i === 0) {
-      shape.moveTo(x, y);
-    } else {
-      shape.lineTo(x, y);
-    }
+    if (i === 0) shape.moveTo(x, y);
+    else shape.lineTo(x, y);
   }
 
-  const extrudeSettings = {
-    depth: 0.02,
-    bevelEnabled: true,
-    bevelThickness: 0.003,
-    bevelSize: 0.003,
-    bevelSegments: 8,
-  };
-
   return (
-    <group position={[doorWidth / 2 - stileWidth - 0.12, 0, railDepth / 2 + 0.015]}>
-      {/* Oval handle ring */}
-      <mesh castShadow rotation={[0, 0, 0]}>
-        <extrudeGeometry args={[shape, extrudeSettings]} />
-        <HandleMaterial color={color} />
+    <group position={[xPos, 0, 0]}>
+      {/* Top mount standoff */}
+      <MountStandoff
+        position={[0, ry * 0.6, MOUNT_CENTER_Z]}
+        color={color}
+        finish={finish}
+      />
+
+      {/* Bottom mount standoff */}
+      <MountStandoff
+        position={[0, -ry * 0.6, MOUNT_CENTER_Z]}
+        color={color}
+        finish={finish}
+      />
+
+      {/* Oval handle */}
+      <mesh position={[0, 0, GRIP_CENTER_Z - 0.01]} castShadow>
+        <extrudeGeometry
+          args={[shape, {
+            depth: 0.02,
+            bevelEnabled: true,
+            bevelThickness: 0.003,
+            bevelSize: 0.003,
+            bevelSegments: 8,
+          }]}
+        />
+        <PowderCoatMaterial color={color} finish={finish} />
       </mesh>
     </group>
   );
 }
 
 /**
- * Klink - Traditional door handle with lever
- * Classic hinged door handle
+ * Klink: Traditional lever handle with rosette, standoff-mounted.
+ * Rosette plate against door, lever extending horizontally.
  */
-export function Klink({ finish, doorWidth, railDepth, stileWidth }: HandleProps) {
-  const color = ({
-    zwart: "#1a1a1a",
-    brons: "#8B6F47",
-    grijs: "#525252",
-  }[finish] || "#1a1a1a") as string;
-
-  const leverLength = 0.12; // 12cm lever
-  const leverThickness = 0.015; // 15mm thick
+export function Klink({ finish, doorWidth, stileWidth }: HandleProps) {
+  const color = getColor(finish);
+  const leverLength = 0.12;
+  const xPos = doorWidth / 2 - stileWidth - 0.1;
 
   return (
-    <group position={[doorWidth / 2 - stileWidth - 0.1, 0, railDepth / 2 + 0.01]}>
-      {/* Mounting rosette (round plate) */}
-      <mesh castShadow>
+    <group position={[xPos, 0, 0]}>
+      {/* Mounting rosette (flat against door face) */}
+      <mesh position={[0, 0, DOOR_FACE_Z + 0.004]} castShadow>
         <cylinderGeometry args={[0.03, 0.03, 0.008, 32]} />
-        <HandleMaterial color={color} />
+        <PowderCoatMaterial color={color} finish={finish} />
+      </mesh>
+
+      {/* Square spindle standoff (connects rosette to lever) */}
+      <mesh
+        position={[0, 0, MOUNT_CENTER_Z]}
+        rotation={[Math.PI / 2, 0, 0]}
+        castShadow
+      >
+        <cylinderGeometry args={[0.008, 0.008, MOUNT_LENGTH * 0.6, 8]} />
+        <PowderCoatMaterial color={color} finish={finish} />
       </mesh>
 
       {/* Lever handle */}
       <RoundedBox
-        args={[leverLength, 0.02, leverThickness]}
+        args={[leverLength, 0.02, 0.015]}
         radius={0.005}
         smoothness={4}
-        position={[leverLength / 2, 0, 0]}
+        position={[leverLength / 2, 0, GRIP_CENTER_Z]}
         rotation={[0, 0, -0.15]}
         castShadow
       >
-        <HandleMaterial color={color} />
+        <PowderCoatMaterial color={color} finish={finish} />
       </RoundedBox>
 
-      {/* Lever end (ergonomic grip) */}
-      <mesh position={[leverLength, -0.015, 0]} castShadow>
+      {/* Lever end grip */}
+      <mesh position={[leverLength, -0.015, GRIP_CENTER_Z]} castShadow>
         <sphereGeometry args={[0.012, 32, 32]} />
-        <HandleMaterial color={color} />
+        <PowderCoatMaterial color={color} finish={finish} />
       </mesh>
 
-      {/* Lock cylinder (detail) */}
-      <mesh position={[0, -0.045, 0]} castShadow>
+      {/* Lock cylinder below */}
+      <mesh position={[0, -0.045, DOOR_FACE_Z + 0.005]} castShadow>
         <cylinderGeometry args={[0.008, 0.008, 0.01, 16]} />
         <meshStandardMaterial
           color={finish === "brons" ? "#6B5434" : "#2a2a2a"}
@@ -273,27 +441,3 @@ export function Klink({ finish, doorWidth, railDepth, stileWidth }: HandleProps)
     </group>
   );
 }
-
-/**
- * U-Greep - U-shaped bar handle (current simple version)
- * Straight vertical bar for pivot doors
- */
-export function UGreep({ finish, railDepth }: HandleProps) {
-  const color = ({
-    zwart: "#1a1a1a",
-    brons: "#8B6F47",
-    grijs: "#525252",
-  }[finish] || "#1a1a1a") as string;
-
-  return (
-    <RoundedBox
-      args={[0.02, 0.6, 0.02]}
-      radius={0.003}
-      smoothness={4}
-      position={[0, 0, railDepth / 2 + 0.01]}
-      castShadow
-    >
-      <HandleMaterial color={color} />
-    </RoundedBox>
-  );
-}