Как исправить порядок сортировки непрозрачных объектов при орфографической визуализации

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/