1

three.jsCanvasRenderを使用していくつかのキューブを作成します。問題が発生しました。カメラを回転させると、これらの立方体の一部が透明になります。画像（ 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/

パフォーマンスが低下します。

three.js r.53

于 2012-12-25T05:17:08.177 に答える
0

これがうまくいくことを願っています。

side: THREE.DoubleSide材料での使用

jsfiddle

于 2012-12-24T10:37:44.067 に答える