Неверный z-индекс треугольника в Three JS создает артефакт

Question

Я использую Three.js и столкнулся с проблемой при некоторых обстоятельствах.
Это проблема: http://i60.tinypic.com/1zz6jac.png

Я провел свои исследования и знаю, что это проблема CanvasRenderer. Нет способа решить эту проблему без использования WebGLRenderer?

Я пытался использовать WebGLRenderer, но теперь у меня больше проблем, потому что я создаю свой сценарий вокруг CanvasRenderer:
http://i59.tinypic.com/9joktu.png
Кроме того, используя WebGLRenderer, прозрачность больше не работает на моих кубах и линиях, это можно увидеть в сетке под кубами на скриншотах.

Answer 1

То, что вы видите, является артефактом CanvasRenderer, Лучшее, что вы можете сделать, это тесселяция вашей геометрии. Например,

THREE.BoxGeometry( 10, 10, 10, 4, 4, 4 );

Скрипка: http://jsfiddle.net/Z87uX/3

three.js r.67