Как изменить zOrder объекта с помощью Threejs?

Я сделал сцену, используя средство отображения webgl, где я помещал несколько 3D-объектов, которые я могу выбрать и переместить. Однако, когда объект выбран, я хотел бы нарисовать его оси. Нет проблем с рисованием линий в центре объекта, но я бы хотел, чтобы они появлялись перед чем-либо еще на сцене, чтобы они были видны, даже если другие объекты впереди - как в Blender.

Я попытался сыграть с параметром renderDepth, но я не думаю, что понял, как его использовать, и я не получил никакого результата.

Благодарим вас за помощь.

Ответ 1

Если вы хотите, чтобы некоторые объекты отображались "сверху" или "впереди", один трюк состоит в том, чтобы создать две сцены: первая сцена - ваша обычная сцена, а вторая сцена содержит объекты, которые вы хотите сверху.

Сначала установите

renderer.autoClear = false;

Затем создайте две сцены

var scene = new THREE.Scene();
var scene2 = new THREE.Scene();

Добавьте свои объекты в первую сцену, как обычно, и добавьте объекты, которые хотите иметь сверху во вторую сцену.

Затем в вашей функции render() сделайте следующее:

renderer.clear();
renderer.render( scene, camera );
renderer.clearDepth();
renderer.render( scene2, camera );

Это сделает первую сцену, очистит буфер глубины и затем отобразит вторую сцену сверху.

Вот сценарий: http://jsfiddle.net/d9Lzdkkr/

EDIT: Другое решение - иметь только одну сцену, но использовать этот шаблон:

mesh.renderOrder = 999;
mesh.onBeforeRender = function( renderer ) { renderer.clearDepth(); };

Если сетка имеет один материал, она будет отображаться "сверху".

three.js r.85