Question

我使用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/

Answer 1

由于处理深度排序的方式，您所看到的是CanvasRenderer的限制。

当WebGLRenderer在像素级别进行排序时，CanvasRenderer会在多边形级别进行排序。

您可以做的最好是增加多维数据集的细分，如下所示：

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

更新了小提琴：http://jsfiddle.net/xn7ad/1/

会有性能受损。

three.js r.53

Answer 2

我希望这会奏效。

在材料中使用side: THREE.DoubleSide

jsfiddle

由three.js创建的立方体是干涉的，这些立方体的一部分在旋转相机时变得透明，

2 个答案: