Improve 3D view to match reference drawings

Based on reference images in afbeeldingen/modellen/:
- dt9.png, dt10.png, door_type_4.jpg, samenstelling_beide.png

Changes for technical drawing aesthetic:

**Camera Improvements:**
- Position: [0, 1.2, 3.5] - More frontal, less perspective
- FOV: 35° (was 45°) - Less distortion
- Limited rotation: ±15° azimuth, near-horizontal polar
- Damping enabled for smooth movement
- Result: Flatter, more schematic view

**Profile Thickness (Match Reference Lines):**
- Stiles: 60mm (was 40mm) - Thicker vertical frames
- Rails: 40mm (was 20mm) - Thicker horizontal frames
- Depth: 60mm uniform - More prominent profiles
- Radius: 2mm (was 1mm) - Slightly more visible edges
- Result: Bold, visible frame lines like references

**Lighting (High Contrast):**
- Ambient: 0.8 (was 0.5) - Brighter overall
- Front key light: Straight on from [0,5,10]
- Intensity: 2.0 - Strong, even illumination
- Subtle side lights for minimal depth
- Result: Flat, technical drawing appearance

**Glass Material (White/Opaque):**
- Color: #f8f9fa (bright white)
- Transmission: 0.3 (was 1.0) - Much less transparent
- Opacity: 0.95 - Nearly opaque
- Result: White glass areas like reference drawings

**Visual Result:**
- Clear black frame lines on white glass
- Frontal view with minimal perspective
- Technical drawing aesthetic
- Matches dt9.png, door_type_4.jpg style
- User can see door design clearly

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
Ubuntu
2026-02-10 17:22:10 +00:00
parent d2119eaa16
commit 0de3893b30
35 changed files with 33 additions and 34 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 21 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 42 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 29 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 38 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 43 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 50 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 40 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 39 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 19 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 40 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 54 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 36 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 33 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 24 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 75 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 55 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 34 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 30 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 32 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

View File

@@ -15,18 +15,17 @@ const SteelMaterial = ({ color }: { color: string }) => (
/> />
); );
// Glass material // Glass material - More opaque/white for technical drawing look
const GlassMaterial = () => ( const GlassMaterial = () => (
<meshPhysicalMaterial <meshPhysicalMaterial
color="#eff6ff" color="#f8f9fa"
transparent transparent
transmission={1} transmission={0.3}
roughness={0.05} roughness={0.1}
thickness={2.5} thickness={1}
ior={1.5} ior={1.5}
envMapIntensity={1} envMapIntensity={0.5}
clearcoat={1} opacity={0.95}
clearcoatRoughness={0}
/> />
); );
@@ -59,13 +58,13 @@ export function Door3DEnhanced() {
const doorWidth = doorLeafWidth / 1000; // Convert mm to m const doorWidth = doorLeafWidth / 1000; // Convert mm to m
const doorHeight = height / 1000; // Convert mm to m const doorHeight = height / 1000; // Convert mm to m
// Profile dimensions (in meters) // Profile dimensions (in meters) - Thicker for visibility
const stileWidth = 0.04; // 40mm vertical profiles const stileWidth = 0.06; // 60mm vertical profiles (more visible)
const stileDepth = 0.04; // 40mm depth const stileDepth = 0.06; // 60mm depth
const railHeight = 0.02; // 20mm horizontal profiles const railHeight = 0.04; // 40mm horizontal profiles (more visible)
const railDepth = 0.04; // 40mm depth const railDepth = 0.06; // 60mm depth
const glassThickness = 0.008; // 8mm glass const glassThickness = 0.01; // 10mm glass
const profileRadius = 0.001; // 1mm rounded corners const profileRadius = 0.002; // 2mm rounded corners
// Calculate positions for grid dividers // Calculate positions for grid dividers
const getDividerPositions = () => { const getDividerPositions = () => {

View File

@@ -78,13 +78,13 @@ function Room() {
function Lighting() { function Lighting() {
return ( return (
<> <>
{/* Soft ambient light */} {/* Strong ambient for flat, technical drawing look */}
<ambientLight intensity={0.5} /> <ambientLight intensity={0.8} />
{/* Key light - main illumination */} {/* Front key light - straight on */}
<directionalLight <directionalLight
position={[5, 10, 8]} position={[0, 5, 10]}
intensity={1.5} intensity={2}
castShadow castShadow
shadow-mapSize-width={4096} shadow-mapSize-width={4096}
shadow-mapSize-height={4096} shadow-mapSize-height={4096}
@@ -96,11 +96,9 @@ function Lighting() {
shadow-bias={-0.0001} shadow-bias={-0.0001}
/> />
{/* Rim light for separation */} {/* Subtle side light for depth */}
<directionalLight position={[-3, 3, -5]} intensity={0.6} /> <directionalLight position={[-2, 2, 3]} intensity={0.3} />
<directionalLight position={[2, 2, 3]} intensity={0.3} />
{/* Fill light */}
<directionalLight position={[0, 2, 5]} intensity={0.4} />
</> </>
); );
} }
@@ -117,20 +115,22 @@ export function Scene3D() {
}} }}
style={{ background: "#fafafa" }} style={{ background: "#fafafa" }}
> >
{/* Camera */} {/* Camera - More frontal view for technical drawing aesthetic */}
<PerspectiveCamera makeDefault position={[0, 1.6, 4.5]} fov={45} /> <PerspectiveCamera makeDefault position={[0, 1.2, 3.5]} fov={35} />
{/* Camera Controls - Limited rotation */} {/* Camera Controls - Very limited for flat view */}
<OrbitControls <OrbitControls
enablePan={false} enablePan={false}
enableZoom={true} enableZoom={true}
minDistance={3.5} minDistance={3}
maxDistance={7} maxDistance={5}
minPolarAngle={Math.PI / 3.5} minPolarAngle={Math.PI / 2.5}
maxPolarAngle={Math.PI / 2.2} maxPolarAngle={Math.PI / 2.1}
maxAzimuthAngle={Math.PI / 6} maxAzimuthAngle={Math.PI / 12}
minAzimuthAngle={-Math.PI / 6} minAzimuthAngle={-Math.PI / 12}
target={[0, 1.2, 0]} target={[0, 1.2, 0]}
enableDamping
dampingFactor={0.05}
/> />
{/* Premium Studio Lighting */} {/* Premium Studio Lighting */}