cubes created by three.js are interfere ,parts of those cubes become transparency when rotating the camera,

问题

I create some cubes with three.js CanvasRender. I met an issue, parts of those cubes become transparency when rotating the camera,please see the image(http://imgur.com/fAY6B). When I change the CanvasRender to WebGLRender, the issue can't be reproduced. I have to use CanvasRender.

Any ideas anyone? Any help will be much appreciated.

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

I try to set the heightSegments value to higher, it does look well, but still not work as well as I want. The jsfiddle link is here. http://jsfiddle.net/qcy1121/xn7ad/

回答1:

What you are seeing is a limitation of CanvasRenderer due to the way it handles depth-sorting.

While WebGLRenderer sorts at the pixel level, CanvasRenderer sorts at the polygon level.

The best you can do is to increase the tessellation of your cubes like so:

var geometry = new THREE.CubeGeometry(width, height, depth, 1, 10, 1);

Updated fiddle: http://jsfiddle.net/xn7ad/1/

There will be a performance hit.

three.js r.53

回答2:

I hope this would work.

use side: THREE.DoubleSide in material

jsfiddle

来源：https://stackoverflow.com/questions/14019880/cubes-created-by-three-js-are-interfere-parts-of-those-cubes-become-transparenc