Enhance shadow handling and visibility settings across components

app/src/components/layout/sidebarRight/properties/GlobalProperties.tsx

@@ -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}

app/src/modules/builder/asset/models/model/model.tsx

@@ -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) {

app/src/modules/builder/wall/Instances/instance/wall.tsx

@@ -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, clipShadows: true }),  // 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, clipShadows: true }),  // 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, clipShadows: true }),  // 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 }),  // 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]}

app/src/modules/builder/wall/Instances/wallInstances.tsx

@@ -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]}

app/src/modules/scene/environment/shadow.tsx

@@ -9,21 +9,17 @@ import {
     useTileDistance,
 } from "../../../store/builder/store";
 import * as CONSTANTS from "../../../types/world/worldConstants";
-const shadowWorker = new Worker(
+
-    new URL(
+const shadowWorker = new Worker(new URL("../../../services/factoryBuilder/webWorkers/shadowWorker", import.meta.url));
-        "../../../services/factoryBuilder/webWorkers/shadowWorker",
-        import.meta.url
-    )
-);
 
 export default function Shadows() {
-    const { shadows, setShadows } = useShadows();
+    const { shadows } = useShadows();
-    const { sunPosition, setSunPosition } = useSunPosition();
+    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 { elevation } = useElevation();
-    const { azimuth, setAzimuth } = useAzimuth();
+    const { azimuth } = useAzimuth();
     const { planeValue } = useTileDistance();
 
     useEffect(() => {

app/src/types/world/worldConstants.ts

@@ -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
+  // shadowmapSizewidth: 1024, // Width of the shadow map
-  shadowmapSizeheight: 1024, // Height 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