THREE.JS暗影对面的光影

Question

我使用THREE.js r49使用定向光创建2个立方体几何体以在其上投射阴影并获得结果，如下图所示。

我注意到绿色圆圈中的阴影不应该出现，因为方向光在两个立方体后面。我想这是材料问题，我尝试更改各种材料参数以及更改材料类型本身，但结果仍然相同。我还用r50和r51测试了相同的代码并得到了相同的结果。

有人可以给我一些提示如何摆脱那个阴影。

这两个多维数据集都是使用 CubeGeometry 和 MeshLambertMaterial 创建的，如以下代码所示。

代码：

// ambient
var light = new THREE.AmbientLight( 0xcccccc );
scene.add( light );

// the large cube
var p_geometry = new THREE.CubeGeometry(10, 10, 10);
var p_material  = new THREE.MeshLambertMaterial({ambient: 0x808080, color: 0xcccccc});
var p_mesh  = new THREE.Mesh( p_geometry, p_material );
p_mesh.position.set(0, -5, 0);
p_mesh.castShadow = true;
p_mesh.receiveShadow = true;
scene.add(p_mesh);

// the small cube
var geometry = new THREE.CubeGeometry( 2, 2, 2 );
var material = new THREE.MeshLambertMaterial({ambient: 0x808080, color: Math.random() * 0xffffff});
var mesh = new THREE.Mesh( geometry, material );
mesh.position.set(0, 6, 3);
mesh.castShadow = true;
mesh.receiveShadow = true;

// add small cube as the child of large cube
p_mesh.add(mesh);
p_mesh.quaternion.setFromAxisAngle(new THREE.Vector3(0, 1, 0), 0.25 * Math.PI );

// the light source
var light  = new THREE.DirectionalLight( 0xffffff );
light.castShadow = true;
light.position.set(0, 10, -8);  // set it light source to top-behind the cubes
light.target = p_mesh           // target the light to the large cube
light.shadowCameraNear = 5;
light.shadowCameraFar = 25;
light.shadowCameraRight   =  10;
light.shadowCameraLeft    = -10;
light.shadowCameraTop     =  10;
light.shadowCameraBottom  = -10;
light.shadowCameraVisible = true;
scene.add( light );

Answer 1

是的，这是一个已知的，长期存在的WebGLRenderer问题。

问题是在阴影计算中不考虑面法线和光线方向的点积。因此，“阴影从后面透过”。

作为一种解决方法，每张脸都可以使用不同的材质，只有某些材质会接收阴影。

three.js r.71