如何在正交渲染中更正不透明对象的排序顺序

Question

在THREE.js中，当通过离轴OrthographicCamera查看多维数据集的网格时，一旦摄像机旋转到足以使对象相互遮挡的程度，则看来对象的渲染顺序并非基于其位置在空间上，而是它们的创建顺序。

我已尝试设置THREE.WebGLRenderer( { antialias: true, sortObjects: false } );，但这似乎无法解决该问题。

这是一个动画小提琴，可以看到这种奇怪的埃舍尔式效果：http://jsfiddle.net/rfbvdmxn/2/

以下是对象重叠之前的场景：

当我继续沿相同方向旋转相机并且对象重叠时，您可以看到（从相机的角度来看）最后面的对象最终遮挡了最前面的对象：

这是怎么回事，更重要的是我该如何纠正？

Answer 1

问题是您混合了top的构造函数参数bottom和OrthographicCamera。如果我更改两个参数的符号，排序看起来还可以。此外，MeshNormalMaterial现在可以产生正确的视觉输出。

var camera = new THREE.OrthographicCamera(window.innerWidth / -2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, -1000, 2000);

演示：http://jsfiddle.net/rfbvdmxn/42/