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

【问题标题】：Three.js shadow artifacts on connecting planesThree.js 连接平面上的阴影伪影
【发布时间】：2018-04-23 21:30:29
【问题描述】：

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

我玩弄了 shadow.bias，但没有一个好的结果。

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

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

My code on Plunker

2018 年 4 月 18 日更新

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

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

我不认为问题是自我阴影。阴影是由附近的物体而不是它自己投射的。

Example with simple cubes on jsfiddle

Screenshot with shadows

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

【问题讨论】：

您看到了自阴影伪影。试试 -0.0018 的偏差。更新到当前的 three.js 修订版。避免使用双面材料。
@WestLangley 由于您的评论，我更新了我的问题
您的示例具有隐藏的、内部的、背面的面，这些面正在投射阴影。试试material.shadowSide = THREE.FrontSide——也许设置bias。
使用material.shadowSide = THREE.FrontSide 和bias = -0.004 我得到了一个不错的结果。感谢您的帮助。

标签： three.js

【解决方案1】：

在材质上使用side: THREE.FrontSide和shadowSide: THREE.FrontSide，在灯光上使用shadow.bias = -0.004，我得到了很好的结果。

I updated my plunker

【讨论】：