javascript - 三.js CanvasRender问题 : faces flicker in and out

Question

我正在绘制两个相对简单的形状，它们的几何形状不重叠。

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

Three.js 轨迹球就在那里，因此您可以单击并拖动以在 3d 空间中旋转对象。问题是当物体旋转时，一些面消失，露出下面的物体。稍微旋转一下，丢失的脸又回来了，但其他人已经不见了。

我已经尝试了 BasicMaterial、Normal Material 和 LambertMaterial 以及 SmoothShading 和 Flat Shading。我已经尝试过有和没有灯光的场景。将对象移得更远似乎可以解决此问题，但在给定的示例代码中，网格不会重叠，因此不应出现此问题。 Chrome 和 Firefox 都会出现问题。

我认为切换到 OpenGL 渲染器可以解决问题，但为了兼容性，我们需要使用 Canvas 渲染器。

感谢任何帮助或想法。

Answer 1

这是 CanvasRenderer 的限制。不幸的是，CanvasRenderer 不提供按像素 z 排序，因此它基本上尝试对整个多边形进行排序。根据您从一个多边形的中心观察的位置，它可能比侧面的多边形更近，因此它会“跳跃”。

目前唯一的解决方案是使用 WebGLRenderer。我正在为 context2d 开发一个新的渲染器，希望它能在不需要 webgl 的情况下解决这个问题，但它仍然需要一些时间。