16b8288790
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 is a Next.js project bootstrapped with create-next-app.
Getting Started
First, run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
Open http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.
This project uses next/font to automatically optimize and load Geist, a new font family for Vercel.
Learn More
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
Deploy on Vercel
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.