Three.js是什么原因导致暗疮痤疮以及如何修复

时间:2019-05-08 06:27:24

标签: javascript three.js model orbit-controls

为了渲染所有阴影,我将shadow.camera.top / bottom / left / right设置为定向光(投射阴影),但是会导致阴影粉刺。 我尝试使用shadow.bias,但仍然不正确。什么原因导致暗疮痤疮?如何解决?

enter image description here

这是我的代码。

light = new THREE.DirectionalLight( 0xffffff );
light.position.set( 38, 82, 1 );
light.castShadow = true;
// light.shadow.bias = -0.001;
light.shadow.mapSize.width = 2048;
light.shadow.mapSize.height = 2048;
light.shadow.camera.near = 0.1;  // same as the camera
light.shadow.camera.far = 1000;  // same as the camera
light.shadow.camera.top = 120;
light.shadow.camera.bottom = -120;
light.shadow.camera.left = 120;
light.shadow.camera.right = -120;
scene.add( light );

谢谢!

1 个答案:

答案 0 :(得分:1)

shadow.bias设置为- 0.0005似乎可以消除阴影伪像。但是,由于阴影的边缘看起来非常块状,因此阴影的质量仍然不佳。

请考虑将属性renderer.shadowMap.type设置为THREE.PCFSoftShadowMap,这将明显改善阴影质量。减小阴影摄像机的截锥体的大小并且仅在特定的“焦点”区域投射阴影也是一个好主意。另一个选择是将高质量的照明烘焙到光照图中,然后将其应用于城市材料的lightMap属性。您也可以将阴影贴图的分辨率提高到4096 x 4096,但这会对性能产生影响,尤其是在移动设备上。