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

Question

In THREE.js, When viewing a grid of cubes through an off-axis OrthographicCamera, once the camera rotates enough that the objects ought to occlude one another, it appears that the rendering order of the objects is not based on their position in space, but rather the order in which they were created.

I have attemnpted to set THREE.WebGLRenderer( { antialias: true, sortObjects: false } ); but that doesn't appear to address the issue.

Here's an animated fiddle to see this bizarre Escher-esque effect: http://jsfiddle.net/rfbvdmxn/2/

Here's the scene just before the objects overlap:

As I continue to rotate the camera in the same direction and the objects overlap, you can see that the backmost objects (from the camera's perspective) end up occluding the frontmost objects:

What's going on here, and more importantly how do I correct this?

Answer 1

The problem is that you've mixed the constructor parameters top and bottom of OrthographicCamera . If I change the sign of both arguments, sorting looks okay. Besides, the MeshNormalMaterial now produces a correct visual output.

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

Demo: http://jsfiddle.net/rfbvdmxn/42/