时间戳

首页 > 解决方案 > 三.js是什么原因导致暗疮以及如何修复它

javascript - 三.js是什么原因导致暗疮以及如何修复它

问题描述

为了让所有的阴影都被渲染出来，我设置了///为shadow.camera.top定向光bottom（投射阴影），但是会导致阴影粉刺。我尝试使用但仍然不正确。是什么原因导致暗疮以及如何修复它？leftrightshadow.bias

在此处输入图像描述

这是我的代码。

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 );

谢谢！！

标签： javascriptthree.jsmodel

解决方案

设置shadow.bias为- 0.0005似乎可以消除阴影伪影。然而，阴影的质量仍然不好，因为阴影的边缘看起来很块状。

考虑设置将显着提高阴影质量的renderer.shadowMap.type属性THREE.PCFSoftShadowMap。减小阴影相机的截锥体的大小并仅在某个“焦点”区域投射阴影可能也是一个好主意。另一种选择是将高质量的光照烘焙到光照贴图中，然后将其应用于lightMap城市材质的属性。你也可以只增加阴影贴图的分辨率，4096 x 4096但这会影响性能，尤其是在移动设备上。

推荐阅读