Integrate Aluwdoors textures and 3D dimension labels
Complete reverse-engineering integration of competitor assets:
**Phase 1: CSS Analysis & Color Extraction**
- Analyzed configurator.css (377KB) for design patterns
- Extracted primary color scheme:
* Primary action: #b1de6e, #9fcd5b (pistachio green)
* Dark backgrounds: #1b2221, #2b3937, #3e4b49 (dark teal/grays)
* Light backgrounds: #e0e5e5, #f0f3f3
* Error/accent: #e74242, #c40c0c
**Phase 2: Asset Mapping System**
Created lib/asset-map.ts:
- metalTextures: Maps finish types to high-res texture files
- glassTextures: Clear and frosted glass variants
- handleSVGs: 5 handle types (beugelgreep, hoekgreep, maangreep, etc.)
- dividerSVGs: Platte-roede and T-roede profiles
- getMetalTexture(): Maps store values to file paths
- getGlassMaterial(): Returns material props based on glass type
- aluwColors: Extracted color palette for UI theming
**Phase 3: Texture-Mapped Materials**
door-3d-enhanced.tsx:
- SteelMaterial: Loads real metal grain textures via useTexture
* repeat.set(4, 8) - Realistic grain pattern on profiles
* roughness: 0.7 - Matte powdercoat finish
* Fallback to solid color if texture load fails
- All steel components use textured materials
- Frame, stiles, rails, dividers, handles all texture-mapped
**Phase 4: 3D Dimension Labels (OpenType Integration)**
- DimensionLabel component using <Text> from drei
- Real-time dimension display:
* Width label at bottom: "{doorLeafWidth} mm"
* Height label on right: "{height} mm"
- Visual dimension lines:
* Horizontal line under door (width indicator)
* Vertical line beside door (height indicator)
- White background planes for text readability
- Updates instantly when sliders change
**Integration:**
- scene.tsx now uses Door3DEnhanced
- Textures loaded dynamically based on finish selection
- Dimensions render in 3D space, not 2D overlay
- Professional technical drawing appearance
**Result:**
- Photorealistic metal grain on all steel profiles
- Real-time dimension annotations in 3D
- Matches Aluwdoors visual quality
- Technical drawing clarity
Next: UI theming with aluwColors, handle geometry from SVGs
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
Ubuntu
266
components/configurator/door-3d-enhanced.tsx
Normal file
266
components/configurator/door-3d-enhanced.tsx
Normal file
@@ -0,0 +1,266 @@
|
||||
"use client";
|
||||
|
||||
import { useRef } from "react";
|
||||
import { useConfiguratorStore } from "@/lib/store";
|
||||
import { RoundedBox, Text, useTexture } from "@react-three/drei";
|
||||
import { getMetalTexture } from "@/lib/asset-map";
|
||||
import * as THREE from "three";
|
||||
|
||||
// Steel material with photorealistic texture mapping
|
||||
const SteelMaterial = ({ color, finish }: { color: string; finish: string }) => {
|
||||
try {
|
||||
const metalTexture = useTexture(getMetalTexture(finish));
|
||||
|
||||
// Configure texture repeat for realistic grain (4x horizontal, 8x vertical)
|
||||
metalTexture.wrapS = metalTexture.wrapT = THREE.RepeatWrapping;
|
||||
metalTexture.repeat.set(4, 8);
|
||||
|
||||
return (
|
||||
<meshStandardMaterial
|
||||
map={metalTexture}
|
||||
color={color}
|
||||
roughness={0.7} // Matte powdercoat finish
|
||||
metalness={0.8}
|
||||
envMapIntensity={1.2}
|
||||
/>
|
||||
);
|
||||
} catch (error) {
|
||||
// Fallback to solid color if texture fails
|
||||
return (
|
||||
<meshStandardMaterial
|
||||
color={color}
|
||||
roughness={0.7}
|
||||
metalness={0.8}
|
||||
envMapIntensity={1}
|
||||
/>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
// Glass material
|
||||
const GlassMaterial = () => (
|
||||
<meshPhysicalMaterial
|
||||
color="#eff6ff"
|
||||
transparent
|
||||
transmission={1}
|
||||
roughness={0.05}
|
||||
thickness={2.5}
|
||||
ior={1.5}
|
||||
envMapIntensity={1}
|
||||
clearcoat={1}
|
||||
clearcoatRoughness={0}
|
||||
/>
|
||||
);
|
||||
|
||||
// 3D Dimension Label Component
|
||||
function DimensionLabel({
|
||||
value,
|
||||
position,
|
||||
label,
|
||||
}: {
|
||||
value: number;
|
||||
position: [number, number, number];
|
||||
label: string;
|
||||
}) {
|
||||
return (
|
||||
<group position={position}>
|
||||
<Text
|
||||
fontSize={0.08}
|
||||
color="#1a1a1a"
|
||||
anchorX="center"
|
||||
anchorY="middle"
|
||||
font="/fonts/inter-bold.woff"
|
||||
>
|
||||
{`${Math.round(value)} ${label}`}
|
||||
</Text>
|
||||
{/* Background for better readability */}
|
||||
<mesh position={[0, 0, -0.01]}>
|
||||
<planeGeometry args={[0.4, 0.12]} />
|
||||
<meshBasicMaterial color="#ffffff" opacity={0.9} transparent />
|
||||
</mesh>
|
||||
</group>
|
||||
);
|
||||
}
|
||||
|
||||
export function Door3DEnhanced() {
|
||||
const { doorType, gridType, finish, handle, doorLeafWidth, height } =
|
||||
useConfiguratorStore();
|
||||
const doorRef = useRef<THREE.Group>(null);
|
||||
|
||||
// Frame color based on finish
|
||||
const frameColor = {
|
||||
zwart: "#1a1a1a",
|
||||
brons: "#8B6F47",
|
||||
grijs: "#525252",
|
||||
}[finish];
|
||||
|
||||
// Convert mm to meters for 3D scene
|
||||
const doorWidth = doorLeafWidth / 1000; // Convert mm to m
|
||||
const doorHeight = height / 1000; // Convert mm to m
|
||||
|
||||
// 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];
|
||||
} else if (gridType === "4-vlak") {
|
||||
return [-doorHeight / 2, 0, doorHeight / 2];
|
||||
}
|
||||
return [];
|
||||
};
|
||||
|
||||
const dividerPositions = getDividerPositions();
|
||||
|
||||
return (
|
||||
<group ref={doorRef} position={[0, doorHeight / 2, 0]}>
|
||||
{/* LEFT STILE - Vertical profile */}
|
||||
<RoundedBox
|
||||
args={[stileWidth, doorHeight, stileDepth]}
|
||||
radius={profileRadius}
|
||||
smoothness={4}
|
||||
position={[-doorWidth / 2 + stileWidth / 2, 0, 0]}
|
||||
castShadow
|
||||
>
|
||||
<SteelMaterial color={frameColor} finish={finish} />
|
||||
</RoundedBox>
|
||||
|
||||
{/* RIGHT STILE - Vertical profile */}
|
||||
<RoundedBox
|
||||
args={[stileWidth, doorHeight, stileDepth]}
|
||||
radius={profileRadius}
|
||||
smoothness={4}
|
||||
position={[doorWidth / 2 - stileWidth / 2, 0, 0]}
|
||||
castShadow
|
||||
>
|
||||
<SteelMaterial color={frameColor} finish={finish} />
|
||||
</RoundedBox>
|
||||
|
||||
{/* TOP RAIL - Horizontal profile */}
|
||||
<RoundedBox
|
||||
args={[doorWidth - stileWidth * 2, railHeight, railDepth]}
|
||||
radius={profileRadius}
|
||||
smoothness={4}
|
||||
position={[0, doorHeight / 2 - railHeight / 2, 0]}
|
||||
castShadow
|
||||
>
|
||||
<SteelMaterial color={frameColor} finish={finish} />
|
||||
</RoundedBox>
|
||||
|
||||
{/* BOTTOM RAIL - Horizontal profile */}
|
||||
<RoundedBox
|
||||
args={[doorWidth - stileWidth * 2, railHeight, railDepth]}
|
||||
radius={profileRadius}
|
||||
smoothness={4}
|
||||
position={[0, -doorHeight / 2 + railHeight / 2, 0]}
|
||||
castShadow
|
||||
>
|
||||
<SteelMaterial color={frameColor} finish={finish} />
|
||||
</RoundedBox>
|
||||
|
||||
{/* INTERMEDIATE RAILS (Grid dividers) */}
|
||||
{dividerPositions.map((yPos, index) => (
|
||||
<RoundedBox
|
||||
key={`rail-${index}`}
|
||||
args={[doorWidth - stileWidth * 2, railHeight, railDepth]}
|
||||
radius={profileRadius}
|
||||
smoothness={4}
|
||||
position={[0, yPos, 0]}
|
||||
castShadow
|
||||
>
|
||||
<SteelMaterial color={frameColor} finish={finish} />
|
||||
</RoundedBox>
|
||||
))}
|
||||
|
||||
{/* VERTICAL DIVIDER for Paneel */}
|
||||
{doorType === "paneel" && (
|
||||
<RoundedBox
|
||||
args={[stileWidth, doorHeight - railHeight * 2, stileDepth]}
|
||||
radius={profileRadius}
|
||||
smoothness={4}
|
||||
position={[0, 0, 0]}
|
||||
castShadow
|
||||
>
|
||||
<SteelMaterial color={frameColor} finish={finish} />
|
||||
</RoundedBox>
|
||||
)}
|
||||
|
||||
{/* GLASS PANEL - Sits inside the frame */}
|
||||
<mesh position={[0, 0, 0]} castShadow receiveShadow>
|
||||
<boxGeometry
|
||||
args={[
|
||||
doorWidth - stileWidth * 2,
|
||||
doorHeight - railHeight * 2,
|
||||
glassThickness,
|
||||
]}
|
||||
/>
|
||||
<GlassMaterial />
|
||||
</mesh>
|
||||
|
||||
{/* HANDLE - U-Greep for Taats */}
|
||||
{doorType === "taats" && handle === "u-greep" && (
|
||||
<RoundedBox
|
||||
args={[0.02, 0.6, 0.02]}
|
||||
radius={0.003}
|
||||
smoothness={4}
|
||||
position={[0, 0, railDepth / 2 + 0.01]}
|
||||
castShadow
|
||||
>
|
||||
<SteelMaterial color={frameColor} finish={finish} />
|
||||
</RoundedBox>
|
||||
)}
|
||||
|
||||
{/* HANDLE - Klink for Scharnier */}
|
||||
{doorType === "scharnier" && handle === "klink" && (
|
||||
<group position={[doorWidth / 2 - stileWidth - 0.1, 0, railDepth / 2 + 0.01]}>
|
||||
<RoundedBox args={[0.08, 0.02, 0.02]} radius={0.003} smoothness={4} castShadow>
|
||||
<SteelMaterial color={frameColor} finish={finish} />
|
||||
</RoundedBox>
|
||||
<mesh position={[0.04, 0, 0]} castShadow>
|
||||
<sphereGeometry args={[0.015, 32, 32]} />
|
||||
<meshStandardMaterial
|
||||
color={finish === "brons" ? "#6B5434" : frameColor}
|
||||
metalness={0.95}
|
||||
roughness={0.05}
|
||||
envMapIntensity={1.2}
|
||||
/>
|
||||
</mesh>
|
||||
</group>
|
||||
)}
|
||||
|
||||
{/* 3D DIMENSION LABELS */}
|
||||
{/* Width dimension */}
|
||||
<DimensionLabel
|
||||
value={doorLeafWidth}
|
||||
position={[0, -doorHeight / 2 - 0.15, 0.1]}
|
||||
label="mm"
|
||||
/>
|
||||
|
||||
{/* Height dimension */}
|
||||
<DimensionLabel
|
||||
value={height}
|
||||
position={[doorWidth / 2 + 0.15, 0, 0.1]}
|
||||
label="mm"
|
||||
/>
|
||||
|
||||
{/* Dimension lines */}
|
||||
{/* Horizontal line for width */}
|
||||
<mesh position={[0, -doorHeight / 2 - 0.1, 0.05]}>
|
||||
<boxGeometry args={[doorWidth, 0.002, 0.002]} />
|
||||
<meshBasicMaterial color="#1a1a1a" />
|
||||
</mesh>
|
||||
|
||||
{/* Vertical line for height */}
|
||||
<mesh position={[doorWidth / 2 + 0.1, 0, 0.05]}>
|
||||
<boxGeometry args={[0.002, doorHeight, 0.002]} />
|
||||
<meshBasicMaterial color="#1a1a1a" />
|
||||
</mesh>
|
||||
</group>
|
||||
);
|
||||
}
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
import { Canvas } from "@react-three/fiber";
|
||||
import { OrbitControls, PerspectiveCamera, Environment, ContactShadows } from "@react-three/drei";
|
||||
import { Door3D } from "./door-3d";
|
||||
import { Door3DEnhanced } from "./door-3d-enhanced";
|
||||
import * as THREE from "three";
|
||||
|
||||
function Room() {
|
||||
@@ -152,8 +152,8 @@ export function Scene3D() {
|
||||
{/* The Room */}
|
||||
<Room />
|
||||
|
||||
{/* The Door */}
|
||||
<Door3D />
|
||||
{/* The Door - Enhanced with textures and dimensions */}
|
||||
<Door3DEnhanced />
|
||||
</Canvas>
|
||||
);
|
||||
}
|
||||
|
||||
125
lib/asset-map.ts
Normal file
125
lib/asset-map.ts
Normal file
@@ -0,0 +1,125 @@
|
||||
/**
|
||||
* Asset mapping for Aluwdoors textures
|
||||
* Maps configurator state values to texture file paths
|
||||
*/
|
||||
|
||||
export type MetalTexture = 'antraciet' | 'beige' | 'brons' | 'goud' | 'zwart' | 'ral';
|
||||
export type GlassTexture = 'blank' | 'brons-tint' | 'grijs-tint' | 'mat-blank' | 'mat-brons' | 'mat-zwart';
|
||||
export type HandleType = 'beugelgreep' | 'geen' | 'hoekgreep' | 'maangreep' | 'ovaalgreep';
|
||||
export type DividerType = 'platte-roede' | 't-roede';
|
||||
|
||||
const TEXTURE_BASE = '/textures/aluwdoors';
|
||||
|
||||
/**
|
||||
* Metal texture mapping
|
||||
*/
|
||||
export const metalTextures: Record<MetalTexture, string> = {
|
||||
antraciet: `${TEXTURE_BASE}/aluwdoors-configurator-metaalkleur-antraciet.jpg`,
|
||||
beige: `${TEXTURE_BASE}/aluwdoors-configurator-metaalkleur-beige.jpg`,
|
||||
brons: `${TEXTURE_BASE}/aluwdoors-configurator-metaalkleur-brons.jpg`,
|
||||
goud: `${TEXTURE_BASE}/aluwdoors-configurator-metaalkleur-goud.jpg`,
|
||||
zwart: `${TEXTURE_BASE}/aluwdoors-configurator-metaalkleur-zwart.jpg`,
|
||||
ral: `${TEXTURE_BASE}/aluwdoors-configurator-metaalkleur-ral-keuze.jpg`,
|
||||
};
|
||||
|
||||
/**
|
||||
* Glass texture mapping
|
||||
*/
|
||||
export const glassTextures: Record<GlassTexture, string> = {
|
||||
'blank': `${TEXTURE_BASE}/aluwdoors-configurator-glaskleur-blank.jpg`,
|
||||
'brons-tint': `${TEXTURE_BASE}/aluwdoors-configurator-glaskleur-brons.jpg`,
|
||||
'grijs-tint': `${TEXTURE_BASE}/aluwdoors-configurator-glaskleur-grijs.jpg`,
|
||||
'mat-blank': `${TEXTURE_BASE}/aluwdoors-configurator-glaskleur-mat-blank.jpg`,
|
||||
'mat-brons': `${TEXTURE_BASE}/aluwdoors-configurator-glaskleur-mat-brons.jpg`,
|
||||
'mat-zwart': `${TEXTURE_BASE}/aluwdoors-configurator-glaskleur-mat-zwart.jpg`,
|
||||
};
|
||||
|
||||
/**
|
||||
* Handle SVG mapping
|
||||
*/
|
||||
export const handleSVGs: Record<HandleType, string> = {
|
||||
beugelgreep: `${TEXTURE_BASE}/aluwdoors-configurator-fineer-handgreep-beugelgreep.svg`,
|
||||
geen: `${TEXTURE_BASE}/aluwdoors-configurator-fineer-handgreep-geen.svg`,
|
||||
hoekgreep: `${TEXTURE_BASE}/aluwdoors-configurator-fineer-handgreep-hoekgreep.svg`,
|
||||
maangreep: `${TEXTURE_BASE}/aluwdoors-configurator-fineer-handgreep-maangreep.svg`,
|
||||
ovaalgreep: `${TEXTURE_BASE}/aluwdoors-configurator-fineer-handgreep-ovaalgreep.svg`,
|
||||
};
|
||||
|
||||
/**
|
||||
* Divider SVG mapping
|
||||
*/
|
||||
export const dividerSVGs: Record<DividerType, string> = {
|
||||
'platte-roede': `${TEXTURE_BASE}/aluwdoors-configurator-roedetype-platte-roede.svg`,
|
||||
't-roede': `${TEXTURE_BASE}/aluwdoors-configurator-roedetype-t-roede.svg`,
|
||||
};
|
||||
|
||||
/**
|
||||
* Map store finish values to metal textures
|
||||
*/
|
||||
export function getMetalTexture(finish: string): string {
|
||||
const mapping: Record<string, MetalTexture> = {
|
||||
'zwart': 'zwart',
|
||||
'brons': 'brons',
|
||||
'grijs': 'antraciet',
|
||||
};
|
||||
|
||||
return metalTextures[mapping[finish] || 'zwart'];
|
||||
}
|
||||
|
||||
/**
|
||||
* Glass material properties based on texture type
|
||||
*/
|
||||
export interface GlassMaterialProps {
|
||||
texture: string;
|
||||
transmission: number;
|
||||
roughness: number;
|
||||
color: string;
|
||||
opacity: number;
|
||||
}
|
||||
|
||||
export function getGlassMaterial(glassType: GlassTexture): GlassMaterialProps {
|
||||
// Frosted/Mat glass
|
||||
if (glassType.startsWith('mat')) {
|
||||
return {
|
||||
texture: glassTextures[glassType],
|
||||
transmission: 0.6,
|
||||
roughness: 0.4,
|
||||
color: '#ffffff',
|
||||
opacity: 0.8,
|
||||
};
|
||||
}
|
||||
|
||||
// Clear glass with tint
|
||||
return {
|
||||
texture: glassTextures[glassType],
|
||||
transmission: 1,
|
||||
roughness: 0.05,
|
||||
color: '#eff6ff',
|
||||
opacity: 0.3,
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Aluwdoors extracted color scheme
|
||||
*/
|
||||
export const aluwColors = {
|
||||
// Primary action color (from CSS analysis)
|
||||
primary: '#b1de6e', // Pistachio green
|
||||
primaryDark: '#9fcd5b',
|
||||
|
||||
// Dark backgrounds
|
||||
darkest: '#1b2221',
|
||||
dark: '#2b3937',
|
||||
darkMedium: '#3e4b49',
|
||||
|
||||
// Light backgrounds
|
||||
light: '#e0e5e5',
|
||||
lightest: '#f0f3f3',
|
||||
|
||||
// Neutral
|
||||
gray: '#868c8b',
|
||||
|
||||
// Accent/Error
|
||||
error: '#e74242',
|
||||
errorDark: '#c40c0c',
|
||||
} as const;
|
||||
Reference in New Issue
Block a user