youztech/stalendeuren
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
14 Commits 1 Branch 0 Tags
0de3893b300782e15080da8c73c9e6d0ccbeee35
Commit Graph

5 Commits

Author SHA1 Message Date
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
Ubuntu
2f0d6619fa Rebuild door with procedural construction and premium materials 
Complete architectural overhaul from solid blocks to manufactured product:

**Procedural Construction (The Welder's Approach):**

Components:
- LEFT/RIGHT STILES: 40x40mm vertical profiles with 1mm rounded corners
- TOP/BOTTOM RAILS: 20x40mm horizontal profiles with 1mm rounded corners
- INTERMEDIATE RAILS: Dynamic based on gridType (3-vlak/4-vlak)
- GLASS PANEL: 8mm thick, sits inside frame cavity
- VERTICAL DIVIDER: For paneel type (40x40mm)
- HANDLES: U-greep (20x600x20mm) or Klink (80x20x20mm + sphere)

Using RoundedBox from @react-three/drei:
- All steel parts have 1mm radius rounded edges
- Catches light realistically like real steel
- Smoothness=4 for quality curves

Assembly Logic:
- Stiles positioned at ±(doorWidth/2 - stileWidth/2)
- Rails positioned at ±(doorHeight/2 - railHeight/2)
- Glass inset inside frame (doorWidth - stileWidth*2)
- No overlapping geometry - clean construction

**Premium Materials:**

Steel Material:
- color: #1a1a1a (off-black, never pure black)
- roughness: 0.25 (satin finish, slightly reflective)
- metalness: 0.8 (clearly metallic)
- envMapIntensity: 1 (reflects environment)

Glass Material (MeshPhysicalMaterial):
- transmission: 1 (full transparency)
- roughness: 0.05 (almost perfectly smooth)
- thickness: 2.5 (proper light refraction)
- ior: 1.5 (index of refraction for glass)
- color: #eff6ff (subtle blue tint)
- clearcoat: 1 (surface reflections)

**Enhanced Environment:**

Lighting:
- Changed preset from "studio" to "city"
- environmentIntensity: 0.8 (stronger reflections)
- Metal profiles now reflect surroundings realistically

Contact Shadows:
- resolution: 1024 (high quality)
- opacity: 0.5, scale: 10, blur: 2
- Proper grounding effect

**Result:**
- Door looks like manufactured steel product, not a solid block
- Rounded edges catch light realistically
- Steel reflects environment (city buildings, sky)
- Glass has proper refraction and transmission
- Shadows ground the door properly
- Each component is individually constructed and lit

Visual Quality: Studio-grade photorealism

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
 2026-02-10 16:54:20 +00:00
Ubuntu
1a65bcbd5a Upgrade to premium studio-quality 3D rendering 
Material Upgrades:
- Glass: MeshPhysicalMaterial with transmission=1, thickness=2, clearcoat
  - Color: Subtle blue tint (#eef6fc)
  - Settings: roughness=0, envMapIntensity=1 for realistic transparency
- Steel: MeshStandardMaterial with metalness=0.9, roughness=0.2
  - Satin finish, not matte
  - Color: Deep charcoal (#1a1a1a)
- Walls: Clean off-white plaster (#fafafa, roughness=1)

Geometry Refinements:
- Slim steel profiles: 3cm (was 8cm) for modern industrial look
- Frame depth: 5cm for proper dimensionality
- Handles: Refined proportions, higher poly sphere (32 segments)
- Glass thickness: 1.5cm (realistic heavy glass)
- Dividers: Positioned slightly forward (z=0.01) flush with glass

Architecture Improvements:
- Proper doorway with reveal (15cm thick wall)
- Fitted pillars (left/right) and lintel (top)
- Door sits INSIDE the reveal for depth and shadows
- Clean white floor as shadow catcher

Premium Lighting:
- Environment preset="studio" for realistic reflections on steel
- ContactShadows for "anti-gravity" floating effect
- Key light (5,10,8) with 4K shadow maps
- Rim light for separation
- Fill light for softness
- Tone mapping exposure: 1.3

Camera Refinements:
- FOV: 45° (was 50°) for less distortion
- Position: (0, 1.6, 4.5) - better viewing angle
- Limited azimuth rotation (±30°) for controlled perspective
- Min polar: PI/3.5 (was PI/4) for better elevation

Result: Cold metallic steel + heavy transparent glass + studio lighting
        = Premium "Anti-Gravity" photorealistic look

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
 2026-02-10 16:38:23 +00:00
Ubuntu
065451988c Migrate to full 3D visualizer with React Three Fiber 
Complete architectural overhaul from CSS to WebGL 3D rendering:

**Dependencies Added:**
- three, @types/three
- @react-three/fiber (R3F)
- @react-three/drei (helpers)

**New Components:**

1. components/configurator/scene.tsx
   - Canvas with shadows and tone mapping
   - PerspectiveCamera with OrbitControls
   - Lighting: Ambient + Directional + Spot + Environment
   - 3D Room: Floor (wood texture) + Walls with doorway opening
   - Limited camera rotation (minPolarAngle/maxPolarAngle)

2. components/configurator/door-3d.tsx
   - Door constructed from 3D mesh primitives (BoxGeometry)
   - Frame: Metal material (metalness 0.7, roughness 0.3)
   - Glass: PhysicalMaterial with transmission for realistic glass
   - Dynamic grid dividers based on gridType
   - Handles: 3D U-greep (vertical bar) or Klink (horizontal + sphere)
   - All meshes cast shadows

3. components/configurator/door-visualizer.tsx
   - Integrated Scene3D with Suspense
   - Loading fallback with spinner
   - Control hints for user interaction
   - Badge changed to "3D Voorbeeld"

**Features:**
- True depth and perspective
- Realistic shadows on floor and walls
- Reflective glass material
- Interactive camera (drag to rotate, scroll to zoom)
- Door appears IN the doorway, not floating
- Apartment environment preset for reflections
- Real-time updates from Zustand store

**Result:** Photorealistic 3D room with proper lighting, shadows, and materials

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
 2026-02-10 16:30:52 +00:00