feat: Latest production version with interior scene and glass
Includes room interior with floor, walls, glass you can see through, and all uncommitted production changes that were running live. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Ubuntu
@@ -1,7 +1,7 @@
|
||||
"use client";
|
||||
|
||||
import { useRef, useMemo, Suspense } from "react";
|
||||
import { useConfiguratorStore } from "@/lib/store";
|
||||
import { useConfiguratorStore, type GlassColor, type Finish } from "@/lib/store";
|
||||
import { RoundedBox, useTexture } from "@react-three/drei";
|
||||
import * as THREE from "three";
|
||||
import {
|
||||
@@ -26,28 +26,58 @@ import {
|
||||
type PhysicalPart,
|
||||
} from "@/lib/door-models";
|
||||
|
||||
// ============================================
|
||||
// FRAME COLOR MAPPING
|
||||
// ============================================
|
||||
|
||||
const FRAME_COLORS: Record<Finish, string> = {
|
||||
zwart: "#1a1a1a",
|
||||
brons: "#8B6F47",
|
||||
grijs: "#525252",
|
||||
goud: "#B8860B",
|
||||
beige: "#C8B88A",
|
||||
ral: "#4A6741",
|
||||
};
|
||||
|
||||
const FRAME_TEXTURE_PATHS: Record<Finish, string> = {
|
||||
zwart: "/textures/proinn/proinn-metaalkleur-zwart.jpg",
|
||||
brons: "/textures/proinn/proinn-metaalkleur-brons.jpg",
|
||||
grijs: "/textures/proinn/proinn-metaalkleur-antraciet.jpg",
|
||||
goud: "/textures/proinn/proinn-metaalkleur-goud.jpg",
|
||||
beige: "/textures/proinn/proinn-metaalkleur-beige.jpg",
|
||||
ral: "/textures/proinn/proinn-metaalkleur-ral-keuze.jpg",
|
||||
};
|
||||
|
||||
// ============================================
|
||||
// GLASS COLOR MAPPING
|
||||
// ============================================
|
||||
|
||||
interface GlassColorProps {
|
||||
color: string;
|
||||
transmission: number;
|
||||
roughness: number;
|
||||
}
|
||||
|
||||
const GLASS_COLOR_MAP: Record<GlassColor, GlassColorProps> = {
|
||||
helder: { color: "#eff6ff", transmission: 0.98, roughness: 0.05 },
|
||||
grijs: { color: "#3a3a3a", transmission: 0.85, roughness: 0.1 },
|
||||
brons: { color: "#8B6F47", transmission: 0.85, roughness: 0.1 },
|
||||
"mat-blank": { color: "#e8e8e8", transmission: 0.7, roughness: 0.3 },
|
||||
"mat-brons": { color: "#A0845C", transmission: 0.6, roughness: 0.35 },
|
||||
"mat-zwart": { color: "#1a1a1a", transmission: 0.5, roughness: 0.4 },
|
||||
};
|
||||
|
||||
// ============================================
|
||||
// PHOTOREALISTIC MATERIALS
|
||||
// ============================================
|
||||
|
||||
/**
|
||||
* Steel Material with Aluwdoors Texture
|
||||
* Vertical steel grain for industrial look
|
||||
*/
|
||||
function SteelMaterialTextured({ color, finish }: { color: string; finish: string }) {
|
||||
function SteelMaterialTextured({ color, finish }: { color: string; finish: Finish }) {
|
||||
try {
|
||||
// Load texture based on finish
|
||||
const texturePath = {
|
||||
zwart: "/textures/aluwdoors/aluwdoors-configurator-metaalkleur-zwart.jpg",
|
||||
brons: "/textures/aluwdoors/aluwdoors-configurator-metaalkleur-brons.jpg",
|
||||
grijs: "/textures/aluwdoors/aluwdoors-configurator-metaalkleur-antraciet.jpg",
|
||||
}[finish] || "/textures/aluwdoors/aluwdoors-configurator-metaalkleur-zwart.jpg";
|
||||
|
||||
const texturePath = FRAME_TEXTURE_PATHS[finish];
|
||||
const texture = useTexture(texturePath);
|
||||
|
||||
// Configure texture for vertical steel grain
|
||||
texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
|
||||
texture.repeat.set(0.5, 3); // Vertical grain
|
||||
texture.repeat.set(0.5, 3);
|
||||
texture.colorSpace = THREE.SRGBColorSpace;
|
||||
|
||||
return (
|
||||
@@ -59,14 +89,11 @@ function SteelMaterialTextured({ color, finish }: { color: string; finish: strin
|
||||
envMapIntensity={1.5}
|
||||
/>
|
||||
);
|
||||
} catch (error) {
|
||||
} catch {
|
||||
return <SteelMaterialFallback color={color} />;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Fallback Steel Material (Solid Color)
|
||||
*/
|
||||
function SteelMaterialFallback({ color }: { color: string }) {
|
||||
return (
|
||||
<meshStandardMaterial
|
||||
@@ -78,40 +105,37 @@ function SteelMaterialFallback({ color }: { color: string }) {
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Photorealistic Glass Material
|
||||
* High transmission for realistic glass look
|
||||
*/
|
||||
const GlassMaterial = () => (
|
||||
<meshPhysicalMaterial
|
||||
transmission={0.98}
|
||||
roughness={0.05}
|
||||
thickness={0.007}
|
||||
ior={1.5}
|
||||
color="#eff6ff"
|
||||
transparent
|
||||
opacity={0.98}
|
||||
envMapIntensity={1.0}
|
||||
/>
|
||||
);
|
||||
function GlassMaterial({ glassColor }: { glassColor: GlassColor }) {
|
||||
const props = GLASS_COLOR_MAP[glassColor];
|
||||
return (
|
||||
<meshPhysicalMaterial
|
||||
transmission={props.transmission}
|
||||
roughness={props.roughness}
|
||||
thickness={0.007}
|
||||
ior={1.5}
|
||||
color={props.color}
|
||||
transparent
|
||||
opacity={0.98}
|
||||
envMapIntensity={1.0}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
// ============================================
|
||||
// PHYSICAL PART RENDERER
|
||||
// ============================================
|
||||
|
||||
/**
|
||||
* Renders a single physical part with correct geometry
|
||||
*/
|
||||
function PhysicalPartComponent({
|
||||
part,
|
||||
frameColor,
|
||||
finish,
|
||||
glassColor,
|
||||
}: {
|
||||
part: PhysicalPart;
|
||||
frameColor: string;
|
||||
finish: string;
|
||||
finish: Finish;
|
||||
glassColor: GlassColor;
|
||||
}) {
|
||||
// Convert mm to meters
|
||||
const x = mmToMeters(part.x);
|
||||
const y = mmToMeters(part.y);
|
||||
const z = mmToMeters(part.z);
|
||||
@@ -119,17 +143,15 @@ function PhysicalPartComponent({
|
||||
const height = mmToMeters(part.height);
|
||||
const depth = mmToMeters(part.depth);
|
||||
|
||||
// Glass uses different material
|
||||
if (part.isGlass) {
|
||||
return (
|
||||
<mesh position={[x, y, z]} castShadow receiveShadow>
|
||||
<boxGeometry args={[width, height, depth]} />
|
||||
<GlassMaterial />
|
||||
<GlassMaterial glassColor={glassColor} />
|
||||
</mesh>
|
||||
);
|
||||
}
|
||||
|
||||
// Steel profiles use RoundedBox for realistic edges
|
||||
const cornerRadius = mmToMeters(PROFILE_CORNER_RADIUS);
|
||||
|
||||
return (
|
||||
@@ -153,32 +175,21 @@ function PhysicalPartComponent({
|
||||
// ============================================
|
||||
|
||||
export function Door3DEnhanced() {
|
||||
const { doorType, gridType, finish, handle, glassPattern, doorLeafWidth, height } =
|
||||
const { doorType, gridType, finish, handle, glassPattern, glassColor, doorLeafWidth, height } =
|
||||
useConfiguratorStore();
|
||||
const doorRef = useRef<THREE.Group>(null);
|
||||
|
||||
// Frame color based on finish
|
||||
const frameColor = {
|
||||
zwart: "#1a1a1a",
|
||||
brons: "#8B6F47",
|
||||
grijs: "#525252",
|
||||
}[finish] || "#1a1a1a";
|
||||
const frameColor = FRAME_COLORS[finish] || "#1a1a1a";
|
||||
|
||||
// Generate door assembly from manufacturing specs
|
||||
const doorAssembly = useMemo(
|
||||
() => generateDoorAssembly(doorType, gridType, doorLeafWidth, height),
|
||||
[doorType, gridType, doorLeafWidth, height]
|
||||
);
|
||||
|
||||
// Convert dimensions to meters
|
||||
const doorWidth = mmToMeters(doorLeafWidth);
|
||||
const doorHeight = mmToMeters(height);
|
||||
|
||||
// Profile dimensions in meters (for handle positioning)
|
||||
const stileWidth = mmToMeters(40);
|
||||
const railDepth = mmToMeters(40);
|
||||
|
||||
// Get divider positions for glass patterns (backward compatibility)
|
||||
const dividerPositions = getDividerPositions(gridType, height);
|
||||
|
||||
return (
|
||||
@@ -190,6 +201,7 @@ export function Door3DEnhanced() {
|
||||
part={part}
|
||||
frameColor={frameColor}
|
||||
finish={finish}
|
||||
glassColor={glassColor}
|
||||
/>
|
||||
))}
|
||||
|
||||
@@ -208,13 +220,12 @@ export function Door3DEnhanced() {
|
||||
{ depth: 0.01, bevelEnabled: false },
|
||||
]}
|
||||
/>
|
||||
<GlassMaterial />
|
||||
<GlassMaterial glassColor={glassColor} />
|
||||
</mesh>
|
||||
)}
|
||||
|
||||
{glassPattern === "dt10-ushape" && dividerPositions.length > 0 && (
|
||||
<>
|
||||
{/* Top section - Inverted U */}
|
||||
<mesh
|
||||
position={[0, (doorHeight / 4 + dividerPositions[0]) / 2, 0]}
|
||||
castShadow
|
||||
@@ -229,10 +240,9 @@ export function Door3DEnhanced() {
|
||||
{ depth: 0.01, bevelEnabled: false },
|
||||
]}
|
||||
/>
|
||||
<GlassMaterial />
|
||||
<GlassMaterial glassColor={glassColor} />
|
||||
</mesh>
|
||||
|
||||
{/* Bottom section - Normal U */}
|
||||
<mesh
|
||||
position={[
|
||||
0,
|
||||
@@ -255,7 +265,7 @@ export function Door3DEnhanced() {
|
||||
{ depth: 0.01, bevelEnabled: false },
|
||||
]}
|
||||
/>
|
||||
<GlassMaterial />
|
||||
<GlassMaterial glassColor={glassColor} />
|
||||
</mesh>
|
||||
</>
|
||||
)}
|
||||
@@ -264,58 +274,22 @@ export function Door3DEnhanced() {
|
||||
|
||||
{/* PROFESSIONAL 3D HANDLES */}
|
||||
{handle === "beugelgreep" && (
|
||||
<Beugelgreep
|
||||
finish={finish}
|
||||
doorWidth={doorWidth}
|
||||
doorHeight={doorHeight}
|
||||
railDepth={railDepth}
|
||||
stileWidth={stileWidth}
|
||||
/>
|
||||
<Beugelgreep finish={finish} doorWidth={doorWidth} doorHeight={doorHeight} railDepth={railDepth} stileWidth={stileWidth} />
|
||||
)}
|
||||
{handle === "hoekgreep" && (
|
||||
<Hoekgreep
|
||||
finish={finish}
|
||||
doorWidth={doorWidth}
|
||||
doorHeight={doorHeight}
|
||||
railDepth={railDepth}
|
||||
stileWidth={stileWidth}
|
||||
/>
|
||||
<Hoekgreep finish={finish} doorWidth={doorWidth} doorHeight={doorHeight} railDepth={railDepth} stileWidth={stileWidth} />
|
||||
)}
|
||||
{handle === "maangreep" && (
|
||||
<Maangreep
|
||||
finish={finish}
|
||||
doorWidth={doorWidth}
|
||||
doorHeight={doorHeight}
|
||||
railDepth={railDepth}
|
||||
stileWidth={stileWidth}
|
||||
/>
|
||||
<Maangreep finish={finish} doorWidth={doorWidth} doorHeight={doorHeight} railDepth={railDepth} stileWidth={stileWidth} />
|
||||
)}
|
||||
{handle === "ovaalgreep" && (
|
||||
<Ovaalgreep
|
||||
finish={finish}
|
||||
doorWidth={doorWidth}
|
||||
doorHeight={doorHeight}
|
||||
railDepth={railDepth}
|
||||
stileWidth={stileWidth}
|
||||
/>
|
||||
<Ovaalgreep finish={finish} doorWidth={doorWidth} doorHeight={doorHeight} railDepth={railDepth} stileWidth={stileWidth} />
|
||||
)}
|
||||
{handle === "klink" && (
|
||||
<Klink
|
||||
finish={finish}
|
||||
doorWidth={doorWidth}
|
||||
doorHeight={doorHeight}
|
||||
railDepth={railDepth}
|
||||
stileWidth={stileWidth}
|
||||
/>
|
||||
<Klink finish={finish} doorWidth={doorWidth} doorHeight={doorHeight} railDepth={railDepth} stileWidth={stileWidth} />
|
||||
)}
|
||||
{handle === "u-greep" && (
|
||||
<UGreep
|
||||
finish={finish}
|
||||
doorWidth={doorWidth}
|
||||
doorHeight={doorHeight}
|
||||
railDepth={railDepth}
|
||||
stileWidth={stileWidth}
|
||||
/>
|
||||
<UGreep finish={finish} doorWidth={doorWidth} doorHeight={doorHeight} railDepth={railDepth} stileWidth={stileWidth} />
|
||||
)}
|
||||
</group>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user