THREE.JS 光对面的阴影 [英] THREE.JS Shadow on opposite side of light

问题描述

我使用 THREE.js r49 创建了 2 个立方体几何体，并使用定向光在它们上投射阴影并得到如下图所示的结果.

I used THREE.js r49 create 2 cube geometry with a directional light to cast shadow on them and got result as in the following picture.

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

I noticed that the shadow in the green circle should not be appeared, since the directional light is behind both of the cube. I guess that this is the material issue, I've tried changing various material parameters as well as change the material type itself, but the result still the same. I also tested the same code with r50 and r51 and got the same result.

谁能给我一些提示如何摆脱那个阴影.

Could anybody please give me some hint how to get rid of that shadow.

两个立方体都使用 CubeGeometry 和 MeshLambertMaterial 创建，如下代码所示.

Both cube are creating using CubeGeometry and MeshLambertMaterial as following code.

代码:

// 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 );

推荐答案

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

Yes, this is a known, and long-standing, WebGLRenderer issue.

问题是在阴影计算中没有考虑人脸法线和光线方向的点积.结果，阴影从后面显露出来".

The problem is that the dot product of the face normal and the light direction is not taken into consideration in the shadow calculation. As a consequence, "shadows show through from the back".

作为一种变通方法，您可以为每个面使用不同的材质，只有某些材质会接收阴影.

As a work-around, you could have a different material for each face, with only certain materials receiving shadows.

three.js r.71

three.js r.71

这篇关于THREE.JS 光对面的阴影的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！