由three.js创建的立方体是干扰的，旋转相机时，这些立方体的一部分会变得透明， [英] cubes created by three.js are interfere ,parts of those cubes become transparency when rotating the camera,

问题描述

我用three.js CanvasRender 创建了一些立方体.我遇到了一个问题，旋转相机时那些立方体的一部分会变得透明，请看图片(http://imgur.com/fAY6B).当我将 CanvasRender 更改为 WebGLRender 时，问题无法重现.我必须使用 CanvasRender.

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

我尝试将 heightSegments 值设置为更高，它看起来不错，但仍然没有达到我想要的效果.jsfiddle 链接在这里.http://jsfiddle.net/qcy1121/xn7ad/

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/

推荐答案

您所看到的是 CanvasRenderer 由于处理深度排序的方式而存在的局限性.

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

虽然 WebGLRenderer 在像素级别排序，CanvasRenderer 在多边形级别排序.

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

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

性能会受到影响.

three.js r.53

three.js r.53

这篇关于由three.js创建的立方体是干扰的，旋转相机时，这些立方体的一部分会变得透明，的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！