Three.js r76 中 MeshLambertMaterial 的阴影形状异常？答案

【问题标题】：Shadow is abnormally-shaped for MeshLambertMaterial in Three.js r76?Three.js r76 中 MeshLambertMaterial 的阴影形状异常？
【发布时间】：2016-10-01 14:20:49
【问题描述】：

使用 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;

【问题讨论】：

对我来说，这对他们俩都很不利，尽管它们看起来不同。（FF Nightly，64 位，magyar）
我试了一下，改变了一些东西，让助手显示和聚光灯影响地平面。我必须将地面改为 PhongMaterial 才能让光线影响它。我实际上并没有出现阴影。 http://jsfiddle.net/2pha/ef4r5s76/4/
我已编辑问题并投票决定重新打开。我认为这个问题值得回答。

标签： javascript three.js

【解决方案1】：

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

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

很明显，阴影相机平截头体正在剪裁阴影。

从 three.js r.76 开始，阴影相机截锥体被自动设置，因此它更接近于聚光灯视野。

如果您想覆盖它，可以像这样指定自定义阴影截头体：

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

【讨论】：

感谢您的回答，对我帮助很大。但是还有一个问题：如果我改变平面的大小（从500 * 500到5000 * 5000），阴影也会消失，见：jsfiddle.net/ef4r5s76/6，平面如何影响阴影？
影子还在；飞机太黑了，看不见。有关原因，请参阅stackoverflow.com/a/15809154/1461008。您的两个选项是 (1) 使用 MeshLambertMaterial 并细分您的平面几何形状 ( 5000, 5000, 2, 2 ) 或 (2) 改用 MeshPhongMaterial。