кубы, созданные в Three.js, мешают друг другу, части этих кубов становятся прозрачными при вращении камеры,

Я создаю несколько кубов с помощью Three.js CanvasRender. Я столкнулся с проблемой, части этих кубов становятся прозрачными при вращении камеры, пожалуйста, смотрите изображение (http://imgur.com/fAY6B). Когда я изменяю CanvasRender на WebGLRender, проблема можетне может быть воспроизведено. Я должен использовать CanvasRender.

Любые идеи кто-нибудь? Любая помощь будет высоко ценится.

for (....){
  var material = new THREE.MeshPhongMaterial({ color: color.getHex(), shading: THREE.FlatShading, overdraw: true});
  var geometry = new THREE.CubeGeometry(width, height, depth, 1, 1, 1);
  var cube = new THREE.Mesh(geometry, material);
  cube.position = position;
  scene.add(cube);
}

Я пытаюсь установить значение heightSegments выше, оно выглядит хорошо, но все равно не работает так, как я хочу. Ссылка на jsfiddle находится здесь.http://jsfiddle.net/qcy1121/xn7ad/

Ответы на вопрос(2)

Ваш ответ на вопрос