Three.js 连接平面上的阴影伪影

Question

我的家具模块 3D 模型上出现难看的阴影伪影。它们出现在两个平面连接的地方。这些地方不应该有任何阴影。

带有阴影伪影的屏幕截图

我尝试了Shadow.bias，但没有得到很好的结果。

还有什么我可以尝试摆脱这些阴影吗？

renderer = new THREE.WebGLRenderer({
  alpha: true,
  antialias: true
});
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;

我在 Plunker 上的代码

更新2018-04-18

我按照 WestLangley 的建议更新了 Plunker 上的代码。似乎唯一有影响的是bias的值。

当我设置bias = -0.0018时，我对结果不满意。由于负偏差，所有阴影都不再位于正确的位置。

我不认为问题在于自我阴影。阴影是由附近的物体投射的，而不是由物体本身投射的。

jsfiddle 上的简单立方体示例

有阴影的截图

也许我必须忍受这个问题，唯一的解决方案是与偏见进行权衡。

Answer 1

通过side: THREE.FrontSide材料和光线，shadowSide: THREE.FrontSide我得到了很好的结果。shadow.bias = -0.004

我更新了我的笨蛋