如何在正交渲染中更正不透明对象的排序顺序
How to correct sort order for opaque objects in orthographic rendering
在 THREE.js 中，当通过离轴 OrthographicCamera 查看立方体网格时，一旦相机旋转到足以使对象相互遮挡时，对象的渲染顺序似乎不是基于它们在 space 中的位置，而不是它们的创建顺序。
我已尝试设置 THREE.WebGLRenderer( { antialias: true, sortObjects: false } );，但这似乎无法解决问题。
这里有一个动画 fiddle 可以看到这种奇怪的埃舍尔式效果：http://jsfiddle.net/rfbvdmxn/2/
这是对象重叠之前的场景：
当我继续沿同一方向旋转相机并且对象重叠时，您可以看到最后面的对象（从相机的角度来看）最终遮挡了最前面的对象：
这是怎么回事，更重要的是我该如何纠正？
问题是您混合了 OrthographicCamera 的构造函数参数 top 和 bottom。如果我改变两个参数的符号，排序看起来没问题。此外，MeshNormalMaterial 现在可以生成正确的视觉输出。
var camera = new THREE.OrthographicCamera(window.innerWidth / -2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, -1000, 2000);
在 THREE.js 中，当通过离轴 OrthographicCamera 查看立方体网格时，一旦相机旋转到足以使对象相互遮挡时，对象的渲染顺序似乎不是基于它们在 space 中的位置，而不是它们的创建顺序。
我已尝试设置 THREE.WebGLRenderer( { antialias: true, sortObjects: false } );，但这似乎无法解决问题。
这里有一个动画 fiddle 可以看到这种奇怪的埃舍尔式效果：http://jsfiddle.net/rfbvdmxn/2/
这是对象重叠之前的场景：
当我继续沿同一方向旋转相机并且对象重叠时，您可以看到最后面的对象（从相机的角度来看）最终遮挡了最前面的对象：
这是怎么回事，更重要的是我该如何纠正？
问题是您混合了 OrthographicCamera 的构造函数参数 top 和 bottom。如果我改变两个参数的符号，排序看起来没问题。此外，MeshNormalMaterial 现在可以生成正确的视觉输出。
var camera = new THREE.OrthographicCamera(window.innerWidth / -2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, -1000, 2000);