如何解决三个JS:封闭平面中的怪异渲染问题
我正在使用Three.js渲染一些带有纹理的平面,一个或另一个。 飞机之间的距离是10个单位(我不确定这些确切是什么)。
所有平面都是MeshBasicMaterial,具有以下配置:
let frontMaterial = new THREE.MeshBasicMaterial( {
map: getFrontCover(),side: THREE.FrontSide
});
当飞机以10的常规距离放置时,我可以看到渲染的奇怪条纹,如图所示:
假设距离是强制性的,我该如何解决这个问题?
谢谢
解决方法
您可以做一些事情。
-
使透视相机的近距和远距设置尽可能适合您的内容。
例如,假设相机距离书本2个单位,书本深1个单位。在这种情况下,将您的近距和远距设置为0.5和3.5可能会解决该问题。换句话说
.... new THREE.PerspectiveCamera(fieldOfView,Aspect, /附近0.5 / *,far / 3.5 / 附近* /
如果这些数字相差几个数量级,则会出现此问题
-
使用对数深度缓冲区
请参见以下示例:https://threejs.org/examples/?q=log#webgl_camera_logarithmicdepthbuffer
-
设置材料的多边形偏移量
您要在应该位于其后的网格物体的材质上进行设置
material.polygonOffset = true; material.polygonOffsetFactor = 1; material.polygonOffsetUnits = 1;
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。