src/pages/page.tsx

@@ -56,12 +56,19 @@ export function HomePage(): React.JSX.Element {
     ({ gl }: { gl: THREE.WebGLRenderer }) => {
       const canvas = gl.domElement;
 
+      gl.shadowMap.enabled = true;
+      gl.shadowMap.type = THREE.PCFShadowMap;
+      gl.shadowMap.autoUpdate = true;
+
       const handleContextLost = (event: Event) => {
         event.preventDefault();
         logger.error("WebGL", "Context lost - GPU resources exhausted");
       };
 
       const handleContextRestored = () => {
+        gl.shadowMap.enabled = true;
+        gl.shadowMap.type = THREE.PCFShadowMap;
+        gl.shadowMap.autoUpdate = true;
         logger.info("WebGL", "Context restored");
       };
 

src/world/Lighting.tsx

@@ -1,7 +1,6 @@
-import { useEffect, useMemo, useRef } from "react";
+import { useEffect, useRef } from "react";
 import { useFrame, useThree } from "@react-three/fiber";
-import { Object3D } from "three";
-import type { AmbientLight, DirectionalLight } from "three";
+import type { AmbientLight, DirectionalLight, Object3D } from "three";
 import {
   AMBIENT_INTENSITY_MAX,
   AMBIENT_INTENSITY_MIN,
@@ -31,12 +30,14 @@ export function Lighting(): React.JSX.Element {
   const camera = useThree((state) => state.camera);
   const ambient = useRef<AmbientLight>(null);
   const sun = useRef<DirectionalLight>(null);
-  const sunTarget = useMemo(() => new Object3D(), []);
+  const sunTarget = useRef<Object3D>(null);
 
   useEffect(() => {
-    if (!sun.current) return;
+    if (!sun.current || !sunTarget.current) return;
 
-    sun.current.target = sunTarget;
+    sun.current.target = sunTarget.current;
+    sun.current.shadow.autoUpdate = true;
+    sun.current.shadow.needsUpdate = true;
     sun.current.shadow.mapSize.width = SHADOW_MAP_SIZE;
     sun.current.shadow.mapSize.height = SHADOW_MAP_SIZE;
     sun.current.shadow.camera.left = -SHADOW_CAMERA_SIZE;
@@ -46,7 +47,7 @@ export function Lighting(): React.JSX.Element {
     sun.current.shadow.camera.near = SHADOW_CAMERA_NEAR;
     sun.current.shadow.camera.far = SHADOW_CAMERA_FAR;
     sun.current.shadow.camera.updateProjectionMatrix();
-  }, [sunTarget]);
+  }, []);
 
   useDebugFolder("Lighting", (folder) => {
     folder.addColor(LIGHTING_STATE, "ambientColor").name("Ambient Color");
@@ -86,9 +87,9 @@ export function Lighting(): React.JSX.Element {
       ambient.current.intensity = LIGHTING_STATE.ambientIntensity;
     }
 
-    if (sun.current) {
-      sunTarget.position.set(camera.position.x, 0, camera.position.z);
-      sunTarget.updateMatrixWorld();
+    if (sun.current && sunTarget.current) {
+      sunTarget.current.position.set(camera.position.x, 0, camera.position.z);
+      sunTarget.current.updateMatrixWorld();
       sun.current.position.set(
         camera.position.x + LIGHTING_STATE.sunX,
         LIGHTING_STATE.sunY,
@@ -96,6 +97,8 @@ export function Lighting(): React.JSX.Element {
       );
       sun.current.color.set(LIGHTING_STATE.sunColor);
       sun.current.intensity = LIGHTING_STATE.sunIntensity;
+      sun.current.updateMatrixWorld();
+      sun.current.shadow.needsUpdate = true;
     }
   });
 
@@ -108,7 +111,6 @@ export function Lighting(): React.JSX.Element {
       />
       <directionalLight
         ref={sun}
-        target={sunTarget}
         position={[
           LIGHTING_STATE.sunX,
           LIGHTING_STATE.sunY,
@@ -118,7 +120,7 @@ export function Lighting(): React.JSX.Element {
         color={LIGHTING_STATE.sunColor}
         castShadow
       />
-      <primitive object={sunTarget} />
+      <object3D ref={sunTarget} />
     </>
   );
 }