javascript - Three.js 是什么导致阴影痤疮以及如何修复它

标签 javascript three.js model

为了让所有的阴影都被渲染,我设置了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 );

谢谢!!

最佳答案

shadow.bias 设置为 - 0.0005 似乎可以消除阴影瑕疵。然而,阴影的质量仍然不佳,因为阴影的边缘看起来非常 block 状。

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

关于javascript - Three.js 是什么导致阴影痤疮以及如何修复它,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56034734/

相关文章:

javascript - js 代码从 jQuery 转换或转换为原生?

javascript - 如何在 Three.js 场景中包含 OVRManager?

three.js - 访问 BufferGeometry 中的面

c# - "EntityType has no key defined"异常,尽管键是用 HasKey 定义的

javascript - 使用 isNaN 来计算输入

javascript - 再次单击按钮时,clearTimeout 无法按预期工作

javascript - jquery 文件树高亮选中

javascript - Three.js THREE.Projector 已移至

Ember.JS - 提交按钮运行查询并将 JSON 对象返回到模板。我是在服务中、作为模型还是在 route 运行查询?

go - Go GORM无法猜测嵌入式类型的关系