双面飞机上的阴影瑕疵

Yat*_*oom 1 three.js

当我在双面飞机上投光时,我看到了一个小故障的神器.有谁知道为什么它存在,我该怎么做才能避免这个问题?提前致谢!

我检查过我是否能在其他任何地方找到这个问题,但令人惊讶的是我不能.

毛躁的神器

/** 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);
}
Run Code Online (Sandbox Code Playgroud)

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

Wes*_*ley 6

你正在从自我阴影中获取文物.你有两个选择.一个是设定

plane.receiveShadow = false;
Run Code Online (Sandbox Code Playgroud)

另一个是设定light.shadowBias.

light.shadowBias = -0.001;
Run Code Online (Sandbox Code Playgroud)

不幸的是,设置shadowBias可能导致另一件神器:"Peter Panning".

如果您想了解有关问题的更多信息,请参阅Google这些主题.

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

three.js 71