最后,我需要一个正常的阴影。但是使用带有 Lambert/Phong Material 的聚光灯/定向光我没有得到正确的结果:
当我将聚光灯与兰伯特 Material 一起使用时,该 Material 不会对光使用react(图 1、2)。 当我使用带有 Phong Material 的聚光灯时,我得到阴影,像图案一样,不平滑(图 3、4)。 当我使用带有 Lambert/Phong Material 的定向光时,我得到平滑但不正确的阴影(图 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
属性。
如果需要,可以查看其他代码作为本页面的源代码:
此代码对于我的所有示例都是相同的,不包括光- 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 的更新示例以及我恢复它的原因:
设置相机位置会导致房间内的阴影消失。对于想要在内部有阴影的发帖者来说,这肯定会令人困惑,这就是为什么我只是按照他提供的方式留下他的代码。
关于javascript - Three.js 中 Material 的灯无法正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37633111/