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

133
components/configurator/scene.tsx
View File

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