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>
This commit is contained in:
Ubuntu
119
components/configurator/door-3d.tsx
Normal file
119
components/configurator/door-3d.tsx
Normal file
@@ -0,0 +1,119 @@
|
||||
"use client";
|
||||
|
||||
import { useRef } from "react";
|
||||
import { useConfiguratorStore } from "@/lib/store";
|
||||
import * as THREE from "three";
|
||||
|
||||
export function Door3D() {
|
||||
const { doorType, gridType, finish, handle } = useConfiguratorStore();
|
||||
const doorRef = useRef<THREE.Group>(null);
|
||||
|
||||
// Frame color based on finish
|
||||
const frameColor = {
|
||||
zwart: "#1f1f1f",
|
||||
brons: "#8B6F47",
|
||||
grijs: "#525252",
|
||||
}[finish];
|
||||
|
||||
// Door dimensions
|
||||
const doorWidth = doorType === "paneel" ? 1.5 : 1.2;
|
||||
const doorHeight = 2.4;
|
||||
const frameThickness = 0.08;
|
||||
const glassThickness = 0.02;
|
||||
|
||||
// Calculate grid divider positions
|
||||
const getDividerPositions = () => {
|
||||
if (gridType === "3-vlak") {
|
||||
return [-doorHeight / 3, doorHeight / 3];
|
||||
} else if (gridType === "4-vlak") {
|
||||
return [-doorHeight / 2, 0, doorHeight / 2];
|
||||
}
|
||||
return [];
|
||||
};
|
||||
|
||||
const dividerPositions = getDividerPositions();
|
||||
|
||||
return (
|
||||
<group ref={doorRef} position={[0, doorHeight / 2, 0]}>
|
||||
{/* Outer Frame - Top */}
|
||||
<mesh position={[0, doorHeight / 2, 0]} castShadow>
|
||||
<boxGeometry args={[doorWidth + frameThickness * 2, frameThickness, frameThickness]} />
|
||||
<meshStandardMaterial color={frameColor} metalness={0.7} roughness={0.3} />
|
||||
</mesh>
|
||||
|
||||
{/* Outer Frame - Bottom */}
|
||||
<mesh position={[0, -doorHeight / 2, 0]} castShadow>
|
||||
<boxGeometry args={[doorWidth + frameThickness * 2, frameThickness, frameThickness]} />
|
||||
<meshStandardMaterial color={frameColor} metalness={0.7} roughness={0.3} />
|
||||
</mesh>
|
||||
|
||||
{/* Outer Frame - Left */}
|
||||
<mesh position={[-doorWidth / 2 - frameThickness / 2, 0, 0]} castShadow>
|
||||
<boxGeometry args={[frameThickness, doorHeight + frameThickness * 2, frameThickness]} />
|
||||
<meshStandardMaterial color={frameColor} metalness={0.7} roughness={0.3} />
|
||||
</mesh>
|
||||
|
||||
{/* Outer Frame - Right */}
|
||||
<mesh position={[doorWidth / 2 + frameThickness / 2, 0, 0]} castShadow>
|
||||
<boxGeometry args={[frameThickness, doorHeight + frameThickness * 2, frameThickness]} />
|
||||
<meshStandardMaterial color={frameColor} metalness={0.7} roughness={0.3} />
|
||||
</mesh>
|
||||
|
||||
{/* Glass Panel */}
|
||||
<mesh position={[0, 0, 0]} castShadow receiveShadow>
|
||||
<boxGeometry args={[doorWidth, doorHeight, glassThickness]} />
|
||||
<meshPhysicalMaterial
|
||||
color="#87CEEB"
|
||||
transparent
|
||||
opacity={0.3}
|
||||
roughness={0.1}
|
||||
metalness={0.1}
|
||||
transmission={0.9}
|
||||
thickness={0.5}
|
||||
/>
|
||||
</mesh>
|
||||
|
||||
{/* Horizontal Dividers (Grid) */}
|
||||
{dividerPositions.map((yPos, index) => (
|
||||
<mesh key={`divider-${index}`} position={[0, yPos, 0]} castShadow>
|
||||
<boxGeometry args={[doorWidth, frameThickness, frameThickness]} />
|
||||
<meshStandardMaterial color={frameColor} metalness={0.7} roughness={0.3} />
|
||||
</mesh>
|
||||
))}
|
||||
|
||||
{/* Vertical Divider for Paneel */}
|
||||
{doorType === "paneel" && (
|
||||
<mesh position={[0, 0, 0]} castShadow>
|
||||
<boxGeometry args={[frameThickness, doorHeight, frameThickness]} />
|
||||
<meshStandardMaterial color={frameColor} metalness={0.7} roughness={0.3} />
|
||||
</mesh>
|
||||
)}
|
||||
|
||||
{/* Handle - U-Greep for Taats */}
|
||||
{doorType === "taats" && handle === "u-greep" && (
|
||||
<mesh position={[0, 0, frameThickness]} castShadow>
|
||||
<boxGeometry args={[0.03, 0.6, 0.03]} />
|
||||
<meshStandardMaterial color={frameColor} metalness={0.8} roughness={0.2} />
|
||||
</mesh>
|
||||
)}
|
||||
|
||||
{/* Handle - Klink for Scharnier */}
|
||||
{doorType === "scharnier" && handle === "klink" && (
|
||||
<group position={[doorWidth / 2 - 0.15, 0, frameThickness]}>
|
||||
<mesh castShadow>
|
||||
<boxGeometry args={[0.12, 0.03, 0.03]} />
|
||||
<meshStandardMaterial color={frameColor} metalness={0.8} roughness={0.2} />
|
||||
</mesh>
|
||||
<mesh position={[0.06, 0, 0]} castShadow>
|
||||
<sphereGeometry args={[0.025, 16, 16]} />
|
||||
<meshStandardMaterial
|
||||
color={finish === "brons" ? "#6B5434" : frameColor}
|
||||
metalness={0.9}
|
||||
roughness={0.1}
|
||||
/>
|
||||
</mesh>
|
||||
</group>
|
||||
)}
|
||||
</group>
|
||||
);
|
||||
}
|
||||
@@ -1,106 +1,37 @@
|
||||
"use client";
|
||||
|
||||
import { Suspense } from "react";
|
||||
import { useConfiguratorStore } from "@/lib/store";
|
||||
import { Scene3D } from "./scene";
|
||||
|
||||
function LoadingFallback() {
|
||||
return (
|
||||
<div className="flex h-full w-full items-center justify-center bg-gradient-to-br from-slate-100 to-slate-200">
|
||||
<div className="text-center">
|
||||
<div className="mb-4 size-12 animate-spin rounded-full border-4 border-[#1A2E2E] border-t-[#C4D668]" />
|
||||
<p className="text-sm font-medium text-[#1A2E2E]">3D Scene laden...</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function DoorVisualizer() {
|
||||
const { doorType, gridType, finish, handle } = useConfiguratorStore();
|
||||
|
||||
// Frame color mapping based on finish
|
||||
const frameColor = {
|
||||
zwart: "#1f1f1f",
|
||||
brons: "#8B6F47",
|
||||
grijs: "#525252",
|
||||
}[finish];
|
||||
|
||||
// Door width varies by type
|
||||
const doorWidth = doorType === "paneel" ? "w-[300px]" : "w-[240px]";
|
||||
|
||||
// Grid configuration
|
||||
const gridConfig = {
|
||||
"3-vlak": "grid-rows-3",
|
||||
"4-vlak": "grid-rows-4",
|
||||
geen: "",
|
||||
}[gridType];
|
||||
|
||||
return (
|
||||
<div className="relative flex h-full w-full items-center justify-center overflow-hidden rounded-[2.5rem]">
|
||||
{/* Background room image with overlay */}
|
||||
<div
|
||||
className="absolute inset-0 bg-cover bg-center"
|
||||
style={{ backgroundImage: "url(/images/hero.jpg)" }}
|
||||
/>
|
||||
<div className="absolute inset-0 bg-white/60" />
|
||||
|
||||
<div className="relative h-full w-full overflow-hidden rounded-[2.5rem]">
|
||||
{/* Live Preview Badge */}
|
||||
<div className="absolute left-8 top-8 z-10">
|
||||
<div className="flex items-center gap-2 rounded-full bg-[#1A2E2E] px-4 py-2 text-sm font-semibold text-white shadow-lg">
|
||||
<div className="size-2 animate-pulse rounded-full bg-[#C4D668]" />
|
||||
Live Voorbeeld
|
||||
3D Voorbeeld
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* The Door Frame (CSS-based) */}
|
||||
<div className="relative z-10 flex h-[500px] items-center justify-center">
|
||||
<div
|
||||
className={`relative h-[480px] ${doorWidth} rounded-sm border-[12px] shadow-2xl ring-1 ring-white/10`}
|
||||
style={{ borderColor: frameColor }}
|
||||
>
|
||||
{/* The Glass Panels with Grid */}
|
||||
{gridType !== "geen" ? (
|
||||
<div
|
||||
className={`grid h-full w-full gap-y-3 ${gridConfig}`}
|
||||
style={{ backgroundColor: frameColor }}
|
||||
>
|
||||
{gridType === "3-vlak" &&
|
||||
[1, 2, 3].map((i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="backdrop-blur-[1px] backdrop-brightness-110 bg-sky-100/10"
|
||||
/>
|
||||
))}
|
||||
{gridType === "4-vlak" &&
|
||||
[1, 2, 3, 4].map((i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="backdrop-blur-[1px] backdrop-brightness-110 bg-sky-100/10"
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
// No grid - single glass panel
|
||||
<div className="h-full w-full backdrop-blur-[1px] backdrop-brightness-110 bg-sky-100/10" />
|
||||
)}
|
||||
|
||||
{/* Handle Overlays */}
|
||||
{doorType === "taats" && handle === "u-greep" && (
|
||||
<div
|
||||
className="absolute left-1/2 top-1/2 h-32 w-2 -translate-x-1/2 -translate-y-1/2 rounded-full shadow-lg"
|
||||
style={{ backgroundColor: frameColor }}
|
||||
/>
|
||||
)}
|
||||
|
||||
{doorType === "scharnier" && handle === "klink" && (
|
||||
<div className="absolute right-4 top-1/2 flex -translate-y-1/2 items-center gap-1">
|
||||
<div
|
||||
className="h-2 w-12 rounded-full shadow-md"
|
||||
style={{ backgroundColor: frameColor }}
|
||||
/>
|
||||
<div
|
||||
className="size-3 rounded-full shadow-md ring-1 ring-white/20"
|
||||
style={{ backgroundColor: finish === "brons" ? "#6B5434" : frameColor }}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{doorType === "paneel" && (
|
||||
// Central vertical divider for paneel
|
||||
<div
|
||||
className="absolute left-1/2 top-0 h-full w-3 -translate-x-1/2 shadow-inner"
|
||||
style={{ backgroundColor: frameColor }}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{/* 3D Scene */}
|
||||
<Suspense fallback={<LoadingFallback />}>
|
||||
<Scene3D />
|
||||
</Suspense>
|
||||
|
||||
{/* Configuration Info Card */}
|
||||
<div className="absolute bottom-8 left-8 right-8 z-10">
|
||||
@@ -131,6 +62,13 @@ export function DoorVisualizer() {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Controls Hint */}
|
||||
<div className="absolute bottom-8 right-8 z-10 hidden lg:block">
|
||||
<div className="rounded-xl bg-[#1A2E2E]/80 px-3 py-2 text-xs text-white backdrop-blur-sm">
|
||||
<p className="font-medium">🖱️ Drag to rotate • Scroll to zoom</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
129
components/configurator/scene.tsx
Normal file
129
components/configurator/scene.tsx
Normal file
@@ -0,0 +1,129 @@
|
||||
"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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user