import { Center } from "@react-three/drei";
import { useFrame, useThree } from "@react-three/fiber";
import { useRef } from "react";
import { Color, Group, Vector3, Mesh } from "three";
const Walls = () => {
const { scene, camera } = useThree();
const wallContainer = useRef<any>();
const { height, length, width } = { height: 2500, length: 20000, width: 20000 };
useFrame(() => {
const walls = scene.getObjectByName("group_wall") as Group;
const allMeshs: Array<Mesh> = [];
walls.traverse((el: any) => {
if (el['isMesh']) {
allMeshs.push(el);
}
});
allMeshs.forEach((el: Mesh) => {
if (el.userData.normal) {
let v = new Vector3();
const value = v.subVectors(camera.position, el.position).dot(el.userData.normal);
if (value < 0) {
el.visible = false;
} else {
el.visible = true;
}
});
});
return (
<Center top name="group_wall" key={height}>
<group ref={wallContainer}>
{/* Walls */}
<mesh
castShadow
receiveShadow
position={[0, 0, -length / 2 / 1000 + 0.1 / 2]}
userData={{ normal: new Vector3(0, 0, 1) }}
>
<boxGeometry args={[width / 1000, height / 1000, 0.1]} />
<meshPhongMaterial color={new Color('#ECECEC')} />
</mesh>
{/* Other walls here */}
</group>
</Center>
);
};
export default Walls;
Description:
I’m working on a 3D room visualization project using React and Three.js. The room consists of walls and a floor, and I’m trying to render shadows correctly. Everything works fine when I use a room size of { width: 8000, length: 8000, height: 2500 }
, but when I increase the size to { width: 20000, length: 20000, height: 2500 }, the shadow rendering goes haywire
.
I have a Floor component and a Walls component that set up the room and handle shadow casting and receiving. The SceneContents component is responsible for adding directional light and setting up the scene.
