连接平面上的Three.js阴影瑕疵

Question

我在家具模块的3D模型上得到了丑陋的阴影瑕疵。它们出现在两个平面相连的位置。在这些地方根本不应有阴影。

Screenshot with shadow artifacts

我玩 shadow.bias ，但没有很好的结果。

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

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

My code on Plunker

更新2018-04-18

我在WestLangley的建议下更新了我在Plunker上的代码。唯一似乎有影响的是偏见的价值。

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

我不认为这个问题是自我遮蔽的。阴影由附近的物体铸造而不是自身。

Example with simple cubes on jsfiddle

Screenshot with shadows

可能我不得不忍受这个问题，唯一的解决方案是与偏见进行权衡。

Answer 1

材料上的side: THREE.FrontSide和shadowSide: THREE.FrontSide以及光上的shadow.bias = -0.004，我得到了不错的结果。

I updated my plunker