feat: Wall mounting system with Sparingsmaat logic and reveal surfaces
Phase 1 (Logic): Add Dutch mounting constants to door-models.ts - STELRUIMTE=10mm (tolerance), HANGNAAD=3mm (gap per side) - WALL_THICKNESS=150mm (standard interior wall) - calculateMountingDimensions() derives frame/leaf from sparingsmaat Phase 2 (Visual): Replace LivingRoom with WallContainer in scene.tsx - 4-box wall construction with precise rectangular hole - Hole = doorLeafWidth + STELRUIMTE (visible 5mm gap per side) - Door sits INSIDE the wall, not in front of it Phase 3 (Detail): Reveal surfaces and door-type positioning - Plaster/stucco material on reveal edges (inner hole surfaces) - Taats: door centered in wall depth (pivot at center) - Scharnier/Paneel: offset toward front face - Dedicated fill light illuminating reveal depth - Baseboard (plint) on both sides of opening Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Ubuntu
@@ -1,182 +1,274 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import { Canvas } from "@react-three/fiber";
|
import { Canvas } from "@react-three/fiber";
|
||||||
import { OrbitControls, PerspectiveCamera, Environment, ContactShadows } from "@react-three/drei";
|
import {
|
||||||
|
OrbitControls,
|
||||||
|
PerspectiveCamera,
|
||||||
|
Environment,
|
||||||
|
ContactShadows,
|
||||||
|
} from "@react-three/drei";
|
||||||
import { Door3DEnhanced } from "./door-3d-enhanced";
|
import { Door3DEnhanced } from "./door-3d-enhanced";
|
||||||
import { useConfiguratorStore } from "@/lib/store";
|
import { useConfiguratorStore } from "@/lib/store";
|
||||||
|
import {
|
||||||
|
STELRUIMTE,
|
||||||
|
WALL_THICKNESS,
|
||||||
|
TAATS_PIVOT_OFFSET,
|
||||||
|
mmToMeters,
|
||||||
|
} from "@/lib/door-models";
|
||||||
import * as THREE from "three";
|
import * as THREE from "three";
|
||||||
|
|
||||||
function LivingRoom({ doorWidth, doorHeight }: { doorWidth: number; doorHeight: number }) {
|
// ============================================
|
||||||
const wallThickness = 0.15;
|
// WALL MATERIALS
|
||||||
const roomWidth = 8;
|
// ============================================
|
||||||
const roomDepth = 6;
|
|
||||||
const roomHeight = 3;
|
|
||||||
|
|
||||||
// Calculate dynamic doorway dimensions
|
/** Smooth painted wall surface */
|
||||||
const doorwayWidth = doorWidth + wallThickness * 2 + 0.1; // Extra margin
|
const WallMaterial = () => (
|
||||||
const doorwayHeight = doorHeight + wallThickness + 0.1;
|
<meshStandardMaterial color="#f5f2ed" roughness={0.95} metalness={0} />
|
||||||
|
);
|
||||||
|
|
||||||
|
/** Stucco/plaster reveal surface (inside the door opening) */
|
||||||
|
const RevealMaterial = () => (
|
||||||
|
<meshStandardMaterial color="#e8e4dd" roughness={1.0} metalness={0} />
|
||||||
|
);
|
||||||
|
|
||||||
|
/** Floor material - light wood */
|
||||||
|
const FloorMaterial = () => (
|
||||||
|
<meshStandardMaterial color="#e8dcc4" roughness={0.8} metalness={0} />
|
||||||
|
);
|
||||||
|
|
||||||
|
// ============================================
|
||||||
|
// WALL CONTAINER WITH PRECISE HOLE
|
||||||
|
// ============================================
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Creates a wall with a precise rectangular opening (sparing).
|
||||||
|
* Uses 4 boxes to form the wall around the hole instead of CSG.
|
||||||
|
* The reveal (inner edge of the hole) has a plaster texture.
|
||||||
|
*/
|
||||||
|
function WallContainer({
|
||||||
|
holeWidth,
|
||||||
|
holeHeight,
|
||||||
|
wallThickness,
|
||||||
|
}: {
|
||||||
|
holeWidth: number; // meters - sparingsmaat width
|
||||||
|
holeHeight: number; // meters - sparingsmaat height
|
||||||
|
wallThickness: number; // meters
|
||||||
|
}) {
|
||||||
|
const wallWidth = 4.0; // Total wall width in meters
|
||||||
|
const wallHeight = 3.0; // Total wall height (floor to ceiling)
|
||||||
|
|
||||||
|
// Half dimensions for positioning
|
||||||
|
const halfHoleW = holeWidth / 2;
|
||||||
|
const halfWallT = wallThickness / 2;
|
||||||
|
|
||||||
|
// Left wall section: from left edge to hole left edge
|
||||||
|
const leftSectionWidth = (wallWidth - holeWidth) / 2;
|
||||||
|
const leftSectionX = -(halfHoleW + leftSectionWidth / 2);
|
||||||
|
|
||||||
|
// Right wall section: from hole right edge to right edge
|
||||||
|
const rightSectionWidth = leftSectionWidth;
|
||||||
|
const rightSectionX = halfHoleW + rightSectionWidth / 2;
|
||||||
|
|
||||||
|
// Top section: above hole, full width
|
||||||
|
const topSectionHeight = wallHeight - holeHeight;
|
||||||
|
const topSectionY = holeHeight + topSectionHeight / 2;
|
||||||
|
|
||||||
|
// Stelruimte gap (visual indicator)
|
||||||
|
const gapPerSide = mmToMeters(STELRUIMTE / 2);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<group>
|
<group position={[0, 0, 0]}>
|
||||||
{/* Floor - Modern light wood */}
|
{/* === MAIN WALL SECTIONS === */}
|
||||||
<mesh rotation={[-Math.PI / 2, 0, 0]} position={[0, 0, 0]} receiveShadow>
|
|
||||||
<planeGeometry args={[roomWidth * 2, roomDepth * 2]} />
|
{/* Left wall section */}
|
||||||
<meshStandardMaterial color="#e8dcc4" roughness={0.8} metalness={0} />
|
<mesh
|
||||||
|
position={[leftSectionX, wallHeight / 2, 0]}
|
||||||
|
castShadow
|
||||||
|
receiveShadow
|
||||||
|
>
|
||||||
|
<boxGeometry args={[leftSectionWidth, wallHeight, wallThickness]} />
|
||||||
|
<WallMaterial />
|
||||||
</mesh>
|
</mesh>
|
||||||
|
|
||||||
{/* Back Wall with Dynamic Doorway */}
|
{/* Right wall section */}
|
||||||
<group position={[0, 0, -wallThickness / 2]}>
|
<mesh
|
||||||
{/* Left Pillar - Dynamic height */}
|
position={[rightSectionX, wallHeight / 2, 0]}
|
||||||
<mesh
|
castShadow
|
||||||
position={[-(doorwayWidth / 2 + wallThickness / 2), roomHeight / 2, 0]}
|
receiveShadow
|
||||||
receiveShadow
|
>
|
||||||
castShadow
|
<boxGeometry args={[rightSectionWidth, wallHeight, wallThickness]} />
|
||||||
>
|
<WallMaterial />
|
||||||
<boxGeometry
|
|
||||||
args={[wallThickness, roomHeight, wallThickness]}
|
|
||||||
/>
|
|
||||||
<meshStandardMaterial color="#f5f5f5" roughness={1} />
|
|
||||||
</mesh>
|
|
||||||
|
|
||||||
{/* Right Pillar - Dynamic height */}
|
|
||||||
<mesh
|
|
||||||
position={[doorwayWidth / 2 + wallThickness / 2, roomHeight / 2, 0]}
|
|
||||||
receiveShadow
|
|
||||||
castShadow
|
|
||||||
>
|
|
||||||
<boxGeometry
|
|
||||||
args={[wallThickness, roomHeight, wallThickness]}
|
|
||||||
/>
|
|
||||||
<meshStandardMaterial color="#f5f5f5" roughness={1} />
|
|
||||||
</mesh>
|
|
||||||
|
|
||||||
{/* Doorway Frame - Left */}
|
|
||||||
<mesh
|
|
||||||
position={[-(doorwayWidth / 2), doorHeight / 2, 0]}
|
|
||||||
receiveShadow
|
|
||||||
castShadow
|
|
||||||
>
|
|
||||||
<boxGeometry args={[wallThickness, doorHeight, wallThickness]} />
|
|
||||||
<meshStandardMaterial color="#e0e0e0" roughness={0.9} />
|
|
||||||
</mesh>
|
|
||||||
|
|
||||||
{/* Doorway Frame - Right */}
|
|
||||||
<mesh
|
|
||||||
position={[doorwayWidth / 2, doorHeight / 2, 0]}
|
|
||||||
receiveShadow
|
|
||||||
castShadow
|
|
||||||
>
|
|
||||||
<boxGeometry args={[wallThickness, doorHeight, wallThickness]} />
|
|
||||||
<meshStandardMaterial color="#e0e0e0" roughness={0.9} />
|
|
||||||
</mesh>
|
|
||||||
|
|
||||||
{/* Doorway Frame - Top (Lintel) */}
|
|
||||||
<mesh
|
|
||||||
position={[0, doorHeight, 0]}
|
|
||||||
receiveShadow
|
|
||||||
castShadow
|
|
||||||
>
|
|
||||||
<boxGeometry
|
|
||||||
args={[doorwayWidth + wallThickness * 2, wallThickness, wallThickness]}
|
|
||||||
/>
|
|
||||||
<meshStandardMaterial color="#e0e0e0" roughness={0.9} />
|
|
||||||
</mesh>
|
|
||||||
|
|
||||||
{/* Main Wall - Left Section */}
|
|
||||||
<mesh
|
|
||||||
position={[-(doorwayWidth / 2 + wallThickness + (roomWidth - doorwayWidth) / 4), roomHeight / 2, 0]}
|
|
||||||
receiveShadow
|
|
||||||
castShadow
|
|
||||||
>
|
|
||||||
<boxGeometry
|
|
||||||
args={[(roomWidth - doorwayWidth) / 2, roomHeight, wallThickness]}
|
|
||||||
/>
|
|
||||||
<meshStandardMaterial color="#f5f5f5" roughness={1} />
|
|
||||||
</mesh>
|
|
||||||
|
|
||||||
{/* Main Wall - Right Section */}
|
|
||||||
<mesh
|
|
||||||
position={[doorwayWidth / 2 + wallThickness + (roomWidth - doorwayWidth) / 4, roomHeight / 2, 0]}
|
|
||||||
receiveShadow
|
|
||||||
castShadow
|
|
||||||
>
|
|
||||||
<boxGeometry
|
|
||||||
args={[(roomWidth - doorwayWidth) / 2, roomHeight, wallThickness]}
|
|
||||||
/>
|
|
||||||
<meshStandardMaterial color="#f5f5f5" roughness={1} />
|
|
||||||
</mesh>
|
|
||||||
|
|
||||||
{/* Main Wall - Top Section (above doorway) */}
|
|
||||||
<mesh
|
|
||||||
position={[0, doorwayHeight + (roomHeight - doorwayHeight) / 2, 0]}
|
|
||||||
receiveShadow
|
|
||||||
castShadow
|
|
||||||
>
|
|
||||||
<boxGeometry
|
|
||||||
args={[doorwayWidth + wallThickness * 2, roomHeight - doorwayHeight, wallThickness]}
|
|
||||||
/>
|
|
||||||
<meshStandardMaterial color="#f5f5f5" roughness={1} />
|
|
||||||
</mesh>
|
|
||||||
</group>
|
|
||||||
|
|
||||||
{/* Left Wall */}
|
|
||||||
<mesh position={[-roomWidth / 2, roomHeight / 2, roomDepth / 2]} receiveShadow castShadow>
|
|
||||||
<boxGeometry args={[wallThickness, roomHeight, roomDepth]} />
|
|
||||||
<meshStandardMaterial color="#fafafa" roughness={1} />
|
|
||||||
</mesh>
|
</mesh>
|
||||||
|
|
||||||
{/* Right Wall */}
|
{/* Top section (above hole, full wall width) */}
|
||||||
<mesh position={[roomWidth / 2, roomHeight / 2, roomDepth / 2]} receiveShadow castShadow>
|
{topSectionHeight > 0.01 && (
|
||||||
<boxGeometry args={[wallThickness, roomHeight, roomDepth]} />
|
<mesh
|
||||||
<meshStandardMaterial color="#fafafa" roughness={1} />
|
position={[0, topSectionY, 0]}
|
||||||
|
castShadow
|
||||||
|
receiveShadow
|
||||||
|
>
|
||||||
|
<boxGeometry args={[holeWidth, topSectionHeight, wallThickness]} />
|
||||||
|
<WallMaterial />
|
||||||
|
</mesh>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* === REVEAL SURFACES (inside the hole) === */}
|
||||||
|
{/* These are the plaster/stucco edges visible inside the opening */}
|
||||||
|
|
||||||
|
{/* Left reveal */}
|
||||||
|
<mesh
|
||||||
|
position={[-halfHoleW + 0.001, holeHeight / 2, 0]}
|
||||||
|
castShadow
|
||||||
|
receiveShadow
|
||||||
|
>
|
||||||
|
<boxGeometry args={[0.002, holeHeight, wallThickness]} />
|
||||||
|
<RevealMaterial />
|
||||||
</mesh>
|
</mesh>
|
||||||
|
|
||||||
{/* Ceiling */}
|
{/* Right reveal */}
|
||||||
<mesh rotation={[-Math.PI / 2, 0, 0]} position={[0, roomHeight, roomDepth / 2]} receiveShadow>
|
<mesh
|
||||||
<planeGeometry args={[roomWidth, roomDepth]} />
|
position={[halfHoleW - 0.001, holeHeight / 2, 0]}
|
||||||
<meshStandardMaterial color="#ffffff" roughness={1} />
|
castShadow
|
||||||
|
receiveShadow
|
||||||
|
>
|
||||||
|
<boxGeometry args={[0.002, holeHeight, wallThickness]} />
|
||||||
|
<RevealMaterial />
|
||||||
</mesh>
|
</mesh>
|
||||||
|
|
||||||
{/* Decorative Elements - Baseboard Left */}
|
{/* Top reveal */}
|
||||||
<mesh position={[-roomWidth / 2 + wallThickness, 0.05, roomDepth / 2]} castShadow>
|
<mesh
|
||||||
<boxGeometry args={[wallThickness / 2, 0.1, roomDepth - wallThickness]} />
|
position={[0, holeHeight - 0.001, 0]}
|
||||||
<meshStandardMaterial color="#d0d0d0" roughness={0.8} />
|
castShadow
|
||||||
|
receiveShadow
|
||||||
|
>
|
||||||
|
<boxGeometry args={[holeWidth, 0.002, wallThickness]} />
|
||||||
|
<RevealMaterial />
|
||||||
</mesh>
|
</mesh>
|
||||||
|
|
||||||
{/* Decorative Elements - Baseboard Right */}
|
{/* === REVEAL DEPTH SURFACES (visible sides inside the opening) === */}
|
||||||
<mesh position={[roomWidth / 2 - wallThickness, 0.05, roomDepth / 2]} castShadow>
|
{/* Left inner wall (visible when looking at the opening from the side) */}
|
||||||
<boxGeometry args={[wallThickness / 2, 0.1, roomDepth - wallThickness]} />
|
<mesh
|
||||||
<meshStandardMaterial color="#d0d0d0" roughness={0.8} />
|
position={[-halfHoleW + gapPerSide / 2, holeHeight / 2, 0]}
|
||||||
|
receiveShadow
|
||||||
|
>
|
||||||
|
<boxGeometry args={[gapPerSide, holeHeight, wallThickness - 0.01]} />
|
||||||
|
<RevealMaterial />
|
||||||
|
</mesh>
|
||||||
|
|
||||||
|
{/* Right inner wall */}
|
||||||
|
<mesh
|
||||||
|
position={[halfHoleW - gapPerSide / 2, holeHeight / 2, 0]}
|
||||||
|
receiveShadow
|
||||||
|
>
|
||||||
|
<boxGeometry args={[gapPerSide, holeHeight, wallThickness - 0.01]} />
|
||||||
|
<RevealMaterial />
|
||||||
|
</mesh>
|
||||||
|
|
||||||
|
{/* Top inner wall (lintel reveal) */}
|
||||||
|
<mesh
|
||||||
|
position={[0, holeHeight - gapPerSide / 2, 0]}
|
||||||
|
receiveShadow
|
||||||
|
>
|
||||||
|
<boxGeometry args={[holeWidth - gapPerSide * 2, gapPerSide, wallThickness - 0.01]} />
|
||||||
|
<RevealMaterial />
|
||||||
|
</mesh>
|
||||||
|
|
||||||
|
{/* === FLOOR === */}
|
||||||
|
<mesh
|
||||||
|
rotation={[-Math.PI / 2, 0, 0]}
|
||||||
|
position={[0, 0, wallThickness]}
|
||||||
|
receiveShadow
|
||||||
|
>
|
||||||
|
<planeGeometry args={[wallWidth * 2, wallThickness * 8]} />
|
||||||
|
<FloorMaterial />
|
||||||
|
</mesh>
|
||||||
|
|
||||||
|
{/* Floor behind wall */}
|
||||||
|
<mesh
|
||||||
|
rotation={[-Math.PI / 2, 0, 0]}
|
||||||
|
position={[0, 0, -wallThickness]}
|
||||||
|
receiveShadow
|
||||||
|
>
|
||||||
|
<planeGeometry args={[wallWidth * 2, wallThickness * 8]} />
|
||||||
|
<FloorMaterial />
|
||||||
|
</mesh>
|
||||||
|
|
||||||
|
{/* === BASEBOARD (Plint) === */}
|
||||||
|
{/* Left side baseboard */}
|
||||||
|
<mesh
|
||||||
|
position={[leftSectionX, 0.04, halfWallT + 0.005]}
|
||||||
|
castShadow
|
||||||
|
>
|
||||||
|
<boxGeometry args={[leftSectionWidth, 0.08, 0.01]} />
|
||||||
|
<meshStandardMaterial color="#d5d0c8" roughness={0.8} />
|
||||||
|
</mesh>
|
||||||
|
|
||||||
|
{/* Right side baseboard */}
|
||||||
|
<mesh
|
||||||
|
position={[rightSectionX, 0.04, halfWallT + 0.005]}
|
||||||
|
castShadow
|
||||||
|
>
|
||||||
|
<boxGeometry args={[rightSectionWidth, 0.08, 0.01]} />
|
||||||
|
<meshStandardMaterial color="#d5d0c8" roughness={0.8} />
|
||||||
</mesh>
|
</mesh>
|
||||||
</group>
|
</group>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function DoorWithRoom() {
|
// ============================================
|
||||||
const { doorLeafWidth, height } = useConfiguratorStore();
|
// DOOR + WALL COMPOSITION
|
||||||
|
// ============================================
|
||||||
|
|
||||||
// Convert mm to meters for 3D scene
|
function DoorInWall() {
|
||||||
const doorWidth = doorLeafWidth / 1000;
|
const { doorType, doorLeafWidth, height, holeWidth } = useConfiguratorStore();
|
||||||
const doorHeight = height / 1000;
|
|
||||||
|
// Convert mm to meters
|
||||||
|
const doorWidthM = mmToMeters(doorLeafWidth);
|
||||||
|
const doorHeightM = mmToMeters(height);
|
||||||
|
const wallThicknessM = mmToMeters(WALL_THICKNESS);
|
||||||
|
|
||||||
|
// Sparingsmaat = the hole in the wall
|
||||||
|
// Use doorLeafWidth + stelruimte as the opening size
|
||||||
|
const stelruimteM = mmToMeters(STELRUIMTE);
|
||||||
|
const holeWidthM = doorWidthM + stelruimteM;
|
||||||
|
const holeHeightM = doorHeightM + stelruimteM / 2; // 5mm top tolerance
|
||||||
|
|
||||||
|
// Door Z position depends on type
|
||||||
|
// Taats: centered in wall thickness (pivot at center)
|
||||||
|
// Scharnier/Paneel: flush with front wall face
|
||||||
|
const doorZOffset = doorType === 'taats' ? 0 : wallThicknessM * 0.15;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<LivingRoom doorWidth={doorWidth} doorHeight={doorHeight} />
|
{/* The wall with precise opening */}
|
||||||
<Door3DEnhanced />
|
<WallContainer
|
||||||
|
holeWidth={holeWidthM}
|
||||||
|
holeHeight={holeHeightM}
|
||||||
|
wallThickness={wallThicknessM}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* The door, positioned inside the wall opening */}
|
||||||
|
<group position={[0, 0, doorZOffset]}>
|
||||||
|
<Door3DEnhanced />
|
||||||
|
</group>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// ============================================
|
||||||
|
// LIGHTING
|
||||||
|
// ============================================
|
||||||
|
|
||||||
function Lighting() {
|
function Lighting() {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
{/* Ambient for overall illumination */}
|
{/* Ambient for overall illumination */}
|
||||||
<ambientLight intensity={0.6} />
|
<ambientLight intensity={0.5} />
|
||||||
|
|
||||||
{/* Main directional light (sunlight from window) */}
|
{/* Main directional light (sunlight angle) */}
|
||||||
<directionalLight
|
<directionalLight
|
||||||
position={[5, 6, 8]}
|
position={[4, 6, 8]}
|
||||||
intensity={1.5}
|
intensity={1.4}
|
||||||
castShadow
|
castShadow
|
||||||
shadow-mapSize-width={4096}
|
shadow-mapSize-width={4096}
|
||||||
shadow-mapSize-height={4096}
|
shadow-mapSize-height={4096}
|
||||||
@@ -188,15 +280,28 @@ function Lighting() {
|
|||||||
shadow-bias={-0.0001}
|
shadow-bias={-0.0001}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
{/* Fill light from opposite side */}
|
{/* Fill light from behind/left to illuminate reveal */}
|
||||||
<directionalLight position={[-3, 3, 5]} intensity={0.4} />
|
<directionalLight position={[-3, 4, -4]} intensity={0.3} />
|
||||||
|
|
||||||
{/* Subtle top light */}
|
{/* Subtle light from viewer side to show depth in reveal */}
|
||||||
<directionalLight position={[0, 8, 2]} intensity={0.3} />
|
<directionalLight position={[2, 3, 6]} intensity={0.4} />
|
||||||
|
|
||||||
|
{/* Top down light for reveal shadows */}
|
||||||
|
<directionalLight
|
||||||
|
position={[0, 8, 0]}
|
||||||
|
intensity={0.2}
|
||||||
|
castShadow
|
||||||
|
shadow-mapSize-width={2048}
|
||||||
|
shadow-mapSize-height={2048}
|
||||||
|
/>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// ============================================
|
||||||
|
// MAIN SCENE EXPORT
|
||||||
|
// ============================================
|
||||||
|
|
||||||
export function Scene3D() {
|
export function Scene3D() {
|
||||||
return (
|
return (
|
||||||
<Canvas
|
<Canvas
|
||||||
@@ -207,44 +312,44 @@ export function Scene3D() {
|
|||||||
toneMappingExposure: 1.2,
|
toneMappingExposure: 1.2,
|
||||||
outputColorSpace: THREE.SRGBColorSpace,
|
outputColorSpace: THREE.SRGBColorSpace,
|
||||||
}}
|
}}
|
||||||
style={{ background: "#fafafa" }}
|
style={{ background: "#f0ede8" }}
|
||||||
>
|
>
|
||||||
{/* Camera - Zoomed out for room context */}
|
{/* Camera - positioned for wall view */}
|
||||||
<PerspectiveCamera makeDefault position={[0, 1.5, 5.5]} fov={50} />
|
<PerspectiveCamera makeDefault position={[0, 1.4, 4.5]} fov={45} />
|
||||||
|
|
||||||
{/* Camera Controls - More freedom for room viewing */}
|
{/* Camera Controls */}
|
||||||
<OrbitControls
|
<OrbitControls
|
||||||
enablePan={false}
|
enablePan={false}
|
||||||
enableZoom={true}
|
enableZoom={true}
|
||||||
minDistance={4}
|
minDistance={2.5}
|
||||||
maxDistance={8}
|
maxDistance={7}
|
||||||
minPolarAngle={Math.PI / 3}
|
minPolarAngle={Math.PI / 3}
|
||||||
maxPolarAngle={Math.PI / 2.1}
|
maxPolarAngle={Math.PI / 2.1}
|
||||||
maxAzimuthAngle={Math.PI / 4}
|
maxAzimuthAngle={Math.PI / 3}
|
||||||
minAzimuthAngle={-Math.PI / 4}
|
minAzimuthAngle={-Math.PI / 3}
|
||||||
target={[0, 1.2, 0]}
|
target={[0, 1.1, 0]}
|
||||||
enableDamping
|
enableDamping
|
||||||
dampingFactor={0.05}
|
dampingFactor={0.05}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
{/* Premium Studio Lighting */}
|
{/* Lighting */}
|
||||||
<Lighting />
|
<Lighting />
|
||||||
|
|
||||||
{/* Apartment Environment for warm, realistic steel reflections */}
|
{/* Apartment Environment for warm reflections */}
|
||||||
<Environment preset="apartment" blur={0.6} environmentIntensity={1.2} />
|
<Environment preset="apartment" blur={0.6} environmentIntensity={1.2} />
|
||||||
|
|
||||||
{/* High-Resolution Contact Shadows for grounding */}
|
{/* Contact shadows for floor grounding */}
|
||||||
<ContactShadows
|
<ContactShadows
|
||||||
position={[0, 0.01, 0]}
|
position={[0, 0.005, 0.15]}
|
||||||
opacity={0.6}
|
opacity={0.5}
|
||||||
scale={20}
|
scale={20}
|
||||||
blur={2.5}
|
blur={2.5}
|
||||||
far={4}
|
far={4}
|
||||||
resolution={2048}
|
resolution={2048}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
{/* The Door - Enhanced with textures and dimensions */}
|
{/* Door mounted inside wall */}
|
||||||
<DoorWithRoom />
|
<DoorInWall />
|
||||||
</Canvas>
|
</Canvas>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -39,6 +39,39 @@ export const RAIL_HEIGHT_ROBUST = 40; // mm - Standard robust rails (same as pro
|
|||||||
*/
|
*/
|
||||||
export const TAATS_PIVOT_OFFSET = 60; // mm - Pivot axis offset from wall for Taats doors
|
export const TAATS_PIVOT_OFFSET = 60; // mm - Pivot axis offset from wall for Taats doors
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Wall Mounting Dimensions (Sparingsmaat / Deurmaat)
|
||||||
|
* Dutch building standard: Sparingsmaat = rough wall opening
|
||||||
|
*/
|
||||||
|
export const STELRUIMTE = 10; // mm - Total tolerance between wall and frame (5mm per side)
|
||||||
|
export const HANGNAAD = 3; // mm - Gap between frame and door leaf per side
|
||||||
|
export const WALL_THICKNESS = 150; // mm - Standard interior wall thickness
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Calculate mounting dimensions from Sparingsmaat (wall opening).
|
||||||
|
*
|
||||||
|
* Sparingsmaat (input) -> Frame -> Door Leaf
|
||||||
|
* Frame = Sparingsmaat - STELRUIMTE (10mm tolerance)
|
||||||
|
* DoorLeaf = Frame - 2*PROFILE_WIDTH - 2*HANGNAAD (6mm gap)
|
||||||
|
*/
|
||||||
|
export function calculateMountingDimensions(sparingsmaatWidth: number, sparingsmaatHeight: number) {
|
||||||
|
const frameOuterWidth = sparingsmaatWidth - STELRUIMTE;
|
||||||
|
const frameOuterHeight = sparingsmaatHeight - STELRUIMTE / 2; // 5mm top tolerance only
|
||||||
|
const doorLeafWidth = frameOuterWidth - (2 * HANGNAAD);
|
||||||
|
const doorLeafHeight = frameOuterHeight - (2 * HANGNAAD);
|
||||||
|
|
||||||
|
return {
|
||||||
|
sparingsmaatWidth,
|
||||||
|
sparingsmaatHeight,
|
||||||
|
frameOuterWidth,
|
||||||
|
frameOuterHeight,
|
||||||
|
doorLeafWidth,
|
||||||
|
doorLeafHeight,
|
||||||
|
stelruimtePerSide: STELRUIMTE / 2, // 5mm gap visible on each side
|
||||||
|
hangnaadPerSide: HANGNAAD, // 3mm gap between frame and leaf
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
// ============================================
|
// ============================================
|
||||||
// PHYSICAL PART TYPES
|
// PHYSICAL PART TYPES
|
||||||
// ============================================
|
// ============================================
|
||||||
|
|||||||
Reference in New Issue
Block a user