three.js所CanvasRender问题:进出面对闪烁(Three.js CanvasRend

2019-09-18 12:02发布

我画两次相对简单的形状和它们的几何形状不重叠。

下面是代码示例: http://jsfiddle.net/pGD4n/9/

该three.js所轨迹球是在那里,所以你可以点击并拖动以在3D空间中旋转周围的物体。 问题是,当物体旋转的一些面孔消失露出下面的对象。 轻微更多的旋转和缺失面的回报,但其他人都失踪了。

我试过BasicMaterial,普通材质和LambertMaterial既SmoothShading和平面渲染。 我曾尝试场景和无照明。 移动物体越远,似乎纠正问题,但在给出的示例代码中的网格不重叠,不应该有这个问题。 问题发生在Chrome和Firefox浏览器。

我想,切换到OpenGL渲染就解决了问题,但出于兼容性,我们需要使用Canvas渲染器。

任何帮助或想法表示赞赏。

Answer 1:

这是一个限制CanvasRenderer 。 不幸的是每像素z排序是不可用CanvasRenderer因此,它基本上试图将整个多边形,而不是进行排序。 根据你从一个多边形的中心寻找其中可能比在侧面的多边形密切,所以“跳跃”。

唯一的解决办法,现在是使用WebGLRenderer 。 我正在为context2d一个新的渲染器,希望能解决这个问题,而不需要WebGL的,但它仍然需要一段时间。



文章来源: Three.js CanvasRender problems: faces flicker in and out