THREE.js自定义双面三角形几何体SpotLight阴影残缺问题咨询

嘿，刚学THREE.js碰到这种问题太正常啦，别担心！你说的自定义几何体阴影残缺，大概率是下面几个常见原因导致的，咱们一个个来排查：

1. 几何体顶点顺序与法线方向问题 #

THREE.js默认以逆时针顶点顺序定义几何体正面，而阴影计算完全依赖正确的法线方向。如果你的自定义三角形顶点顺序搞反了，或者没有手动生成法线，GPU就没法准确识别受光面，自然会出现阴影残缺的情况。

• 解决办法：
  • 检查你的顶点数组，确保面的顶点是按逆时针顺序定义的；
  • 在创建完几何体后调用 geometry.computeVertexNormals()，让THREE.js自动生成正确的法线数据，这样阴影计算就能准确识别面的朝向了。

2. Spotlight阴影相机参数设置不合理 #

SpotLight的阴影是通过内置的正交相机计算的，如果相机的视锥体范围（near/far、left/right/top/bottom）没有完全覆盖你的几何体，就会出现阴影被裁剪的情况，看起来像是残缺。

• 解决办法：
  • 手动调整阴影相机的参数，示例代码如下：

    spotLight.shadow.camera.near = 0.1;
    spotLight.shadow.camera.far = 100;
    spotLight.shadow.camera.left = -5;
    spotLight.shadow.camera.right = 5;
    spotLight.shadow.camera.top = 5;
    spotLight.shadow.camera.bottom = -5;
    // 别忘了更新相机投影矩阵
    spotLight.shadow.camera.updateProjectionMatrix();
    

  • 可以开启相机辅助线直观调试：scene.add(new THREE.CameraHelper(spotLight.shadow.camera))，这样就能看到阴影相机的范围，确保你的几何体完全在这个范围内。

3. 几何体正反面渲染设置冲突 #

如果你的材质开启了双面渲染，但阴影计算只默认考虑正面，或者反过来，材质只渲染正面但你的几何体的面是反面朝向光源的，都会导致阴影异常。

• 解决办法：
  • 检查材质的 side 属性：如果需要双面都计算阴影，可以设置 material.side = THREE.DoubleSide；
  • 或者确认你的几何体的面是正面朝向光源的，避免反面受光导致阴影计算失效。

4. 阴影贴图分辨率不足 #

SpotLight的阴影贴图分辨率太低的话，会出现边缘残缺、锯齿严重的情况，视觉上也会像阴影不全。

• 解决办法：
  • 适当提高阴影贴图的分辨率，示例代码：

    spotLight.shadow.mapSize.width = 2048;
    spotLight.shadow.mapSize.height = 2048;
    

    数值越高阴影越清晰，但性能消耗也会增加，根据你的场景需求调整即可。

你可以先从计算法线和检查顶点顺序开始排查，这两个是自定义几何体阴影问题最常见的诱因～

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