Enhance shadow handling and visibility settings across components

This commit is contained in:
2025-07-28 13:05:32 +05:30
parent 10e7f2f8c4
commit 795c69a3d4
6 changed files with 36 additions and 19 deletions

View File

@@ -216,6 +216,7 @@ const GlobalProperties: React.FC = () => {
// setRenderDistance(parseInt(e.target.value));
// }
// }
return (
<div className="global-properties-container">
<section>
@@ -239,12 +240,12 @@ const GlobalProperties: React.FC = () => {
label="Wall Visibility"
onClick={changeWallVisibility}
/>
{/* <InputToggle
<InputToggle
value={shadows}
inputKey="3"
label="Shadows Visibility"
onClick={shadowVisibility}
/> */}
/>
<LabeledButton
label="Reset Camera"
onClick={toggleResetCamera}

View File

@@ -92,6 +92,17 @@ function Model({ asset }: { readonly asset: Asset }) {
}
}, [asset.modelUuid, ikData])
useEffect(() => {
if (gltfScene) {
gltfScene.traverse((child: any) => {
if (child.isMesh) {
child.castShadow = true;
child.receiveShadow = true;
}
})
}
}, [gltfScene]);
useEffect(() => {
setDeletableFloorItem(null);
if (selectedFloorItem === null || selectedFloorItem.userData.modelUuid !== asset.modelUuid) {
@@ -481,6 +492,8 @@ function Model({ asset }: { readonly asset: Asset }) {
rotation={asset.rotation}
visible={asset.isVisible}
userData={{ ...asset, iks: ikData }}
castShadow
receiveShadow
onDoubleClick={(e) => {
e.stopPropagation();
if (!toggleView) {

View File

@@ -10,7 +10,7 @@ import { useToggleView, useWallVisibility } from '../../../../../store/builder/s
import { useBuilderStore } from '../../../../../store/builder/useBuilderStore';
import * as Constants from '../../../../../types/world/worldConstants';
import DecalInstance from '../../../Decal/decalInstance';
// import DecalInstance from '../../../Decal/decalInstance';
import defaultMaterial from '../../../../../assets/textures/floor/wall-tex.png';
import material1 from '../../../../../assets/textures/floor/factory wall texture.jpg';
@@ -63,10 +63,10 @@ function Wall({ wall }: { readonly wall: Wall }) {
const materials = useMemo(() => {
return [
new THREE.MeshStandardMaterial({ color: Constants.wallConfig.defaultColor, side: THREE.DoubleSide, visible: visible }), // Left
new THREE.MeshStandardMaterial({ color: Constants.wallConfig.defaultColor, side: THREE.DoubleSide, visible: visible }), // Right
new THREE.MeshStandardMaterial({ color: Constants.wallConfig.defaultColor, side: THREE.DoubleSide, visible: visible }), // Top
new THREE.MeshStandardMaterial({ color: Constants.wallConfig.defaultColor, side: THREE.DoubleSide, visible: visible }), // Bottom
new THREE.MeshStandardMaterial({ color: Constants.wallConfig.defaultColor, side: THREE.DoubleSide, visible: visible, clipShadows: true }), // Left
new THREE.MeshStandardMaterial({ color: Constants.wallConfig.defaultColor, side: THREE.DoubleSide, visible: visible, clipShadows: true }), // Right
new THREE.MeshStandardMaterial({ color: Constants.wallConfig.defaultColor, side: THREE.DoubleSide, visible: visible, clipShadows: true }), // Top
new THREE.MeshStandardMaterial({ color: Constants.wallConfig.defaultColor, side: THREE.DoubleSide, visible: visible, clipShadows: true }), // Bottom
new THREE.MeshStandardMaterial({
color: Constants.wallConfig.defaultColor,
side: THREE.DoubleSide,
@@ -99,11 +99,15 @@ function Wall({ wall }: { readonly wall: Wall }) {
return (
<mesh
castShadow
receiveShadow
name={`Wall-${wall.wallUuid}`}
key={wall.wallUuid}
userData={wall}
>
<Base
castShadow
receiveShadow
ref={meshRef}
geometry={geometry}
position={[centerX, centerY, centerZ]}

View File

@@ -132,6 +132,7 @@ function Floor({ room }: { room: Point[] }) {
<mesh name="Wall-Floor" rotation={[Math.PI / 2, 0, 0]}>
<Extrude
receiveShadow
castShadow
name="Wall-Floor"
args={[shape, { depth: Constants.floorConfig.height, bevelEnabled: false }]}
position={[0, 0, 0]}

View File

@@ -9,21 +9,17 @@ import {
useTileDistance,
} from "../../../store/builder/store";
import * as CONSTANTS from "../../../types/world/worldConstants";
const shadowWorker = new Worker(
new URL(
"../../../services/factoryBuilder/webWorkers/shadowWorker",
import.meta.url
)
);
const shadowWorker = new Worker(new URL("../../../services/factoryBuilder/webWorkers/shadowWorker", import.meta.url));
export default function Shadows() {
const { shadows, setShadows } = useShadows();
const { sunPosition, setSunPosition } = useSunPosition();
const { shadows } = useShadows();
const { sunPosition } = useSunPosition();
const lightRef = useRef<THREE.DirectionalLight | null>(null);
const targetRef = useRef<THREE.Object3D | null>(null);
const { controls, gl } = useThree();
const { elevation, setElevation } = useElevation();
const { azimuth, setAzimuth } = useAzimuth();
const { elevation } = useElevation();
const { azimuth } = useAzimuth();
const { planeValue } = useTileDistance();
useEffect(() => {

View File

@@ -265,8 +265,10 @@ export const planeConfig: PlaneConfig = {
export const shadowConfig: ShadowConfig = {
shadowOffset: 50, // Offset of the shadow
shadowmapSizewidth: 1024, // Width of the shadow map
shadowmapSizeheight: 1024, // Height of the shadow map
// shadowmapSizewidth: 1024, // Width of the shadow map
// shadowmapSizeheight: 1024, // Height of the shadow map
shadowmapSizewidth: 2048, // Width of the shadow map
shadowmapSizeheight: 2048, // Height of the shadow map
// shadowmapSizewidth: 8192, // Width of the shadow map
// shadowmapSizeheight: 8192, // Height of the shadow map
shadowcamerafar: 70, // Far plane of the shadow camera