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

Question

在 THREE.js 中，当通过离轴正交相机查看立方体网格时，一旦相机旋转得足以使对象相互遮挡，则对象的渲染顺序似乎并不基于其位置在空间中，而不是它们被创建的顺序。

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

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

这是对象重叠之前的场景:

当我继续向同一方向旋转相机并且对象重叠时，您可以看到最后面的对象(从相机的 Angular 来看)最终遮挡了最前面的对象:

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

Answer 1

问题在于您混合了 OrthographicCamera 的构造函数参数 top 和 bottom。如果我更改两个参数的符号，排序看起来没问题。此外，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/