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

时间:2018-04-17 08:38:33

标签: three.js

我在家具模块的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

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

1 个答案:

答案 0 :(得分:0)

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

I updated my plunker