Wie ändere ich die zOrder eines Objekts mit Threejs?

Question

Ich habe mit dem WebGL-Renderer eine Szene erstellt, in der ich mehrere 3D-Objekte platziert habe, die ich auswählen und verschieben kann.Wenn jedoch ein Objekt ausgewählt ist, möchte ich seine Achsen zeichnen.Es ist kein Problem, die Linien in die Mitte des Objekts zu zeichnen, aber ich möchte, dass sie vor allem anderen in der Szene erscheinen, sodass sie auch dann sichtbar sind, wenn sich andere Objekte davor befinden – wie in Blender.

Ich habe versucht, mit dem Parameter „renderDepth“ herumzuspielen, aber ich glaube nicht, dass ich verstanden habe, wie man ihn verwendet, und habe kein Ergebnis erzielt.

Ich danke Ihnen für Ihre Hilfe.

Answer 1

Wenn Sie möchten, dass einige Objekte „oben“ oder „vorne“ gerendert werden, besteht ein Trick darin, zwei Szenen zu erstellen – die erste Szene ist Ihre reguläre Szene und die zweite Szene enthält die Objekte, die Sie oben haben möchten.

Erstes Set

renderer.autoClear = false;

Erstellen Sie dann zwei Szenen

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

Fügen Sie Ihre Objekte wie gewohnt zur ersten Szene hinzu und fügen Sie die Objekte, die Sie oben haben möchten, zur zweiten Szene hinzu.

Dann, in deinem render() Funktion, machen Sie Folgendes:

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

Dadurch wird die erste Szene gerendert, der Tiefenpuffer gelöscht und dann die zweite Szene darüber gerendert.

Hier ist eine Geige: http://jsfiddle.net/d9Lzdkkr/

---

BEARBEITEN:Eine andere Lösung besteht darin, nur eine Szene zu haben, aber dieses Muster zu verwenden:

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

Wenn das Netz nur aus einem Material besteht, wird es „oben“ gerendert.

three.js r.85