CODEWITHSUNDEEP
three.js
chyee
chyee

Reputation: 663

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(https://i.sstatic.net/pafn0.jpg). 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/

Upvotes: 1

Views: 459

Answers (2)

WestLangley
WestLangley

Reputation: 104763

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

Upvotes: 1

Valay
Valay

Reputation: 1999

I hope this would work.

use side: THREE.DoubleSide in material

jsfiddle

Upvotes: -1

Related Questions