Three.js - 阴影错误

Question

我正在用 three.js 做一些测试，但我遇到了阴影问题。 你可以在这里看到错误的截图：https://www.dropbox.com/s/jv91w9fkhfnhzkv/bug%20shadow%20fleche.jpg

更准确地说，红色和蓝色这两个东西是CubeGeometry，而地面是PlaneGeometry。我试图将地面放在 CubeGeometry 的中间高度，但这并不能解决问题。

我尝试了很多不同的设置，但错误仍然存​​在。这是我当前的渲染设置：

directionalLight.shadowMapWidth = 1024;
directionalLight.shadowMapHeight = 1024;

renderer = new THREE.WebGLRenderer( { antialias: true }  );
renderer.shadowMapEnabled = true;
renderer.shadowMapSoft = true;
renderer.shadowMapType = THREE.PCFSoftShadowMap;

Answer 1

我已经通过设置 shadowBias 属性解决了这个问题。

    directionalLight.shadowBias = 0.0015;