Ubuntu
0de3893b30
Improve 3D view to match reference drawings
...
Based on reference images in afbeeldingen/modellen/:
- dt9.png, dt10.png, door_type_4.jpg, samenstelling_beide.png
Changes for technical drawing aesthetic:
**Camera Improvements:**
- Position: [0, 1.2, 3.5] - More frontal, less perspective
- FOV: 35° (was 45°) - Less distortion
- Limited rotation: ±15° azimuth, near-horizontal polar
- Damping enabled for smooth movement
- Result: Flatter, more schematic view
**Profile Thickness (Match Reference Lines):**
- Stiles: 60mm (was 40mm) - Thicker vertical frames
- Rails: 40mm (was 20mm) - Thicker horizontal frames
- Depth: 60mm uniform - More prominent profiles
- Radius: 2mm (was 1mm) - Slightly more visible edges
- Result: Bold, visible frame lines like references
**Lighting (High Contrast):**
- Ambient: 0.8 (was 0.5) - Brighter overall
- Front key light: Straight on from [0,5,10]
- Intensity: 2.0 - Strong, even illumination
- Subtle side lights for minimal depth
- Result: Flat, technical drawing appearance
**Glass Material (White/Opaque):**
- Color: #f8f9fa (bright white)
- Transmission: 0.3 (was 1.0) - Much less transparent
- Opacity: 0.95 - Nearly opaque
- Result: White glass areas like reference drawings
**Visual Result:**
- Clear black frame lines on white glass
- Frontal view with minimal perspective
- Technical drawing aesthetic
- Matches dt9.png, door_type_4.jpg style
- User can see door design clearly
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com >
2026-02-10 17:22:10 +00:00
Ubuntu
16b8288790
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 >
2026-02-10 17:07:13 +00:00
