Question

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

当我使用Spot Light和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 - 视锥体：

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的更新示例以及为什么我要恢复它：

设置相机位置会导致房间内的阴影消失。这对于想要内部阴影的海报来说确实令人困惑，这就是为什么我只是按照他提供的方式离开他的代码。

使用three.js中的材料的灯不能正常工作

1 个答案: