feat: add player-following shadow system with soft shadows

Author: lanmower

client/SceneSetup.js

@@ -16,7 +16,9 @@ export function createRenderer(isMobile) {
   const renderer = new THREE.WebGLRenderer({ antialias: !isMobile, powerPreference: 'high-performance' })
   renderer.setSize(window.innerWidth, window.innerHeight)
   renderer.setPixelRatio(isMobile ? Math.min(window.devicePixelRatio * 0.5, 1) : Math.min(window.devicePixelRatio, 2))
-  renderer.shadowMap.enabled = false
+  renderer.shadowMap.enabled = true
+  renderer.shadowMap.type = THREE.PCFShadowMap
+  renderer.shadowMap.autoUpdate = false
   renderer.toneMapping = THREE.ACESFilmicToneMapping
   renderer.toneMappingExposure = 1.0
   renderer.outputColorSpace = THREE.SRGBColorSpace
@@ -33,7 +35,11 @@ export function setupLights(scene) {
   const studio = new THREE.DirectionalLight(0x4488ff, 0.4)
   studio.position.set(-20, 30, -10); studio.castShadow = false; scene.add(studio)
   const sun = new THREE.DirectionalLight(0xffffff, 1.5)
-  sun.position.set(21, 50, 20)
+  sun.position.set(21, 50, 20); sun.castShadow = true
+  sun.shadow.mapSize.set(1024, 1024); sun.shadow.bias = -0.0005; sun.shadow.normalBias = 0.3
+  sun.shadow.radius = 8; sun.shadow.blurSamples = 16
+  sun.shadow.camera.left = -50; sun.shadow.camera.right = 50; sun.shadow.camera.top = 50; sun.shadow.camera.bottom = -50
+  sun.shadow.camera.near = 0.5; sun.shadow.camera.far = 150
   scene.add(sun); scene.add(sun.target)
   const warmupPoint = new THREE.PointLight(0xffffff, 0, 1); scene.add(warmupPoint)
   return { ambient, studio, sun, warmupPoint }

client/app.js

@@ -200,6 +200,12 @@ function animate(ts) {
   if (_terrain) _terrain.update(camera.position)
   if (_vegetation) _vegetation.update(camera.position)
   if (typeof editor!=='undefined') editor.updateGizmo()
+  // Update shadow camera to follow player
+  if (sun && camera.position) {
+    sun.position.set(camera.position.x + 21, 50 + camera.position.y, camera.position.z + 20)
+    sun.target.position.copy(camera.position)
+    sun.target.updateMatrixWorld()
+  }
   if (_shadowDirty&&now-_shadowLastUpdate>=66) { renderer.shadowMap.needsUpdate=true; _shadowDirty=false; _shadowLastUpdate=now }
   renderer.render(scene,camera)
   const frameMs=performance.now()-now; _profileSum+=frameMs; if (++_profileFrames>=120) { console.log(`[frame-profile] fps:${fpsDisplay} avg:${(_profileSum/_profileFrames).toFixed(2)}ms players:${pm.playerMeshes.size} entities:${el.entityMeshes.size}`); _profileFrames=0; _profileSum=0 }