065451988c
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>
130 lines
3.3 KiB
TypeScript
130 lines
3.3 KiB
TypeScript
"use client";
|
|
|
|
import { Canvas } from "@react-three/fiber";
|
|
import { OrbitControls, PerspectiveCamera, Environment } from "@react-three/drei";
|
|
import { Door3D } from "./door-3d";
|
|
import * as THREE from "three";
|
|
|
|
function Room() {
|
|
return (
|
|
<group>
|
|
{/* Floor */}
|
|
<mesh
|
|
rotation={[-Math.PI / 2, 0, 0]}
|
|
position={[0, 0, 0]}
|
|
receiveShadow
|
|
>
|
|
<planeGeometry args={[10, 10]} />
|
|
<meshStandardMaterial color="#8B7355" roughness={0.8} />
|
|
</mesh>
|
|
|
|
{/* Back Wall with Doorway */}
|
|
<group position={[0, 2.5, -1]}>
|
|
{/* Left wall section */}
|
|
<mesh position={[-3, 0, 0]} receiveShadow castShadow>
|
|
<boxGeometry args={[4, 5, 0.2]} />
|
|
<meshStandardMaterial color="#E5E5E5" roughness={0.9} />
|
|
</mesh>
|
|
|
|
{/* Right wall section */}
|
|
<mesh position={[3, 0, 0]} receiveShadow castShadow>
|
|
<boxGeometry args={[4, 5, 0.2]} />
|
|
<meshStandardMaterial color="#E5E5E5" roughness={0.9} />
|
|
</mesh>
|
|
|
|
{/* Top wall section (above door) */}
|
|
<mesh position={[0, 1.8, 0]} receiveShadow castShadow>
|
|
<boxGeometry args={[2, 1.4, 0.2]} />
|
|
<meshStandardMaterial color="#E5E5E5" roughness={0.9} />
|
|
</mesh>
|
|
</group>
|
|
|
|
{/* Side Walls */}
|
|
<mesh position={[-5, 2.5, 3]} receiveShadow castShadow>
|
|
<boxGeometry args={[0.2, 5, 8]} />
|
|
<meshStandardMaterial color="#F0F0F0" roughness={0.9} />
|
|
</mesh>
|
|
|
|
<mesh position={[5, 2.5, 3]} receiveShadow castShadow>
|
|
<boxGeometry args={[0.2, 5, 8]} />
|
|
<meshStandardMaterial color="#F0F0F0" roughness={0.9} />
|
|
</mesh>
|
|
</group>
|
|
);
|
|
}
|
|
|
|
function Lighting() {
|
|
return (
|
|
<>
|
|
{/* Ambient light for overall illumination */}
|
|
<ambientLight intensity={0.4} />
|
|
|
|
{/* Main directional light (sun) with shadows */}
|
|
<directionalLight
|
|
position={[5, 8, 5]}
|
|
intensity={1.2}
|
|
castShadow
|
|
shadow-mapSize-width={2048}
|
|
shadow-mapSize-height={2048}
|
|
shadow-camera-far={50}
|
|
shadow-camera-left={-10}
|
|
shadow-camera-right={10}
|
|
shadow-camera-top={10}
|
|
shadow-camera-bottom={-10}
|
|
/>
|
|
|
|
{/* Fill light from the side */}
|
|
<directionalLight position={[-5, 5, 2]} intensity={0.3} />
|
|
|
|
{/* Spot light for drama */}
|
|
<spotLight
|
|
position={[0, 5, 2]}
|
|
angle={0.5}
|
|
penumbra={0.5}
|
|
intensity={0.5}
|
|
castShadow
|
|
/>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export function Scene3D() {
|
|
return (
|
|
<Canvas
|
|
shadows
|
|
gl={{
|
|
antialias: true,
|
|
toneMapping: THREE.ACESFilmicToneMapping,
|
|
toneMappingExposure: 1.2,
|
|
}}
|
|
style={{ background: "#f5f5f5" }}
|
|
>
|
|
{/* Camera */}
|
|
<PerspectiveCamera makeDefault position={[0, 1.5, 4]} fov={50} />
|
|
|
|
{/* Camera Controls - Limited rotation */}
|
|
<OrbitControls
|
|
enablePan={false}
|
|
enableZoom={true}
|
|
minDistance={3}
|
|
maxDistance={6}
|
|
minPolarAngle={Math.PI / 4}
|
|
maxPolarAngle={Math.PI / 2}
|
|
target={[0, 1.2, 0]}
|
|
/>
|
|
|
|
{/* Lighting */}
|
|
<Lighting />
|
|
|
|
{/* Environment for reflections */}
|
|
<Environment preset="apartment" />
|
|
|
|
{/* The Room */}
|
|
<Room />
|
|
|
|
{/* The Door */}
|
|
<Door3D />
|
|
</Canvas>
|
|
);
|
|
}
|