三.js - 重叠层闪烁 [英] three.js - Overlapping layers flickering

问题描述

当多个对象在同一平面上重叠时，它们开始闪烁.如何告诉渲染器将其中一个对象放在前面?

When several objects overlap on the same plane, they start to flicker. How do I tell the renderer to put one of the objects in front?

我尝试使用 .renderDepth，但它只能部分起作用 -请参阅此处的示例:
http://liveweave.com/ahTdFQ
两个盒子具有相同的尺寸，并且可以按预期工作.我可以通过设置 .renderDepth 来更改哪个框可见.但如果其中一个盒子小一点(比如 40、50、50)，则接触层会闪烁，渲染深度不再起作用.

I tried to use .renderDepth, but it only works partly - see example here:
http://liveweave.com/ahTdFQ
Both boxes have the same size and it works as intended. I can change which of the boxes is visible by setting .renderDepth. But if one of the boxes is a bit smaller (say 40,50,50) the contacting layers are flickering and the render depth doesn't work anymore.

如何解决这个问题?

推荐答案

当 .renderDepth() 不起作用时，您必须自己设置深度.

When .renderDepth() doesn't work, you have to set the depths yourself.

移动整个网格确实不是很有效.
您正在寻找的是与材料绑定的偏移量:

Moving whole meshes around is indeed not really efficient.
What you are looking for are offsets bound to materials:

material.polygonOffset = true;
material.polygonOffsetFactor = -0.1;

应该可以解决您的问题.请参阅此处的更新:http://liveweave.com/syC0L4
用负面因素显示，正面因素隐藏.

should solve your issue. See update here: http://liveweave.com/syC0L4
Use negative factors to display and positive factors to hide.

这篇关于三.js - 重叠层闪烁的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！