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>
BIN
afbeeldingen/modellen/contempera.png
Normal file
|
After Width: | Height: | Size: 13 KiB |
BIN
afbeeldingen/modellen/door_type_4.jpg
Normal file
|
After Width: | Height: | Size: 21 KiB |
BIN
afbeeldingen/modellen/dt10.png
Normal file
|
After Width: | Height: | Size: 42 KiB |
BIN
afbeeldingen/modellen/dt11.png
Normal file
|
After Width: | Height: | Size: 29 KiB |
BIN
afbeeldingen/modellen/dt12.png
Normal file
|
After Width: | Height: | Size: 38 KiB |
BIN
afbeeldingen/modellen/dt13.png
Normal file
|
After Width: | Height: | Size: 43 KiB |
BIN
afbeeldingen/modellen/dt5.png
Normal file
|
After Width: | Height: | Size: 10 KiB |
BIN
afbeeldingen/modellen/dt6.png
Normal file
|
After Width: | Height: | Size: 15 KiB |
BIN
afbeeldingen/modellen/dt8.png
Normal file
|
After Width: | Height: | Size: 50 KiB |
BIN
afbeeldingen/modellen/dt9-right.png
Normal file
|
After Width: | Height: | Size: 40 KiB |
BIN
afbeeldingen/modellen/dt9.png
Normal file
|
After Width: | Height: | Size: 39 KiB |
BIN
afbeeldingen/modellen/elite.png
Normal file
|
After Width: | Height: | Size: 19 KiB |
BIN
afbeeldingen/modellen/estonia.png
Normal file
|
After Width: | Height: | Size: 6.8 KiB |
BIN
afbeeldingen/modellen/fabric.png
Normal file
|
After Width: | Height: | Size: 8.4 KiB |
BIN
afbeeldingen/modellen/fisherman.png
Normal file
|
After Width: | Height: | Size: 15 KiB |
BIN
afbeeldingen/modellen/grandma.png
Normal file
|
After Width: | Height: | Size: 11 KiB |
BIN
afbeeldingen/modellen/herenhuis.png
Normal file
|
After Width: | Height: | Size: 12 KiB |
BIN
afbeeldingen/modellen/hoeklijn.png
Normal file
|
After Width: | Height: | Size: 40 KiB |
BIN
afbeeldingen/modellen/hoeklijn_L.png
Normal file
|
After Width: | Height: | Size: 54 KiB |
BIN
afbeeldingen/modellen/hondla.png
Normal file
|
After Width: | Height: | Size: 36 KiB |
BIN
afbeeldingen/modellen/hondla_L.png
Normal file
|
After Width: | Height: | Size: 33 KiB |
BIN
afbeeldingen/modellen/kasteel.png
Normal file
|
After Width: | Height: | Size: 24 KiB |
BIN
afbeeldingen/modellen/kathedraal.png
Normal file
|
After Width: | Height: | Size: 15 KiB |
BIN
afbeeldingen/modellen/koker_l.png
Normal file
|
After Width: | Height: | Size: 75 KiB |
BIN
afbeeldingen/modellen/koker_s.png
Normal file
|
After Width: | Height: | Size: 55 KiB |
BIN
afbeeldingen/modellen/lindsey.png
Normal file
|
After Width: | Height: | Size: 34 KiB |
BIN
afbeeldingen/modellen/low-deep.png
Normal file
|
After Width: | Height: | Size: 7.8 KiB |
BIN
afbeeldingen/modellen/primier.png
Normal file
|
After Width: | Height: | Size: 12 KiB |
BIN
afbeeldingen/modellen/prison.png
Normal file
|
After Width: | Height: | Size: 16 KiB |
BIN
afbeeldingen/modellen/round.png
Normal file
|
After Width: | Height: | Size: 14 KiB |
BIN
afbeeldingen/modellen/samenstelling_beide.png
Normal file
|
After Width: | Height: | Size: 30 KiB |
BIN
afbeeldingen/modellen/supreme.png
Normal file
|
After Width: | Height: | Size: 32 KiB |
BIN
afbeeldingen/modellen/toog.png
Normal file
|
After Width: | Height: | Size: 13 KiB |
@@ -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 = () => {
|
||||||
|
|||||||
@@ -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 */}
|
||||||
|
|||||||