three.js - 重ねて立方体を表示しますか?

Question

こんにちは、みんな！
three.j でアニメーションを実行すると問題が発生します。例を参照してください: http://jsfiddle.net/5ywdE/13/
緑の立方体が青の立方体の位置に回転すると、赤の立方体が回転します。
質問: 緑の青が目の前にあるのに、青の立方体が表示されるのはなぜですか。緑の立方体が青の立方体の前に表示されるようにします (赤の立方体がすべての前に表示されるように)。重なった場合に他の立方体の前に表示される立方体を設定できますか?
私は何を間違っていますか??

前もって感謝します

Answer 1

すべての立方体はposition.zゼロに等しいです。では...どのキューブを最初/最後に描画する必要がありますか? Three.js はわかりません。おそらく、シーンに追加されたのと同じ順序で、すべてを描画するだけです。

立方体がシーンに追加される順序を変更することができます:

scene.add(obj1);
scene.add(obj);
scene.add(rot);

または、カメラを動かさない場合は、青い立方体に別の z 値を使用します。

...
cube1.position.z = -0.1;
...

visibleまたは、緑の立方体がアニメーションを終了したときに、青の立方体のプロパティを false に設定することもできます。

...
run1= false;
three.cube1.visible = false;
...

を使用できる場合は、現在行っているWebGLRendererのではなく、プロパティを使用して各キューブの「深度バイアス」を指定できます。CanvasRendererrenderDepth