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, 而不是CanvasRenderer现在所做的那样，您可以使用该renderDepth属性为每个立方体指定“深度偏差”。