问题描述
我绘制两个相对简单的形状和它们的几何形状不重叠。
I am drawing two relative simple shapes and the geometry of them do not overlap.
下面是code样品： http://jsfiddle.net/pGD4n/9/
Here is the code sample: http://jsfiddle.net/pGD4n/9/
该Three.js轨迹球就在那里，所以你可以单击并拖动以在三维空间周围旋转的对象。的问题是，作为对象的旋转一些面消失揭示对象下面。轻微更多的旋转和丢失的脸的回报，但其他人也失踪了。
The Three.js Trackball is in there so you can click and drag to spin the objects around in 3d space. The problem is that as the objects rotate some faces disappear revealing the object below. A slight more rotation and the missing face returns, but others have gone missing.
我已经试过BasicMaterial，普通材质和LambertMaterial既SmoothShading和平面渲染。我曾尝试了这一场面，和无照明。移动对象更远似乎纠正问题，但在给定的例子code中的网格不重叠，不应该有这样的问题。问题发生在这两个浏览器和Firefox。
I've tried BasicMaterial, Normal Material and LambertMaterial with both SmoothShading and Flat Shading. I have tried the scene with and without lighting. Moving the objects farther apart seems to correct the issue, but in the given example code the meshes do not overlap and should not have this problem. Problem happens in both Chrome and Firefox.
我想，切换到OpenGL渲染会解决这个问题，但为了兼容性，我们需要使用Canvas渲染器。
I imagine that switching to the OpenGL renderer would resolve the issue, but for compatibility we need use the Canvas renderer.
任何帮助或想法AP preciated。
Any help or ideas appreciated.
推荐答案
这是 CanvasRenderer 的限制。不幸的是每个像素z排序是不是在 CanvasRenderer 可用，因此它基本上是试图将整个多边形进行排序，而不是。根据在那里你正在寻找从一个多边形的中心可能比侧面的多边形接近的，所以它跳跃。
This is a limitation of CanvasRenderer. Unfortunately per pixel z sorting is not available in CanvasRenderer so it basically tries to sort the whole polygon instead. Depending of where you're looking from the center of one polygon may be closer than the polygon on the side and so it "jumps".
目前正在使用的唯一的解决办法 WebGLRenderer 。我正在为context2d一个新的渲染它希望能解决这个问题，而不需要WebGL的，但它仍然需要一段时间。
The only solution right now is using WebGLRenderer. I'm working on a new renderer for context2d which hopefully will solve this without requiring webgl but it will still take some time.