对于Three.js r76中的MeshLambertMaterial，阴影形状异常？

Question

使用r70，阴影按预期显示 - r70 example (Shadow it correct shape)

然而，使用r76，阴影形状异常 - r76 example (Shadow is abnormally shaped)

您可以看到地平面上MeshLambertMaterial上的阴影不符合预期。

为什么阴影变形异常？ 需要改变什么才能让它在r76中运行？

这是我正在使用的代码（在两个示例中都相同）：

var light;
light = new THREE.SpotLight(0xdfebff, 1);
light.position.set(300, 400, 50);
light.castShadow = true;
light.shadowCameraVisible = true;
scene.add(light);

var groundMaterial = new THREE.MeshLambertMaterial({
    color: 0xFF0000,
});
plane = new THREE.Mesh(new THREE.PlaneGeometry(500, 500), groundMaterial);
plane.rotation.x = -Math.PI / 2;
plane.receiveShadow = true;
plane.castShadow = false;
scene.add(plane);

var boxgeometry = new THREE.CubeGeometry(100, 100, 100);
var boxmaterial = new THREE.MeshLambertMaterial({
    color: 0x0aeedf
});
var cube = new THREE.Mesh(boxgeometry, boxmaterial);
cube.castShadow = true;
cube.position.x = 0;
cube.position.y = 100;
cube.position.z = 0;
scene.add(cube);

webglRenderer = new THREE.WebGLRenderer({ alpha: true });
webglRenderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
webglRenderer.domElement.style.position = "relative";
webglRenderer.shadowMapEnabled = true;
webglRenderer.shadowMapSoft = true;

Answer 1

首先要做的是添加一个阴影摄像头助手，这样你就可以看到发生了什么：

light.shadowCameraHelper = new THREE.CameraHelper( light.shadow.camera );
scene.add( light.shadowCameraHelper );

很明显，阴影相机视锥体正在削减阴影。

从three.js r.76开始，自动设置阴影相机平截头体，使其更接近spotLight视野。

如果要覆盖它，可以指定自定义阴影平截头体，如下所示：

// custom shadow frustum
light.shadow = new THREE.LightShadow( new THREE.PerspectiveCamera( 30, 1, 200, 700 ) );

更新小提琴：http://jsfiddle.net/ef4r5s76/5/

three.js r.76 / r.77