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>
45 lines
1.0 KiB
JSON
45 lines
1.0 KiB
JSON
{
|
|
"name": "stalendeuren",
|
|
"version": "0.1.0",
|
|
"private": true,
|
|
"scripts": {
|
|
"dev": "next dev",
|
|
"build": "next build",
|
|
"start": "next start",
|
|
"lint": "eslint"
|
|
},
|
|
"dependencies": {
|
|
"@hookform/resolvers": "^5.2.2",
|
|
"@react-three/drei": "^10.7.7",
|
|
"@react-three/fiber": "^9.5.0",
|
|
"@types/three": "^0.182.0",
|
|
"class-variance-authority": "^0.7.1",
|
|
"clsx": "^2.1.1",
|
|
"lucide-react": "^0.563.0",
|
|
"next": "16.1.6",
|
|
"radix-ui": "^1.4.3",
|
|
"react": "19.2.3",
|
|
"react-dom": "19.2.3",
|
|
"react-hook-form": "^7.71.1",
|
|
"tailwind-merge": "^3.4.0",
|
|
"three": "^0.182.0",
|
|
"zod": "^4.3.6",
|
|
"zustand": "^5.0.11"
|
|
},
|
|
"devDependencies": {
|
|
"@tailwindcss/postcss": "^4",
|
|
"@types/cheerio": "^0.22.35",
|
|
"@types/node": "^20",
|
|
"@types/react": "^19",
|
|
"@types/react-dom": "^19",
|
|
"axios": "^1.13.5",
|
|
"cheerio": "^1.2.0",
|
|
"eslint": "^9",
|
|
"eslint-config-next": "16.1.6",
|
|
"shadcn": "^3.8.4",
|
|
"tailwindcss": "^4",
|
|
"tw-animate-css": "^1.4.0",
|
|
"typescript": "^5"
|
|
}
|
|
}
|