cubos criados por three.js são interferir, partes desses cubos se tornam transparentes ao girar a câmera,

Eu crio alguns cubos com o Three.js CanvasRender. Eu encontrei um problema, partes desses cubos se tornam transparentes ao girar a câmera, por favor, veja a imagem (http://imgur.com/fAY6B). Quando eu mudo o CanvasRender para WebGLRender, o problema não pode ser reproduzido. Eu tenho que usar o CanvasRender.

Alguma idéia alguém? Qualquer ajuda será muito apreciada.

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);
}

Eu tento definir o valor heightSegments para maior, ele parece bem, mas ainda não funciona tão bem quanto eu quero. O link jsfiddle está aqui.http://jsfiddle.net/qcy1121/xn7ad/

questionAnswers(2)

yourAnswerToTheQuestion