最后,我需要一个正常的阴影。但是将点光源/定向光源与Lambert / Phong材料一起使用时,我没有得到正确的结果:
picture with examples
当我将聚光灯与兰伯特材料一起使用时,该材料不会对光产生反应(图1、2)。
当我在“ Phong材质”中使用“聚光灯”时,会出现阴影(如图案),而不是平滑的(图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
对于我所有的示例,此代码均相同,但不包括灯光与材质的组合。
最佳答案
通常,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的更新示例以及为何要还原它,请在此处发表评论:
设置相机位置会导致房间内的阴影消失。这对于想要在内部有阴影的发布者来说肯定是令人困惑的,这就是为什么我只按照他提供代码的方式离开了他的代码。