Three.js阴影不显示问题求助：代码排查与修正

你的代码里存在一个关键错误，直接导致阴影无法正常显示：

• 地面接收阴影的对象设置错误：你给plane（几何体实例）设置了receiveShadow = true，但Three.js中只有Mesh对象（此处为planeObj）才能启用接收阴影的属性。正确的写法应该是给planeObj设置该属性，而非几何体本身。

修正后的地面相关代码片段：

//add plane object: ground
const plane = new THREE.PlaneGeometry(20, 20, 1, 1)
const planeMaterial = new THREE.MeshStandardMaterial({
  color: 0xeeeeee,
})

const planeObj = new THREE.Mesh(plane, planeMaterial)
planeObj.position.y = -1
planeObj.rotation.x = -0.5 * Math.PI
planeObj.receiveShadow = true // 修正为给Mesh对象设置接收阴影
scene.add(planeObj)

另外补充两个优化点（非必须，但能提升阴影显示效果）：

• 调整PointLight的阴影相机范围，避免阴影被意外裁剪：

  light.shadow.camera.near = 0.1;
  light.shadow.camera.far = 10;
  

• 适当提高阴影贴图分辨率，让阴影边缘更平滑清晰：

  light.shadow.mapSize.width = 1024;
  light.shadow.mapSize.height = 1024;
  

内容的提问来源于stack exchange，提问作者snyya8