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

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/