Three.js点光源阴影位置异常问题求助

嗨，我来帮你搞定这个点光源阴影和物体之间的间隙问题～ 这个问题通常是因为阴影相机的参数设置不合理，或者阴影偏移值调整不到位导致的，咱们一步步来修复：

问题根源分析 #

你代码里的点光源阴影相机设置了 near: 500，而你的物体（mesh）位置在 z: -500、y: -50，点光源在 y:100，两者之间的直线距离大概是530左右。把阴影相机的近裁剪面设为500，就意味着相机的近面几乎贴到了物体上，很容易导致阴影计算时出现“漏拍”，进而产生间隙。另外，你还重复添加了一次点光源到场景里，这也是多余的操作。

具体修复步骤 #

1. 调整阴影相机的近裁剪面
   把阴影相机的 near 值改小，比如设为 10，确保物体完全在阴影相机的视锥体内，这样阴影计算就能完整覆盖物体了。

2. 优化阴影偏移参数
   可以适当调整 shadow.bias 或者加上 shadow.normalBias，来消除阴影和物体之间的微小间隙。不过要注意，bias 不要设得太极端，避免出现阴影 acne（表面的噪点）。

3. 移除重复的光源添加代码
   你代码里连续写了两次 scene.add(light);，删掉其中一次即可。

修改后的关键代码片段 #

// pointlight
var light = new THREE.PointLight(0xffffff, 2.0, 1200);
light.position.y = 100;
light.target = mesh;
light.castShadow = true;
// 调整阴影相机参数，降低near值
light.shadow = new THREE.LightShadow(
  new THREE.PerspectiveCamera(
    100, 
    1, 
    10, // 把near从500改成10
    1000 
  )
);
// 调整阴影偏移，也可以尝试normalBias
light.shadow.bias = -0.005; 
light.shadow.mapSize.width = 512;
light.shadow.mapSize.height = 512;
scene.add(light); // 只保留一次添加

mesh.castShadow = true;
terrain.receiveShadow = true;

额外小提示 #

如果调整后还有轻微间隙，可以试试增大 shadow.mapSize（比如改成1024），更高的阴影贴图分辨率能让阴影边缘更清晰，减少间隙感。

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