1

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

4

2 回答 2

1

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

在WebGLRenderer像素级别CanvasRenderer排序时，在多边形级别排序。

您可以做的最好的事情是像这样增加立方体的镶嵌：

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

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

性能会受到影响。

三.js r.53

于 2012-12-25T05:17:08.177 回答
0

我希望这会奏效。

用于side: THREE.DoubleSide材料

jsfiddle

于 2012-12-24T10:37:44.067 回答