双面平面上的阴影伪影

【问题标题】：Shadow artifacts on double sided plane双面平面上的阴影伪影
【发布时间】：2015-09-13 00:54:30
【问题描述】：

当我在双面平面上投射光时，我看到了一个有故障的伪影。有谁知道它为什么存在以及我应该怎么做才能避免这个问题？提前致谢！

我检查了是否可以在其他任何地方找到这个问题，但令人惊讶的是我找不到。

/** Plane that causes glitch. */
function addPlane(x, y, z, size) {
  var geometry = new THREE.PlaneGeometry( size, size, 1, 1 );
  var material = new THREE.MeshPhongMaterial({color: 0x0077aa, side: THREE.DoubleSide});
  var plane = new THREE.Mesh(geometry, material);
  plane.castShadow = true;
  plane.receiveShadow = true;
  plane.position.set(x, z, y);
  plane.rotateX(Math.PI * 1.5);
  scene.add(plane);
}

这是我的代码：http://jsfiddle.net/scjcvx3k/2/。我试图只输入与这个问题相关的代码。

【问题讨论】：

标签： three.js

【解决方案1】：

您正在从自我阴影中获得伪影。你有两个选择。一是设置

plane.receiveShadow = false;

另一种是设置light.shadowBias。

light.shadowBias = -0.001;

不幸的是，设置 shadowBias 可能会导致另一个工件：“Peter Panning”。

如果您想了解有关这些问题的更多信息，请在 Google 上搜索这些主题。

更新小提琴：http://jsfiddle.net/scjcvx3k/7/

三个.js 71

【讨论】：

谢谢！这有帮助。此外，我发现“阴影痤疮”是一个很好的搜索关键词。这意味着错误的自我阴影。