youztech/stalendeuren
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Upgrade to premium studio-quality 3D rendering

Browse Source 
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>
This commit is contained in:
Ubuntu
2026-02-10 16:38:23 +00:00
parent 065451988c
commit 1a65bcbd5a
2 changed files with 119 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
components/configurator/door-3d.tsx
View File

@@ -10,16 +10,17 @@ export function Door3D() {
// Frame color based on finish // Frame color based on finish
const frameColor = { const frameColor = {
zwart: "#1f1f1f", zwart: "#1a1a1a",
brons: "#8B6F47", brons: "#8B6F47",
grijs: "#525252", grijs: "#525252",
}[finish]; }[finish];
// Door dimensions // Door dimensions (more realistic proportions)
const doorWidth = doorType === "paneel" ? 1.5 : 1.2; const doorWidth = doorType === "paneel" ? 1.5 : 1.2;
const doorHeight = 2.4; const doorHeight = 2.4;
const frameThickness = 0.08; const frameThickness = 0.03; // Slim steel profile (3cm)
const glassThickness = 0.02; const frameDepth = 0.05; // Depth of frame
const glassThickness = 0.015; // Realistic glass thickness
// Calculate grid divider positions // Calculate grid divider positions
const getDividerPositions = () => { const getDividerPositions = () => {
@@ -37,79 +38,80 @@ export function Door3D() {
<group ref={doorRef} position={[0, doorHeight / 2, 0]}> <group ref={doorRef} position={[0, doorHeight / 2, 0]}>
{/* Outer Frame - Top */} {/* Outer Frame - Top */}
<mesh position={[0, doorHeight / 2, 0]} castShadow> <mesh position={[0, doorHeight / 2, 0]} castShadow>
<boxGeometry args={[doorWidth + frameThickness * 2, frameThickness, frameThickness]} /> <boxGeometry args={[doorWidth + frameThickness * 2, frameThickness, frameDepth]} />
<meshStandardMaterial color={frameColor} metalness={0.7} roughness={0.3} /> <meshStandardMaterial color={frameColor} metalness={0.9} roughness={0.2} />
</mesh> </mesh>
{/* Outer Frame - Bottom */} {/* Outer Frame - Bottom */}
<mesh position={[0, -doorHeight / 2, 0]} castShadow> <mesh position={[0, -doorHeight / 2, 0]} castShadow>
<boxGeometry args={[doorWidth + frameThickness * 2, frameThickness, frameThickness]} /> <boxGeometry args={[doorWidth + frameThickness * 2, frameThickness, frameDepth]} />
<meshStandardMaterial color={frameColor} metalness={0.7} roughness={0.3} /> <meshStandardMaterial color={frameColor} metalness={0.9} roughness={0.2} />
</mesh> </mesh>
{/* Outer Frame - Left */} {/* Outer Frame - Left */}
<mesh position={[-doorWidth / 2 - frameThickness / 2, 0, 0]} castShadow> <mesh position={[-doorWidth / 2 - frameThickness / 2, 0, 0]} castShadow>
<boxGeometry args={[frameThickness, doorHeight + frameThickness * 2, frameThickness]} /> <boxGeometry args={[frameThickness, doorHeight + frameThickness * 2, frameDepth]} />
<meshStandardMaterial color={frameColor} metalness={0.7} roughness={0.3} /> <meshStandardMaterial color={frameColor} metalness={0.9} roughness={0.2} />
</mesh> </mesh>
{/* Outer Frame - Right */} {/* Outer Frame - Right */}
<mesh position={[doorWidth / 2 + frameThickness / 2, 0, 0]} castShadow> <mesh position={[doorWidth / 2 + frameThickness / 2, 0, 0]} castShadow>
<boxGeometry args={[frameThickness, doorHeight + frameThickness * 2, frameThickness]} /> <boxGeometry args={[frameThickness, doorHeight + frameThickness * 2, frameDepth]} />
<meshStandardMaterial color={frameColor} metalness={0.7} roughness={0.3} /> <meshStandardMaterial color={frameColor} metalness={0.9} roughness={0.2} />
</mesh> </mesh>
{/* Glass Panel */} {/* Glass Panel - Premium Physical Material */}
<mesh position={[0, 0, 0]} castShadow receiveShadow> <mesh position={[0, 0, 0]} castShadow receiveShadow>
<boxGeometry args={[doorWidth, doorHeight, glassThickness]} /> <boxGeometry args={[doorWidth, doorHeight, glassThickness]} />
<meshPhysicalMaterial <meshPhysicalMaterial
color="#87CEEB" color="#eef6fc"
transparent transparent
opacity={0.3} transmission={1}
roughness={0.1} roughness={0}
metalness={0.1} thickness={2}
transmission={0.9} envMapIntensity={1}
thickness={0.5} clearcoat={1}
clearcoatRoughness={0}
/> />
</mesh> </mesh>
{/* Horizontal Dividers (Grid) */} {/* Horizontal Dividers (Grid) - Slim profiles */}
{dividerPositions.map((yPos, index) => ( {dividerPositions.map((yPos, index) => (
<mesh key={`divider-${index}`} position={[0, yPos, 0]} castShadow> <mesh key={`divider-${index}`} position={[0, yPos, 0.01]} castShadow>
<boxGeometry args={[doorWidth, frameThickness, frameThickness]} /> <boxGeometry args={[doorWidth, frameThickness, frameDepth]} />
<meshStandardMaterial color={frameColor} metalness={0.7} roughness={0.3} /> <meshStandardMaterial color={frameColor} metalness={0.9} roughness={0.2} />
</mesh> </mesh>
))} ))}
{/* Vertical Divider for Paneel */} {/* Vertical Divider for Paneel */}
{doorType === "paneel" && ( {doorType === "paneel" && (
<mesh position={[0, 0, 0]} castShadow> <mesh position={[0, 0, 0.01]} castShadow>
<boxGeometry args={[frameThickness, doorHeight, frameThickness]} /> <boxGeometry args={[frameThickness, doorHeight, frameDepth]} />
<meshStandardMaterial color={frameColor} metalness={0.7} roughness={0.3} /> <meshStandardMaterial color={frameColor} metalness={0.9} roughness={0.2} />
</mesh> </mesh>
)} )}
{/* Handle - U-Greep for Taats */} {/* Handle - U-Greep for Taats */}
{doorType === "taats" && handle === "u-greep" && ( {doorType === "taats" && handle === "u-greep" && (
<mesh position={[0, 0, frameThickness]} castShadow> <mesh position={[0, 0, frameDepth + 0.01]} castShadow>
<boxGeometry args={[0.03, 0.6, 0.03]} /> <boxGeometry args={[0.025, 0.6, 0.025]} />
<meshStandardMaterial color={frameColor} metalness={0.8} roughness={0.2} /> <meshStandardMaterial color={frameColor} metalness={0.9} roughness={0.15} />
</mesh> </mesh>
)} )}
{/* Handle - Klink for Scharnier */} {/* Handle - Klink for Scharnier */}
{doorType === "scharnier" && handle === "klink" && ( {doorType === "scharnier" && handle === "klink" && (
<group position={[doorWidth / 2 - 0.15, 0, frameThickness]}> <group position={[doorWidth / 2 - 0.12, 0, frameDepth + 0.01]}>
<mesh castShadow> <mesh castShadow>
<boxGeometry args={[0.12, 0.03, 0.03]} /> <boxGeometry args={[0.1, 0.025, 0.025]} />
<meshStandardMaterial color={frameColor} metalness={0.8} roughness={0.2} /> <meshStandardMaterial color={frameColor} metalness={0.9} roughness={0.15} />
</mesh> </mesh>
<mesh position={[0.06, 0, 0]} castShadow> <mesh position={[0.05, 0, 0]} castShadow>
<sphereGeometry args={[0.025, 16, 16]} /> <sphereGeometry args={[0.02, 32, 32]} />
<meshStandardMaterial <meshStandardMaterial
color={finish === "brons" ? "#6B5434" : frameColor} color={finish === "brons" ? "#6B5434" : frameColor}
metalness={0.9} metalness={0.95}
roughness={0.1} roughness={0.05}
/> />
</mesh> </mesh>
</group> </group>

133
components/configurator/scene.tsx
View File

@@ -1,53 +1,75 @@
"use client"; "use client";
import { Canvas } from "@react-three/fiber"; import { Canvas } from "@react-three/fiber";
import { OrbitControls, PerspectiveCamera, Environment } from "@react-three/drei"; import { OrbitControls, PerspectiveCamera, Environment, ContactShadows } from "@react-three/drei";
import { Door3D } from "./door-3d"; import { Door3D } from "./door-3d";
import * as THREE from "three"; import * as THREE from "three";
function Room() { function Room() {
const wallThickness = 0.15;
const doorWidth = 1.3;
const doorHeight = 2.5;
return ( return (
<group> <group>
{/* Floor */} {/* Floor - Clean shadow catcher */}
<mesh <mesh
rotation={[-Math.PI / 2, 0, 0]} rotation={[-Math.PI / 2, 0, 0]}
position={[0, 0, 0]} position={[0, 0, 0]}
receiveShadow receiveShadow
> >
<planeGeometry args={[10, 10]} /> <planeGeometry args={[15, 15]} />
<meshStandardMaterial color="#8B7355" roughness={0.8} /> <meshStandardMaterial color="#f5f5f5" roughness={0.9} metalness={0} />
</mesh> </mesh>
{/* Back Wall with Doorway */} {/* Proper Doorway with Reveal */}
<group position={[0, 2.5, -1]}> <group position={[0, 0, -wallThickness / 2]}>
{/* Left wall section */} {/* Left Pillar */}
<mesh position={[-3, 0, 0]} receiveShadow castShadow> <mesh position={[-(doorWidth / 2 + wallThickness / 2), doorHeight / 2, 0]} receiveShadow castShadow>
<boxGeometry args={[4, 5, 0.2]} /> <boxGeometry args={[wallThickness, doorHeight + wallThickness, wallThickness]} />
<meshStandardMaterial color="#E5E5E5" roughness={0.9} /> <meshStandardMaterial color="#fafafa" roughness={1} />
</mesh> </mesh>
{/* Right wall section */} {/* Right Pillar */}
<mesh position={[3, 0, 0]} receiveShadow castShadow> <mesh position={[doorWidth / 2 + wallThickness / 2, doorHeight / 2, 0]} receiveShadow castShadow>
<boxGeometry args={[4, 5, 0.2]} /> <boxGeometry args={[wallThickness, doorHeight + wallThickness, wallThickness]} />
<meshStandardMaterial color="#E5E5E5" roughness={0.9} /> <meshStandardMaterial color="#fafafa" roughness={1} />
</mesh> </mesh>
{/* Top wall section (above door) */} {/* Top Lintel */}
<mesh position={[0, 1.8, 0]} receiveShadow castShadow> <mesh position={[0, doorHeight + wallThickness / 2, 0]} receiveShadow castShadow>
<boxGeometry args={[2, 1.4, 0.2]} /> <boxGeometry args={[doorWidth + wallThickness * 2, wallThickness, wallThickness]} />
<meshStandardMaterial color="#E5E5E5" roughness={0.9} /> <meshStandardMaterial color="#fafafa" roughness={1} />
</mesh>
{/* Main Wall - Left Section */}
<mesh position={[-doorWidth - wallThickness * 2, 2.5, 0]} receiveShadow castShadow>
<boxGeometry args={[6, 5, wallThickness]} />
<meshStandardMaterial color="#fafafa" roughness={1} />
</mesh>
{/* Main Wall - Right Section */}
<mesh position={[doorWidth + wallThickness * 2, 2.5, 0]} receiveShadow castShadow>
<boxGeometry args={[6, 5, wallThickness]} />
<meshStandardMaterial color="#fafafa" roughness={1} />
</mesh>
{/* Main Wall - Top Section */}
<mesh position={[0, doorHeight + wallThickness + 1.25, 0]} receiveShadow castShadow>
<boxGeometry args={[doorWidth + wallThickness * 2, 2.5, wallThickness]} />
<meshStandardMaterial color="#fafafa" roughness={1} />
</mesh> </mesh>
</group> </group>
{/* Side Walls */} {/* Side Walls for depth */}
<mesh position={[-5, 2.5, 3]} receiveShadow castShadow> <mesh position={[-7, 2.5, 2]} receiveShadow castShadow>
<boxGeometry args={[0.2, 5, 8]} /> <boxGeometry args={[0.15, 5, 10]} />
<meshStandardMaterial color="#F0F0F0" roughness={0.9} /> <meshStandardMaterial color="#fcfcfc" roughness={1} />
</mesh> </mesh>
<mesh position={[5, 2.5, 3]} receiveShadow castShadow> <mesh position={[7, 2.5, 2]} receiveShadow castShadow>
<boxGeometry args={[0.2, 5, 8]} /> <boxGeometry args={[0.15, 5, 10]} />
<meshStandardMaterial color="#F0F0F0" roughness={0.9} /> <meshStandardMaterial color="#fcfcfc" roughness={1} />
</mesh> </mesh>
</group> </group>
); );
@@ -56,34 +78,29 @@ function Room() {
function Lighting() { function Lighting() {
return ( return (
<> <>
{/* Ambient light for overall illumination */} {/* Soft ambient light */}
<ambientLight intensity={0.4} /> <ambientLight intensity={0.5} />
{/* Main directional light (sun) with shadows */} {/* Key light - main illumination */}
<directionalLight <directionalLight
position={[5, 8, 5]} position={[5, 10, 8]}
intensity={1.2} intensity={1.5}
castShadow castShadow
shadow-mapSize-width={2048} shadow-mapSize-width={4096}
shadow-mapSize-height={2048} shadow-mapSize-height={4096}
shadow-camera-far={50} shadow-camera-far={50}
shadow-camera-left={-10} shadow-camera-left={-10}
shadow-camera-right={10} shadow-camera-right={10}
shadow-camera-top={10} shadow-camera-top={10}
shadow-camera-bottom={-10} shadow-camera-bottom={-10}
shadow-bias={-0.0001}
/> />
{/* Fill light from the side */} {/* Rim light for separation */}
<directionalLight position={[-5, 5, 2]} intensity={0.3} /> <directionalLight position={[-3, 3, -5]} intensity={0.6} />
{/* Spot light for drama */} {/* Fill light */}
<spotLight <directionalLight position={[0, 2, 5]} intensity={0.4} />
position={[0, 5, 2]}
angle={0.5}
penumbra={0.5}
intensity={0.5}
castShadow
/>
</> </>
); );
} }
@@ -95,29 +112,41 @@ export function Scene3D() {
gl={{ gl={{
antialias: true, antialias: true,
toneMapping: THREE.ACESFilmicToneMapping, toneMapping: THREE.ACESFilmicToneMapping,
toneMappingExposure: 1.2, toneMappingExposure: 1.3,
outputColorSpace: THREE.SRGBColorSpace,
}} }}
style={{ background: "#f5f5f5" }} style={{ background: "#fafafa" }}
> >
{/* Camera */} {/* Camera */}
<PerspectiveCamera makeDefault position={[0, 1.5, 4]} fov={50} /> <PerspectiveCamera makeDefault position={[0, 1.6, 4.5]} fov={45} />
{/* Camera Controls - Limited rotation */} {/* Camera Controls - Limited rotation */}
<OrbitControls <OrbitControls
enablePan={false} enablePan={false}
enableZoom={true} enableZoom={true}
minDistance={3} minDistance={3.5}
maxDistance={6} maxDistance={7}
minPolarAngle={Math.PI / 4} minPolarAngle={Math.PI / 3.5}
maxPolarAngle={Math.PI / 2} maxPolarAngle={Math.PI / 2.2}
maxAzimuthAngle={Math.PI / 6}
minAzimuthAngle={-Math.PI / 6}
target={[0, 1.2, 0]} target={[0, 1.2, 0]}
/> />
{/* Lighting */} {/* Premium Studio Lighting */}
<Lighting /> <Lighting />
{/* Environment for reflections */} {/* Studio Environment for realistic reflections */}
<Environment preset="apartment" /> <Environment preset="studio" environmentIntensity={0.6} />
{/* Contact Shadows for "Anti-Gravity" premium look */}
<ContactShadows
position={[0, 0.01, 0]}
opacity={0.4}
scale={15}
blur={2}
far={3}
/>
{/* The Room */} {/* The Room */}
<Room /> <Room />