3d788740cb
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>
1211 lines
42 KiB
JavaScript
1211 lines
42 KiB
JavaScript
import { Base, Geometry, Subtraction } from "@react-three/csg";
|
|
import { useTexture, useGLTF, Stats } from "@react-three/drei";
|
|
import {
|
|
useContext,
|
|
useEffect,
|
|
useRef,
|
|
useState,
|
|
useCallback,
|
|
useMemo,
|
|
} from "react";
|
|
import { debounce, throttle } from "lodash";
|
|
import * as THREE from "three";
|
|
import { MyContext } from "./data/contextapi";
|
|
import { invalidate, useLoader, useThree } from "@react-three/fiber";
|
|
import { gsap } from "gsap/gsap-core";
|
|
import Stalen from "./Stalen";
|
|
import Structure from "./Structure";
|
|
import Handle from "./handle";
|
|
import { Box } from "@react-three/drei";
|
|
// Add these definitions at the top
|
|
const bulbGeometry = new THREE.SphereGeometry(0.0002, 16, 8);
|
|
const bulbMat = new THREE.MeshStandardMaterial({
|
|
emissive: 0xffffff,
|
|
emissiveIntensity: 1,
|
|
color: 0x000000,
|
|
});
|
|
export default function DoorHole() {
|
|
const {
|
|
type,
|
|
width,
|
|
height,
|
|
frameType,
|
|
frameSize,
|
|
doorConfig,
|
|
sidePannel,
|
|
sidePannelSize,
|
|
setStalenPart,
|
|
stalenType,
|
|
setWidth,
|
|
stalenPart,
|
|
sidePannelConfig,
|
|
open,
|
|
setOpen,
|
|
holeWidth,
|
|
setHoleWidth,
|
|
inprogress,
|
|
setInprogress,
|
|
} = useContext(MyContext);
|
|
const [maxWidth, setMaxWidth] = useState();
|
|
const containerRef = useRef(null);
|
|
const [sizePannel, setSizePannel] = useState(0);
|
|
const [rSizePannel, setRSizePannel] = useState(0);
|
|
const [firstStructure, setFirstStructure] = useState({
|
|
fixedPosition: 0,
|
|
viewPosition: 0,
|
|
handlePostion: 0,
|
|
});
|
|
const [secondStructure, setSecondStructure] = useState({
|
|
fixedPosition: 0,
|
|
viewPosition: 0,
|
|
handlePostion: 0,
|
|
sizePannel: 0,
|
|
});
|
|
const [thirdStructure, setThirdStructure] = useState({
|
|
fixedPosition: 0,
|
|
viewPosition: 0,
|
|
handlePostion: 0,
|
|
sizePannel: 0,
|
|
});
|
|
const [wallStructure, setWallStructure] = useState({
|
|
position: 0,
|
|
width: 0,
|
|
});
|
|
|
|
const secondStructureRef = useRef({});
|
|
const firstStructureRef = useRef({});
|
|
const thirdStructureRef = useRef({});
|
|
|
|
const [updated, setUpdated] = useState(false);
|
|
|
|
const isInitialRender = useRef(true);
|
|
|
|
const texture_bottom = useTexture(frameType);
|
|
const texture_wall = useTexture(frameType);
|
|
const texture = useTexture(frameType);
|
|
const texture_wall_door = useTexture(frameType);
|
|
|
|
const bulbLight = useRef();
|
|
const ambientLight = useRef();
|
|
// Inside your component, probably near the return statement
|
|
|
|
useEffect(() => {
|
|
// Create a new directional light
|
|
// const light = new THREE.DirectionalLight(0xffffff, 2, 0, 0); // Increased intensity to 2
|
|
// light.add(new THREE.Mesh(bulbGeometry, bulbMat));
|
|
// light.position.set(-5, 7, 15); // Adjust the position as needed
|
|
// light.castShadow = true; // Enable shadow casting
|
|
// // Set the rotatio9n of the light
|
|
// light.rotation.set(0, 0, 0); // Example rotation values in radians
|
|
|
|
// // Assign the light to a variable or add to the scene
|
|
// bulbLight.current = light;
|
|
|
|
// Create a SpotLight
|
|
const directionalLight = new THREE.PointLight(0xffffe3, 70); // White light with intensity 1
|
|
|
|
// Set the position of the light
|
|
directionalLight.position.set(-5, 7, 15);
|
|
|
|
// Configure shadow properties
|
|
directionalLight.castShadow = true;
|
|
|
|
// Shadow map size (higher values give better quality shadows)
|
|
directionalLight.shadow.mapSize.width = 4096; // Default is 512
|
|
directionalLight.shadow.mapSize.height = 4096; // Default is 512
|
|
|
|
// Shadow camera properties
|
|
directionalLight.shadow.camera.left = -10;
|
|
directionalLight.shadow.camera.right = 20;
|
|
directionalLight.shadow.camera.top = 10;
|
|
directionalLight.shadow.camera.bottom = -10;
|
|
directionalLight.shadow.camera.near = 1;
|
|
directionalLight.shadow.camera.far = 20;
|
|
|
|
// Optionally adjust shadow bias to reduce shadow artifacts
|
|
directionalLight.shadow.bias = -0.001;
|
|
|
|
bulbLight.current = directionalLight;
|
|
// Create an ambient light with a specified intensity
|
|
const ambientlight = new THREE.AmbientLight(0xffffff, 30); // Color is white (0xffffff) and intensity is 0.5
|
|
|
|
// Optionally, you can change the intensity or color later
|
|
ambientlight.intensity = 1.3; // Adjust intensity as needed
|
|
|
|
ambientLight.current = ambientlight; // = console.log("Light setup completed");
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
const wallPosition =
|
|
doorConfig == "enkele" &&
|
|
(sidePannel == "links" || sidePannel == "rechts")
|
|
? sidePannel == "links"
|
|
? (doorWidth - sidePannelWidth) / 2
|
|
: -(doorWidth - sidePannelWidth) / 2
|
|
: doorConfig == "enkele" && sidePannel == "beide"
|
|
? 0
|
|
: doorConfig == "dubbele" &&
|
|
(sidePannel == "links" ||
|
|
sidePannel == "rechts" ||
|
|
sidePannel == "beide")
|
|
? 0
|
|
: sizePannel;
|
|
|
|
const wallWidth =
|
|
type == "vast-stalen" &&
|
|
(stalenType == "divider" || stalenType == "tussen")
|
|
? stalenType == "divider"
|
|
? 4 * (doorWidth + 4 * frameSize)
|
|
: (0.06 * width + 4 * frameSize + (stalenPart - 1) * 3.5 * frameSize)
|
|
: ((doorConfig == "enkele" &&
|
|
(sidePannel == "links" || sidePannel == "rechts")) ||
|
|
(doorConfig != "enkele" && sidePannel == "geen")
|
|
? doorConfig != "enkele" && sidePannel == "geen"
|
|
? doorWidth * 2 + 8 * frameSize
|
|
: doorWidth + sidePannelWidth + 8 * frameSize
|
|
: (doorConfig == "enkele" && sidePannel == "beide") ||
|
|
(doorConfig == "dubbele" &&
|
|
(sidePannel == "rechts" || sidePannel == "links"))
|
|
? doorConfig == "enkele"
|
|
? doorWidth + 2 * sidePannelWidth + 12 * frameSize
|
|
: 2 * doorWidth + sidePannelWidth + 12 * frameSize
|
|
: doorConfig == "dubbele" && sidePannel == "beide"
|
|
? 2 * doorWidth + 2 * sidePannelWidth + 16 * frameSize
|
|
: doorWidth + 4 * frameSize) +
|
|
(type == "Scharnier" ? 2 * frameWidth : 0);
|
|
|
|
setWallStructure({
|
|
position: wallPosition,
|
|
width: wallWidth,
|
|
});
|
|
|
|
const firstDoorWidth =
|
|
(doorConfig == "enkele" && sidePannel == "links"
|
|
? sidePannelSize
|
|
: width) *
|
|
0.06 +
|
|
3 * frameSize;
|
|
|
|
const secondDoorWidth =
|
|
(doorConfig == "enkele" &&
|
|
(sidePannel == "rechts" || sidePannel == "beide")
|
|
? sidePannelSize
|
|
: doorConfig == "dubbele" && sidePannel == "rechts"
|
|
? sidePannelSize
|
|
: width) *
|
|
0.06 +
|
|
3 * frameSize;
|
|
|
|
const thirdDoorWidth =
|
|
(doorConfig == "dubbele" &&
|
|
(sidePannel == "links" || sidePannel == "beide")
|
|
? sidePannelSize
|
|
: doorConfig == "enkele" && sidePannel == "beide"
|
|
? sidePannelSize
|
|
: width) *
|
|
0.06 +
|
|
3 * frameSize;
|
|
|
|
let fixedPosition = -firstDoorWidth / 2 - 1.25 * frameSize;
|
|
let viewPosition = firstDoorWidth / 2;
|
|
let handlePostion = firstDoorWidth / 2;
|
|
|
|
let secondFixedPosition = -secondDoorWidth / 2 - 1.25 * frameSize;
|
|
let secondViewPosition = secondDoorWidth / 2;
|
|
let secondHandlePostion = secondDoorWidth / 2;
|
|
|
|
let thirdFixedPosition = -thirdDoorWidth / 2 - 1.25 * frameSize;
|
|
let thirdViewPosition = thirdDoorWidth / 2;
|
|
let thirdHandlePostion = thirdDoorWidth / 2;
|
|
|
|
if (doorConfig == "enkele") {
|
|
if (sidePannel == "links" || sidePannel == "rechts") {
|
|
fixedPosition = -firstDoorWidth - 1.25 * frameSize;
|
|
secondFixedPosition = secondDoorWidth - 1.25 * frameSize;
|
|
secondHandlePostion = secondDoorWidth / 2;
|
|
} else if (sidePannel == "beide") {
|
|
secondFixedPosition =
|
|
doorWidth / 2 + secondDoorWidth + 0.55 * frameSize;
|
|
thirdFixedPosition = -(doorWidth / 2 + secondDoorWidth + 3 * frameSize);
|
|
}
|
|
} else {
|
|
if (sidePannel == "geen") {
|
|
fixedPosition = -firstDoorWidth - 1.25 * frameSize;
|
|
secondFixedPosition = secondDoorWidth - 1.25 * frameSize;
|
|
} else if (sidePannel == "rechts") {
|
|
fixedPosition = doorWidth - sidePannelWidth / 2 + 0.5 * frameSize;
|
|
secondFixedPosition = doorWidth + sidePannelWidth / 2 + 4 * frameSize;
|
|
viewPosition = -firstDoorWidth / 2;
|
|
handlePostion = -firstDoorWidth / 2;
|
|
thirdFixedPosition = -doorWidth - sidePannelWidth / 2 - 6 * frameSize;
|
|
} else if (sidePannel == "beide") {
|
|
fixedPosition = -firstDoorWidth - 1.25 * frameSize;
|
|
secondFixedPosition = secondDoorWidth - 1 * frameSize;
|
|
// thirdFixedPosition = (-maxWidth / 2) * 0.06 - 7.5 * frameSize;
|
|
thirdFixedPosition =
|
|
-doorWidth - sidePannelSize * 0.06 - 7.5 * frameSize;
|
|
} else if (sidePannel == "links") {
|
|
fixedPosition = -doorWidth + sidePannelWidth / 2 - 2.5 * frameSize;
|
|
secondFixedPosition = doorWidth + sidePannelWidth / 2 + 4 * frameSize;
|
|
|
|
thirdFixedPosition = -doorWidth - sidePannelWidth / 2 - 6 * frameSize;
|
|
}
|
|
}
|
|
|
|
const firstStructure = {
|
|
fixedPosition: fixedPosition,
|
|
viewPosition: viewPosition,
|
|
handlePostion: handlePostion,
|
|
};
|
|
const secondStructure = {
|
|
fixedPosition: secondFixedPosition,
|
|
viewPosition: secondViewPosition,
|
|
handlePostion: secondHandlePostion,
|
|
};
|
|
const thirdStructure = {
|
|
fixedPosition: thirdFixedPosition,
|
|
viewPosition: thirdViewPosition,
|
|
handlePostion: thirdHandlePostion,
|
|
};
|
|
|
|
setFirstStructure(firstStructure);
|
|
setSecondStructure(secondStructure);
|
|
setThirdStructure(thirdStructure);
|
|
|
|
firstStructureRef.current = firstStructure;
|
|
secondStructureRef.current = secondStructure;
|
|
thirdStructureRef.current = thirdStructure;
|
|
}, [
|
|
doorConfig,
|
|
maxWidth,
|
|
sidePannel,
|
|
sizePannel,
|
|
sidePannelSize,
|
|
stalenType,
|
|
type,
|
|
width,
|
|
stalenPart,
|
|
]);
|
|
// Load textures using useLoader
|
|
const [diffuse_bottom, bump_bottom, roughness_bottom] = useLoader(
|
|
THREE.TextureLoader,
|
|
[
|
|
"textures/floor texture.jpeg",
|
|
"textures/bump_map.png",
|
|
"textures/roughness_map.png",
|
|
]
|
|
);
|
|
const [diffuse_wall, bump_wall, roughness_wall] = useLoader(
|
|
THREE.TextureLoader,
|
|
["textures/wall-1.jpg", "textures/wall-1.jpg", "textures/wall-1.jpg"]
|
|
);
|
|
|
|
const [diffuse_wall_door, bump_wall_door, roughness_wall_door] = useLoader(
|
|
THREE.TextureLoader,
|
|
["textures/wall-2.jpg", "textures/wall-2.jpg", "textures/wall-2.jpg"]
|
|
);
|
|
// Set texture properties
|
|
[diffuse_bottom, bump_bottom, roughness_bottom].forEach((texture_bottom) => {
|
|
texture_bottom.wrapS = THREE.RepeatWrapping;
|
|
texture_bottom.wrapT = THREE.RepeatWrapping;
|
|
texture_bottom.anisotropy = 4;
|
|
texture_bottom.repeat.set(2, 4);
|
|
texture_bottom.bumpScale = 0.00001; // Set bumpScale on the texture itself
|
|
});
|
|
|
|
[diffuse_wall, bump_wall, roughness_wall].forEach((texture_wall) => {
|
|
texture_wall.wrapS = THREE.RepeatWrapping;
|
|
texture_wall.wrapT = THREE.RepeatWrapping;
|
|
texture_wall.anisotropy = 4;
|
|
texture_wall.repeat.set(25.2, 25.2);
|
|
texture_wall.bumpScale = 0.01; // Set bumpScale on the texture itself
|
|
});
|
|
|
|
[diffuse_wall_door, bump_wall_door, roughness_wall_door].forEach(
|
|
(texture_wall_door) => {
|
|
texture_wall_door.wrapS = THREE.RepeatWrapping;
|
|
texture_wall_door.wrapT = THREE.RepeatWrapping;
|
|
texture_wall_door.anisotropy = 4;
|
|
texture_wall_door.repeat.set(25.2, 25.2);
|
|
texture_wall_door.bumpScale = 0.01; // Set bumpScale on the texture itself
|
|
}
|
|
);
|
|
|
|
const frameWidth = 0.19;
|
|
const frameHeight = 0.053 * height;
|
|
const frameDepth = 0.19;
|
|
|
|
const doorWidth = useMemo(() => 0.06 * width, [width]);
|
|
const sidePannelWidth = useMemo(
|
|
() => 0.06 * sidePannelSize,
|
|
[sidePannelSize]
|
|
);
|
|
const doorHeightn = useMemo(() => 0.053 * height, [height]);
|
|
const floorMat = useMemo(() => {
|
|
const material = new THREE.MeshStandardMaterial({
|
|
roughness: 0.8,
|
|
color: 0xffffff,
|
|
metalness: 0.2,
|
|
map: diffuse_bottom,
|
|
bumpMap: bump_bottom,
|
|
roughnessMap: roughness_bottom,
|
|
castShadow: true,
|
|
});
|
|
material.bumpScale = 1;
|
|
return material;
|
|
}, [diffuse_bottom, bump_bottom, roughness_bottom]);
|
|
|
|
const wallMat = useMemo(() => {
|
|
const material = new THREE.MeshStandardMaterial({
|
|
roughness: 0.8,
|
|
color: 0x777777,
|
|
metalness: 0.2,
|
|
map: diffuse_wall,
|
|
bumpMap: bump_wall,
|
|
roughnessMap: roughness_wall,
|
|
castShadow: true,
|
|
});
|
|
material.bumpScale = 1;
|
|
return material;
|
|
}, [diffuse_wall, bump_wall, roughness_wall]);
|
|
const behindWallMat = useMemo(() => {
|
|
const material = new THREE.MeshStandardMaterial({
|
|
roughness: 0.8,
|
|
color: 0x777777,
|
|
metalness: 0.2,
|
|
map: diffuse_wall_door,
|
|
bumpMap: bump_wall_door,
|
|
roughnessMap: roughness_wall_door,
|
|
castShadow: true,
|
|
});
|
|
material.bumpScale = 1;
|
|
return material;
|
|
}, [diffuse_wall_door, bump_wall_door, roughness_wall_door]);
|
|
const basewidth = useMemo(() => {
|
|
return (
|
|
0.06 *
|
|
width *
|
|
(sidePannel === "beide" && doorConfig === "enkele"
|
|
? 3
|
|
: sidePannel !== "geen" && doorConfig === "dubbele"
|
|
? 4
|
|
: 2)
|
|
);
|
|
}, [width, sidePannel, doorConfig]);
|
|
|
|
const Csg = useRef();
|
|
const groupRef = useRef();
|
|
const groupref2 = useRef();
|
|
const groupref3 = useRef();
|
|
|
|
const handleAnimation = () => {
|
|
setOpen((prevOpen) => !prevOpen);
|
|
startAnimation();
|
|
};
|
|
|
|
const startAnimation = (isClosing = false) => {
|
|
if (doorConfig === "enkele") {
|
|
if (type === "Schuifdeur") {
|
|
if (sidePannel === "links") {
|
|
gsap.to(groupref2.current.position, {
|
|
x: isClosing
|
|
? secondStructureRef.current.fixedPosition
|
|
: open
|
|
? secondStructureRef.current.fixedPosition
|
|
: doorConfig === "dubbele" ||
|
|
sidePannel === "links" ||
|
|
sidePannel === "rechts"
|
|
? -doorWidth * 0.01
|
|
: doorWidth * 1.3,
|
|
duration: 1.5,
|
|
ease: "power3.out",
|
|
onUpdate: invalidate,
|
|
});
|
|
} else {
|
|
gsap.to(groupRef.current.position, {
|
|
x: isClosing
|
|
? firstStructureRef.current.fixedPosition
|
|
: open
|
|
? firstStructureRef.current.fixedPosition
|
|
: sidePannel === "rechts"
|
|
? -doorWidth * 0.05
|
|
: -doorWidth * 1.3,
|
|
duration: 1.5,
|
|
ease: "power3.out",
|
|
onUpdate: invalidate,
|
|
});
|
|
}
|
|
} else {
|
|
if (sidePannel !== "links") {
|
|
gsap.to(groupRef.current.rotation, {
|
|
y: isClosing ? 0 : open ? 0 : -Math.PI / 2,
|
|
duration: 1.5,
|
|
ease: "power3.out",
|
|
onUpdate: invalidate,
|
|
});
|
|
}
|
|
if (doorConfig === "dubbele" || sidePannel === "links") {
|
|
gsap.to(groupref2.current.rotation, {
|
|
y: isClosing ? -Math.PI : open ? -Math.PI : -Math.PI / 2,
|
|
duration: 1.5,
|
|
ease: "power3.out",
|
|
onUpdate: invalidate,
|
|
});
|
|
}
|
|
}
|
|
} else {
|
|
if (type === "Schuifdeur") {
|
|
if (sidePannel === "links") {
|
|
gsap.to(groupref2.current.position, {
|
|
x: isClosing
|
|
? secondStructureRef.current.fixedPosition
|
|
: open
|
|
? secondStructureRef.current.fixedPosition
|
|
: doorWidth * 2.2,
|
|
duration: 1.5,
|
|
ease: "power3.out",
|
|
onUpdate: invalidate,
|
|
});
|
|
gsap.to(groupRef.current.position, {
|
|
x: isClosing
|
|
? firstStructureRef.current.fixedPosition
|
|
: open
|
|
? firstStructureRef.current.fixedPosition
|
|
: -doorWidth * 1.5,
|
|
duration: 1.5,
|
|
ease: "power3.out",
|
|
onUpdate: invalidate,
|
|
});
|
|
} else if (sidePannel === "rechts") {
|
|
gsap.to(groupRef.current.position, {
|
|
x: isClosing
|
|
? firstStructureRef.current.fixedPosition
|
|
: open
|
|
? firstStructureRef.current.fixedPosition
|
|
: doorWidth * 1.4,
|
|
duration: 1.5,
|
|
ease: "power3.out",
|
|
onUpdate: invalidate,
|
|
});
|
|
gsap.to(thirdStructure.fixedPosition, {
|
|
x: isClosing
|
|
? (-doorWidth / 2) * 3.15
|
|
: open
|
|
? (-doorWidth / 2) * 3.15
|
|
: -doorWidth * 2.2,
|
|
duration: 1.5,
|
|
ease: "power3.out",
|
|
onUpdate: invalidate,
|
|
});
|
|
} else {
|
|
gsap.to(groupref2.current.position, {
|
|
x: isClosing
|
|
? secondStructureRef.current.fixedPosition
|
|
: open
|
|
? secondStructureRef.current.fixedPosition
|
|
: doorConfig === "dubbele" ||
|
|
sidePannel === "links" ||
|
|
sidePannel === "rechts"
|
|
? doorWidth * 1.8
|
|
: doorWidth * 1.3,
|
|
duration: 1.5,
|
|
ease: "power3.out",
|
|
onUpdate: invalidate,
|
|
});
|
|
gsap.to(groupRef.current.position, {
|
|
x: isClosing
|
|
? firstStructureRef.current.fixedPosition
|
|
: open
|
|
? firstStructureRef.current.fixedPosition
|
|
: doorConfig === "dubbele" ||
|
|
sidePannel === "links" ||
|
|
sidePannel === "rechts"
|
|
? -doorWidth * 1.8
|
|
: -doorWidth * 1.3,
|
|
duration: 1.5,
|
|
ease: "power3.out",
|
|
onUpdate: invalidate,
|
|
});
|
|
}
|
|
} else {
|
|
if (sidePannel === "rechts") {
|
|
gsap.to(groupRef.current.rotation, {
|
|
y: isClosing ? 0 : open ? 0 : Math.PI / 2,
|
|
duration: 1.5,
|
|
ease: "power3.out",
|
|
onUpdate: invalidate,
|
|
});
|
|
gsap.to(groupref3.current.rotation, {
|
|
y: isClosing ? 0 : open ? 0 : -Math.PI / 2,
|
|
duration: 1.5,
|
|
ease: "power3.out",
|
|
onUpdate: invalidate,
|
|
});
|
|
} else if (sidePannel === "links") {
|
|
gsap.to(groupref2.current.rotation, {
|
|
y: isClosing ? -Math.PI : open ? -Math.PI : -Math.PI / 2,
|
|
duration: 1.5,
|
|
ease: "power3.out",
|
|
onUpdate: invalidate,
|
|
});
|
|
gsap.to(groupRef.current.rotation, {
|
|
y: isClosing ? 0 : open ? 0 : -Math.PI / 2,
|
|
duration: 1.5,
|
|
ease: "power3.out",
|
|
onUpdate: invalidate,
|
|
});
|
|
} else {
|
|
gsap.to(groupref2.current.rotation, {
|
|
y: isClosing ? -Math.PI : open ? -Math.PI : -Math.PI / 2,
|
|
duration: 1.5,
|
|
ease: "power3.out",
|
|
onUpdate: invalidate,
|
|
});
|
|
gsap.to(groupRef.current.rotation, {
|
|
y: isClosing ? 0 : open ? 0 : -Math.PI / 2,
|
|
duration: 1.5,
|
|
ease: "power3.out",
|
|
onUpdate: invalidate,
|
|
});
|
|
}
|
|
}
|
|
}
|
|
|
|
if (type === "Schuifdeur" && isClosing) {
|
|
setTimeout(() => {
|
|
setInprogress(false);
|
|
}, 1500);
|
|
} else {
|
|
setInprogress(isClosing ? false : !open);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (isInitialRender.current) {
|
|
isInitialRender.current = false;
|
|
return;
|
|
}
|
|
|
|
const openDoor = () => {
|
|
setOpen(false);
|
|
startAnimation();
|
|
};
|
|
|
|
const closeDoor = () => {
|
|
setOpen(false);
|
|
|
|
startAnimation(true);
|
|
};
|
|
|
|
let closeTimeout;
|
|
if (type != "vast-stalen") {
|
|
openDoor();
|
|
closeTimeout = setTimeout(() => {
|
|
closeDoor();
|
|
}, 1500);
|
|
}
|
|
|
|
return () => clearTimeout(closeTimeout);
|
|
}, [type, doorConfig, sidePannel]);
|
|
|
|
return (
|
|
<>
|
|
<group scale={(1, 1, 0.4)} position={[0, -0.3, 0.9]}>
|
|
<group position={[wallStructure.position, 5.5, -13.5]}>
|
|
<mesh castShadow receiveShadow>
|
|
<Geometry ref={Csg} castShadow receiveShadow>
|
|
<Base geometry={new THREE.BoxGeometry(40, 30, 1)} />
|
|
<Subtraction
|
|
position={[-0.15, (-23.3 + doorHeightn) * 0.5, 0]}
|
|
visible={false}
|
|
castShadow
|
|
receiveShadow
|
|
>
|
|
<boxGeometry
|
|
args={[
|
|
wallStructure.width,
|
|
doorHeightn + (type == "Scharnier" ? 0.7 : 0.4),
|
|
1,
|
|
]}
|
|
castShadow
|
|
receiveShadow
|
|
/>
|
|
</Subtraction>
|
|
</Geometry>
|
|
<meshStandardMaterial
|
|
map={wallMat.map}
|
|
bumpMap={wallMat.bumpMap}
|
|
roughnessMap={wallMat.roughnessMap}
|
|
/>
|
|
</mesh>
|
|
</group>
|
|
<group position={[0, 5.5, -13.5]}>
|
|
{/* bottom */}
|
|
<mesh
|
|
position={[0, -11.8, 10]}
|
|
rotation={[0, -Math.PI / 2, 0]}
|
|
castShadow
|
|
receiveShadow
|
|
>
|
|
<boxGeometry args={[30, 0.1, 40]} />
|
|
<meshStandardMaterial
|
|
map={floorMat.map}
|
|
bumpMap={floorMat.bumpMap}
|
|
roughnessMap={floorMat.roughnessMap}
|
|
/>
|
|
</mesh>
|
|
{/* celling */}
|
|
{/* <mesh position={[0, -2, 3]} rotation={[0, -Math.PI / 2, 0]}>
|
|
<boxGeometry args={[3, 0.1, 3]} />
|
|
<meshStandardMaterial
|
|
map={floorMat.map}
|
|
bumpMap={floorMat.bumpMap}
|
|
roughnessMap={floorMat.roughnessMap}
|
|
/>
|
|
</mesh> */}
|
|
{/* behind */}
|
|
{/* <mesh
|
|
position={[0, 0, -10]}
|
|
rotation={[-Math.PI / 2, -Math.PI / 2, 0]}
|
|
>
|
|
<boxGeometry args={[30, 0.1, 50]} />
|
|
<meshStandardMaterial
|
|
map={behindWallMat.map}
|
|
bumpMap={behindWallMat.bumpMap}
|
|
roughnessMap={behindWallMat.roughnessMap}
|
|
castShadow
|
|
receiveShadow
|
|
/>
|
|
</mesh> */}
|
|
{/* front */}
|
|
<Box
|
|
position={[0, 0, -10]}
|
|
args={[50, 50, 0.1]} // Pass size as arguments
|
|
castShadow
|
|
receiveShadow
|
|
>
|
|
<meshStandardMaterial attach="material" color={"#ffffff"} />
|
|
</Box>
|
|
<Box
|
|
position={[-123, -3, 0]}
|
|
args={[3, 30, 0.1]} // Pass size as arguments
|
|
castShadow
|
|
receiveShadow
|
|
>
|
|
<meshStandardMaterial attach="material" color={"#ff0000"} />
|
|
</Box>
|
|
{/* wall-right */}
|
|
{bulbLight.current && <primitive object={bulbLight.current} />}
|
|
{ambientLight.current && <primitive object={ambientLight.current} />}
|
|
</group>
|
|
|
|
{type == "Scharnier" && (
|
|
<>
|
|
<group position={[0, (-11.8 + doorHeightn) * 0.5, -13.4]}>
|
|
<mesh
|
|
position={[
|
|
-frameSize,
|
|
doorHeightn / 2 + frameWidth / 2 - 0.08,
|
|
0,
|
|
]}
|
|
castShadow
|
|
receiveShadow
|
|
>
|
|
<boxGeometry
|
|
args={[
|
|
doorConfig == "enkele"
|
|
? sidePannel == "geen"
|
|
? holeWidth * 0.06 + 2 * frameWidth
|
|
: sidePannel == "links" || sidePannel == "rechts"
|
|
? holeWidth * 0.06 + 4 * frameSize + 3 * frameWidth
|
|
: holeWidth * 0.06 + 4 * frameSize + 4 * frameWidth
|
|
: sidePannel == "geen"
|
|
? holeWidth * 0.06 + 2 * frameWidth + 4 * frameSize
|
|
: sidePannel == "links" || sidePannel == "rechts"
|
|
? holeWidth * 0.06 + 6 * frameSize + 2 * frameWidth
|
|
: holeWidth * 0.06 + 4 * frameSize + 5 * frameWidth,
|
|
frameWidth,
|
|
2 * frameDepth,
|
|
]}
|
|
/>
|
|
<meshBasicMaterial map={texture_wall} />
|
|
</mesh>
|
|
<mesh
|
|
position={[
|
|
doorConfig == "enkele"
|
|
? sidePannel == "geen"
|
|
? (holeWidth * 0.06) / 2 + frameWidth / 2
|
|
: sidePannel == "links" || sidePannel == "rechts"
|
|
? (holeWidth * 0.06) / 2 + frameWidth + frameSize
|
|
: (holeWidth * 0.06) / 2 + 2 * frameWidth
|
|
: sidePannel == "geen"
|
|
? (holeWidth * 0.06) / 2 + frameWidth + frameSize
|
|
: sidePannel == "links" || sidePannel == "rechts"
|
|
? (holeWidth * 0.06) / 2 + 2 * frameWidth + frameSize
|
|
: (holeWidth * 0.06) / 2 + 2 * frameWidth + 2 * frameSize,
|
|
-frameWidth,
|
|
0,
|
|
]}
|
|
castShadow
|
|
receiveShadow
|
|
>
|
|
<boxGeometry
|
|
args={[
|
|
frameWidth,
|
|
frameHeight + 2 * frameWidth + 2 * frameSize,
|
|
frameDepth * 2,
|
|
]}
|
|
/>
|
|
<meshBasicMaterial map={texture} />
|
|
</mesh>
|
|
<mesh
|
|
position={[
|
|
doorConfig == "enkele"
|
|
? sidePannel == "geen"
|
|
? -((holeWidth * 0.06) / 2 + 2 * frameWidth)
|
|
: sidePannel == "links" || sidePannel == "rechts"
|
|
? -(
|
|
(holeWidth * 0.06) / 2 +
|
|
2 * frameWidth +
|
|
2 * frameSize
|
|
)
|
|
: -(
|
|
(holeWidth * 0.06) / 2 +
|
|
3 * frameWidth +
|
|
2 * frameSize
|
|
)
|
|
: sidePannel == "geen"
|
|
? -((holeWidth * 0.06) / 2 + frameWidth + 3 * frameSize)
|
|
: sidePannel == "links" || sidePannel == "rechts"
|
|
? -((holeWidth * 0.06) / 2 + 3 * frameWidth + 2 * frameSize)
|
|
: -(
|
|
(holeWidth * 0.06) / 2 +
|
|
3 * frameWidth +
|
|
3 * frameSize
|
|
),
|
|
-frameWidth,
|
|
0,
|
|
]}
|
|
castShadow
|
|
receiveShadow
|
|
>
|
|
<boxGeometry
|
|
args={[
|
|
frameWidth + 0.08,
|
|
frameHeight + 2 * frameWidth + 2 * frameSize,
|
|
frameDepth * 2,
|
|
]}
|
|
/>
|
|
<meshBasicMaterial map={texture} />
|
|
</mesh>
|
|
</group>
|
|
</>
|
|
)}
|
|
|
|
{type == "Schuifdeur" && (
|
|
<>
|
|
{doorConfig == "enkele" && sidePannel != "geen" && (
|
|
<group
|
|
position={[
|
|
-0.3,
|
|
(-12 + doorHeightn) * 0.5,
|
|
type == "Schuifdeur"
|
|
? sidePannel == "links"
|
|
? -12.7
|
|
: sidePannel == "rechts"
|
|
? -12.9
|
|
: -12.8
|
|
: sidePannel == "links"
|
|
? -13.4
|
|
: sidePannel == "rechts"
|
|
? -13.6
|
|
: -13.5,
|
|
]}
|
|
>
|
|
<mesh
|
|
position={[0.2, doorHeightn / 2 + frameWidth / 2, 0]}
|
|
castShadow
|
|
receiveShadow
|
|
>
|
|
<boxGeometry args={[basewidth + 0.7, 0.4, 0.6]} />
|
|
<meshBasicMaterial map={texture} castShadow receiveShadow />
|
|
</mesh>
|
|
</group>
|
|
)}
|
|
{doorConfig == "enkele" && sidePannel == "geen" && (
|
|
<group
|
|
position={[
|
|
(-doorWidth / 2 - 0.15) *
|
|
((doorConfig == "enkele" && sidePannel == "links") ||
|
|
sidePannel == "rechts" ||
|
|
(doorConfig != "enkele" && sidePannel == "geen")
|
|
? 2
|
|
: doorConfig != "enkele" &&
|
|
(sidePannel == "links" || sidePannel == "rechts")
|
|
? 3
|
|
: 1),
|
|
(-12 + doorHeightn) * 0.5,
|
|
type == "Schuifdeur"
|
|
? sidePannel == "links"
|
|
? -12.7
|
|
: sidePannel == "rechts"
|
|
? -12.9
|
|
: -12.8
|
|
: sidePannel == "links"
|
|
? -13.4
|
|
: sidePannel == "rechts"
|
|
? -13.6
|
|
: -13.5,
|
|
]}
|
|
>
|
|
<mesh
|
|
position={[0.2, doorHeightn / 2 + frameWidth / 2, 0]}
|
|
castShadow
|
|
receiveShadow
|
|
>
|
|
<boxGeometry args={[basewidth, 0.4, 0.6]} />
|
|
<meshBasicMaterial map={texture} castShadow receiveShadow />
|
|
</mesh>
|
|
</group>
|
|
)}
|
|
{doorConfig == "dubbele" && (
|
|
<>
|
|
{sidePannel == "geen" || sidePannel == "beide" ? (
|
|
<>
|
|
<group
|
|
position={[
|
|
(doorWidth / 2 - 0.25) *
|
|
((doorConfig == "enkele" && sidePannel == "links") ||
|
|
sidePannel == "rechts" ||
|
|
(doorConfig != "enkele" && sidePannel == "geen")
|
|
? 2
|
|
: doorConfig != "enkele" &&
|
|
(sidePannel == "links" || sidePannel == "rechts")
|
|
? 3
|
|
: 1),
|
|
(-12 + doorHeightn) * 0.5,
|
|
type == "Schuifdeur"
|
|
? sidePannel == "links"
|
|
? -12.7
|
|
: sidePannel == "rechts"
|
|
? -12.9
|
|
: -12.8
|
|
: sidePannel == "links"
|
|
? -13.4
|
|
: sidePannel == "rechts"
|
|
? -13.6
|
|
: -13.5,
|
|
]}
|
|
>
|
|
<mesh
|
|
position={[0.2, doorHeightn / 2 + frameWidth / 2, 0]}
|
|
>
|
|
<boxGeometry args={[basewidth, 0.4, 0.6]} />
|
|
<meshBasicMaterial
|
|
map={texture}
|
|
castShadow
|
|
receiveShadow
|
|
/>
|
|
</mesh>
|
|
</group>
|
|
<group
|
|
position={[
|
|
(-doorWidth / 2) *
|
|
((doorConfig == "enkele" && sidePannel == "links") ||
|
|
sidePannel == "rechts" ||
|
|
(doorConfig != "enkele" && sidePannel == "geen")
|
|
? 2
|
|
: doorConfig != "enkele" &&
|
|
(sidePannel == "links" || sidePannel == "rechts")
|
|
? 3
|
|
: 1),
|
|
(-12 + doorHeightn) * 0.5,
|
|
type == "Schuifdeur"
|
|
? sidePannel == "links"
|
|
? -12.7
|
|
: sidePannel == "rechts"
|
|
? -12.9
|
|
: -12.8
|
|
: sidePannel == "links"
|
|
? -13.4
|
|
: sidePannel == "rechts"
|
|
? -13.6
|
|
: -13.5,
|
|
]}
|
|
>
|
|
<mesh
|
|
position={[0.2, doorHeightn / 2 + frameWidth / 2, 0]}
|
|
>
|
|
<boxGeometry args={[basewidth, 0.4, 0.6]} />
|
|
<meshBasicMaterial
|
|
map={texture}
|
|
castShadow
|
|
receiveShadow
|
|
/>
|
|
</mesh>
|
|
</group>
|
|
</>
|
|
) : (
|
|
<>
|
|
<group
|
|
position={[
|
|
sidePannel != "rechts"
|
|
? doorWidth / 2 - 0.85
|
|
: -doorWidth / 2,
|
|
(-12 + doorHeightn) * 0.5,
|
|
type == "Schuifdeur"
|
|
? sidePannel == "links"
|
|
? -12.7
|
|
: sidePannel == "rechts"
|
|
? -12.9
|
|
: -12.8
|
|
: sidePannel == "links"
|
|
? -13.4
|
|
: sidePannel == "rechts"
|
|
? -13.6
|
|
: -13.5,
|
|
]}
|
|
>
|
|
<mesh
|
|
position={[0.2, doorHeightn / 2 + frameWidth / 2, 0]}
|
|
>
|
|
<boxGeometry args={[basewidth, 0.4, 0.6]} />
|
|
<meshBasicMaterial
|
|
map={texture}
|
|
castShadow
|
|
receiveShadow
|
|
/>
|
|
</mesh>
|
|
</group>
|
|
</>
|
|
)}
|
|
</>
|
|
)}
|
|
</>
|
|
)}
|
|
{type != "vast-stalen" ? (
|
|
<>
|
|
<group
|
|
position={[
|
|
firstStructure.fixedPosition,
|
|
(-12.2 + doorHeightn) * 0.5,
|
|
doorConfig == "enkele"
|
|
? type == "Schuifdeur"
|
|
? sidePannel == "links"
|
|
? -12.7
|
|
: sidePannel == "rechts"
|
|
? -12.9
|
|
: sidePannel == "beide"
|
|
? -12.65
|
|
: -12.8
|
|
: sidePannel == "links"
|
|
? -13.6
|
|
: sidePannel == "rechts"
|
|
? -13.6
|
|
: -13.5
|
|
: type == "Schuifdeur"
|
|
? sidePannel == "links"
|
|
? -12.7
|
|
: sidePannel == "rechts"
|
|
? -12.7
|
|
: sidePannel == "beide"
|
|
? -12.7
|
|
: -12.8
|
|
: sidePannel == "links"
|
|
? -13.6
|
|
: sidePannel == "rechts"
|
|
? -13.6
|
|
: -13.5,
|
|
]}
|
|
ref={groupRef}
|
|
onClick={(event) => {
|
|
event.stopPropagation();
|
|
handleAnimation();
|
|
}}
|
|
>
|
|
<group
|
|
position={[firstStructure.viewPosition, 0, 0]}
|
|
rotation={[
|
|
0,
|
|
doorConfig == "dubbele" && sidePannel == "rechts"
|
|
? -Math.PI
|
|
: 0,
|
|
0,
|
|
]}
|
|
>
|
|
<Structure
|
|
isSide={
|
|
doorConfig == "enkele" && sidePannel == "links"
|
|
? true
|
|
: false
|
|
}
|
|
isRotated={doorConfig == "dubbele" && sidePannel == "rechts"}
|
|
/>
|
|
</group>
|
|
{doorConfig == "enkele" && sidePannel == "links" ? (
|
|
<></>
|
|
) : (
|
|
<group
|
|
position={[firstStructure.handlePostion, 0, 0]}
|
|
rotation={[
|
|
0,
|
|
0,
|
|
doorConfig == "dubbele" && sidePannel == "rechts"
|
|
? Math.PI
|
|
: 0,
|
|
]}
|
|
>
|
|
<Handle />
|
|
</group>
|
|
)}
|
|
</group>
|
|
{(doorConfig == "dubbele" ||
|
|
sidePannel == "links" ||
|
|
sidePannel == "rechts" ||
|
|
sidePannel == "beide") && (
|
|
<group
|
|
position={[
|
|
secondStructure.fixedPosition,
|
|
(-12.2 + doorHeightn) * 0.5,
|
|
doorConfig == "enkele"
|
|
? type == "Schuifdeur"
|
|
? sidePannel == "links"
|
|
? -12.9
|
|
: sidePannel == "rechts"
|
|
? -12.7
|
|
: -12.8
|
|
: sidePannel == "links"
|
|
? -13.6
|
|
: sidePannel == "rechts"
|
|
? -13.6
|
|
: -13.5
|
|
: type == "Schuifdeur"
|
|
? sidePannel == "links" || sidePannel == "beide"
|
|
? -12.7
|
|
: sidePannel == "rechts"
|
|
? -12.9
|
|
: -12.8
|
|
: sidePannel == "links"
|
|
? -13.6
|
|
: sidePannel == "rechts"
|
|
? -13.6
|
|
: -13.5,
|
|
]}
|
|
rotation={[0, -Math.PI, 0]}
|
|
ref={groupref2}
|
|
onClick={(event) => {
|
|
event.stopPropagation();
|
|
handleAnimation();
|
|
}}
|
|
>
|
|
<group position={[secondStructure.viewPosition, 0, 0]}>
|
|
<Structure
|
|
isSide={
|
|
doorConfig == "enkele" &&
|
|
(sidePannel == "rechts" || sidePannel == "beide")
|
|
? true
|
|
: doorConfig == "dubbele" && sidePannel == "rechts"
|
|
? true
|
|
: false
|
|
}
|
|
isRotated={true}
|
|
/>
|
|
</group>
|
|
{((doorConfig == "enkele" && sidePannel == "links") ||
|
|
(doorConfig == "dubbele" && sidePannel != "rechts")) && (
|
|
<group position={[secondStructure.handlePostion, 0, 0]}>
|
|
<Handle />
|
|
</group>
|
|
)}
|
|
</group>
|
|
)}
|
|
{(sidePannel == "beide" ||
|
|
(doorConfig == "dubbele" &&
|
|
(sidePannel == "links" || sidePannel == "rechts"))) && (
|
|
<group
|
|
position={[
|
|
thirdStructure.fixedPosition,
|
|
(-12.2 + doorHeightn) * 0.5,
|
|
type == "Schuifdeur"
|
|
? sidePannel == "links"
|
|
? -12.9
|
|
: sidePannel == "rechts"
|
|
? -12.7
|
|
: -12.8
|
|
: sidePannel == "links"
|
|
? -13.6
|
|
: sidePannel == "rechts"
|
|
? -13.6
|
|
: -13.5,
|
|
]}
|
|
ref={groupref3}
|
|
onClick={(event) => {
|
|
event.stopPropagation();
|
|
handleAnimation();
|
|
}}
|
|
>
|
|
<group position={[thirdStructure.viewPosition, 0, 0]}>
|
|
<Structure
|
|
isSide={
|
|
doorConfig == "dubbele" &&
|
|
(sidePannel == "links" || sidePannel == "beide")
|
|
? true
|
|
: doorConfig == "enkele" && sidePannel == "beide"
|
|
? true
|
|
: false
|
|
}
|
|
/>
|
|
</group>
|
|
{doorConfig == "dubbele" && sidePannel == "rechts" && (
|
|
<group position={[thirdStructure.handlePostion, 0, 0]}>
|
|
<Handle />
|
|
</group>
|
|
)}
|
|
</group>
|
|
)}
|
|
{sidePannel == "beide" && doorConfig == "dubbele" && (
|
|
<group
|
|
position={[
|
|
doorWidth + sidePannelSize * 0.03 + 4 * frameSize,
|
|
(-12 + doorHeightn) * 0.5,
|
|
type == "Schuifdeur"
|
|
? sidePannel == "links"
|
|
? -12.9
|
|
: sidePannel == "rechts"
|
|
? -12.7
|
|
: -12.8
|
|
: sidePannel == "links"
|
|
? -13.4
|
|
: sidePannel == "rechts"
|
|
? -13.6
|
|
: -13.5,
|
|
]}
|
|
rotation={[0, -Math.PI, 0]}
|
|
onClick={(event) => {
|
|
event.stopPropagation();
|
|
handleAnimation();
|
|
}}
|
|
>
|
|
<group position={[0, -frameWidth / 2, 0]}>
|
|
<Structure
|
|
isSide={
|
|
doorConfig == "dubbele" && sidePannel == "beide"
|
|
? true
|
|
: false
|
|
}
|
|
isRotated={true}
|
|
/>
|
|
</group>
|
|
</group>
|
|
)}
|
|
</>
|
|
) : (
|
|
<>
|
|
<Stalen />
|
|
</>
|
|
)}
|
|
</group>
|
|
</>
|
|
);
|
|
}
|