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>
16b8288790