Javascript Three.js-带阴影的bug

我正在用three.js做一些测试，但是我在阴影方面有问题。 您可以在此处看到该错误的屏幕截图：

更准确地说，红色和蓝色是立方几何，地面是平面几何。我试着把地面放在立方测量的中间高度，但这并不能解决问题

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

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

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

---

我已通过设置shadowBias属性修复了该问题

    directionalLight.shadowBias = 0.0015;

---

参见相关问题：这不是完全相同的问题。我尝试了其他方法，但错误仍然存在：(