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

Question

在THREE.js中，當通過離軸的OrthographicCamera查看多維數據集的網格時，一旦攝像機旋轉足夠多的對象應該相互遮擋，似乎對象的渲染順序就不是基於它們在空間中的位置，而是它們的創建順序。

我已經嘗試設置THREE.WebGLRenderer( { antialias: true, sortObjects: false } ); 但這似乎無法解決問題。

這是一個動畫的小提琴，可以看到這種奇怪的Escher風格的效果： http : //jsfiddle.net/rfbvdmxn/2/

這是對象重疊之前的場景：

當我繼續沿相同方向旋轉相機並且對象重疊時，您可以看到（從相機的角度來看）最后面的對象最終遮擋了最前面的對象：

這是怎么回事，更重要的是我該如何糾正？

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/