import { useRef, useEffect} from 'react'; import { useThree } from '@react-three/fiber'; import * as THREE from 'three'; import { useAzimuth, useElevation, useShadows, useSunPosition, useFloorItems, useWallItems } from '../../../store/store'; import * as CONSTANTS from '../../../types/world/worldConstants'; 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 lightRef = useRef(null); const targetRef = useRef(null); const { controls, gl } = useThree(); const { elevation, setElevation } = useElevation(); const { azimuth, setAzimuth } = useAzimuth(); const { floorItems } = useFloorItems(); const { wallItems } = useWallItems(); useEffect(() => { gl.shadowMap.enabled = true; gl.shadowMap.type = THREE.PCFShadowMap; }, [gl, floorItems, wallItems]); useEffect(() => { if (lightRef.current && targetRef.current) { lightRef.current.target = targetRef.current; } }, []); useEffect(() => { shadowWorker.onmessage = (event) => { const { lightPosition, controlsTarget } = event.data; if (lightRef.current && targetRef.current && controls) { lightRef.current.position.copy(lightPosition); targetRef.current.position.copy(controlsTarget); } }; }, [shadowWorker, controls]); const updateShadows = () => { if (controls && shadowWorker) { const offsetDistance = CONSTANTS.shadowConfig.shadowOffset; const controlsTarget = (controls as any).getTarget(); shadowWorker.postMessage({ controlsTarget, sunPosition, offsetDistance }); } }; useEffect(() => { if (controls && shadows) { updateShadows(); (controls as any).addEventListener('update', updateShadows); return () => { (controls as any).removeEventListener('update', updateShadows); }; } }, [controls, elevation, azimuth, shadows]); return ( <> {/* {(lightRef.current?.shadow) && } */} ); }