Three.js_解决谍影锯齿闪烁重影模型的方法

Posted 弓弧名家_玄真君

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Three.js_解决谍影锯齿闪烁重影模型的方法相关的知识,希望对你有一定的参考价值。

解决方法

renderer = new THREE.WebGLRenderer({
  antialias: true,
  logarithmicDepthBuffer: true,
});

设置logarithmicDepthBuffer属性为true, 便可以处理这个问题

logarithmicDepthBuffer, 官方解释: 是否使用对数深度缓存。如果要在单个场景中处理巨大的比例差异,就有必要使用, 默认是false。 使用了会带来额外的开销, 但是效果会变好.

原因

渲染器渲染时有个特点, 距离越远的物体精度越低, 因此, 在远处, 多个材质可能集中在一个像素点上, 产生各种不正常现象, 这也叫z-fight.

那么, 运用了logarithmicDepthBuffer( 对数深度缓存 )后, 处理了这种情况, 具体怎么处理的, 目前我也还不明白, _, 留个问题, 以后处理

总结: 如果要在单个场景中处理巨大的比例差异,就有必要使用logarithmicDepthBuffer : true

希望读者在看完后能提出意见, 点个赞, 鼓励一下, 我们一起进步. 加油 !!

以上是关于Three.js_解决谍影锯齿闪烁重影模型的方法的主要内容,如果未能解决你的问题,请参考以下文章

Three.js渲染质量

three.js中场景模糊纹理失真的问题

Three.JS:奇怪的闪烁/渲染与透明的MeshPhongMaterial

在three.js中动态创建二维文本

Vue中three.js导入gltf模型文件时报错

如何将 Blender 3D 模型导入到 three.js