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

В THREE.js при просмотре сетки кубов через внеосевую OrthographicCamera, когда камера поворачивается настолько, что объекты должны перекрывать друг друга, оказывается, что порядок рендеринга объектов не основан на их положении в пространстве. а скорее порядок, в котором они были созданы.

Я попытался установить THREE.WebGLRenderer( { antialias: true, sortObjects: false } );, но это не решает проблему.

Вот анимированная скрипка, чтобы увидеть этот причудливый эффект Эшера: http://jsfiddle.net/rfbvdmxn/2/

Вот сцена непосредственно перед перекрытием объектов: Внеосевой орфографический рендеринг

Поскольку я продолжаю вращать камеру в том же направлении, и объекты перекрываются, вы можете видеть, что самые задние объекты (с точки зрения камеры) в конечном итоге перекрывают самые передние объекты:

введите здесь описание изображения

Что здесь происходит и, что более важно, как мне это исправить?


person Tom Auger    schedule 28.08.2018    source источник


Ответы (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/

person Mugen87    schedule 28.08.2018
comment
Ну вот и все. Мне придется вспомнить этот трюк в следующий раз, когда я захочу создать этот испорченный эффект. Спасибо. - person Tom Auger; 28.08.2018