Three.js 中的材质灯无法正常工作

Question

最后，我需要一个正常的阴影。但是使用带有 Lambert / Phong 材料的 Spot / Directional 灯我没有得到正确的结果：

picture with examples

当我使用带有 Lambert 材质的聚光灯时，这种材质不会对光做出反应（图 1、2）。 当我使用 Phong 材质的 Spot Light 时，我得到阴影，像图案一样，不光滑（图 3、4）。 当我将定向光与 Lambert / Phong 材料一起使用时，我得到了平滑，但阴影不合适（图 5 - 8）。

我将这个偏好用于阴影：

renderer.shadowMap.enabled = true;
renderer.shadowMapSoft = true;

renderer.shadowCameraNear = 3;
renderer.shadowCameraFar = camera.far;
renderer.shadowCameraFov = 50;

renderer.shadowMapBias = 0.0039;
renderer.shadowMapDarkness = 0.5;
renderer.shadowMapWidth = 1024;
renderer.shadowMapHeight = 1024;

这对于灯光来说：

var ambientLight =new THREE.AmbientLight( 0x555555 );
scene.add(ambientLight);

和

var spotLight = new THREE.SpotLight( 0xffffff);
spotLight.position.set( 12, 22, -25 );
spotLight.castShadow = true;
scene.add(spotLight );

和

var directionalLight=new THREE.DirectionalLight( 0xffffff, 0.5 );
directionalLight.position.set( 12, 22, -25 );
directionalLight.castShadow = true;
scene.add(directionalLight);

此外，我对所有这些示例都使用相同的 castShadow 和 receiveShadow 属性。

如果需要，其他代码可以作为本页源代码观看：

Spot Light, Lambert Material

对于我的所有示例，此代码都相同，不包括光 - 材料组合。

Answer 1

Three.js 中的实时阴影通常很棘手。以下是改进示例的一些基础知识。

限制shadow.camera-frustum：

spotLight.shadow.camera.near = 25;
spotLight.shadow.camera.far = 50;
spotLight.shadow.camera.fov = 30;

增加shadow.mapSize:

spotLight.shadow.mapSize.width = 2048;
spotLight.shadow.mapSize.height = 2048;

使用shadowBias 减少伪影：

spotLight.shadowBias = -0.003;

结果并不完美，因为现在房间内出现了轻微的接缝。它需要更多的调整和权衡，但也许它足以满足您的需求： https://jsfiddle.net/wbrj8uak/8/

---

在这里留下评论，关于 2pha 的更新示例以及我为什么要恢复它：

设置相机位置会导致房间内的阴影消失。对于想要在里面有阴影的发布者来说，这肯定会让他们感到困惑，这就是为什么我只是按照他提供的方式留下了他的代码。