Come modificare zOrder di object con Threejs?

Ho creato una scena usando il renderer webgl dove ho inserito più oggetti 3D che posso selezionare e spostare. Tuttavia, quando viene selezionato un object, mi piacerebbe disegnarne gli assi. Nessun problema nel disegnare le linee al centro dell’object, ma mi piacerebbe che appaiano davanti a qualsiasi altra scena sulla scena in modo che siano visibili anche se altri oggetti sono in primo piano – Come in Blender.

Ho provato a giocare con il parametro renderDepth ma non penso di aver capito come usarlo e non ho ottenuto alcun risultato.

Grazie per l’aiuto.

Se vuoi che alcuni oggetti rendano “in primo piano” o “in primo piano”, un trucco consiste nel creare due scene: la prima scena è la scena normale e la seconda scena contiene gli oggetti che vuoi avere in cima.

Innanzitutto, imposta

renderer.autoClear = false; 

Quindi creare due scene

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

Aggiungi i tuoi oggetti alla prima scena come al solito e aggiungi gli oggetti che vuoi avere in cima alla seconda scena.

Quindi, nella funzione render() , fai questo:

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

Ciò renderà la prima scena, cancellerà il buffer di profondità e quindi renderà la seconda scena in cima.

Ecco un Fiddle: http://jsfiddle.net/d9Lzdkkr/


EDIT: Un’altra soluzione è avere una sola scena, ma utilizzare questo modello:

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

Se la mesh ha un singolo materiale, renderà “sopra”.

three.js r.85