tutorial - three.js examples

Cómo cambiar la orden z del objeto con Threejs?

Question

Hice una escena usando el procesador webgl donde coloco múltiples objetos 3D que puedo seleccionar y mover. Sin embargo, cuando se selecciona un objeto, me gustaría dibujar sus ejes. No hay problema para dibujar las líneas en el centro del objeto, pero me gustaría que aparezcan frente a cualquier otra cosa en la escena para que sean visibles incluso si hay otros objetos en la parte frontal, como en Blender.

Intenté jugar con el renderDepth param, pero no creo haber entendido cómo usarlo y no obtuve ningún resultado.

Gracias por tu ayuda.

Answer 1

Si quiere que algunos objetos se muestren "arriba" o "adelante", un truco es crear dos escenas: la primera es su escena normal y la segunda contiene los objetos que desea tener arriba.

Primer set

renderer.autoClear = false;

Luego crea dos escenas

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

Agregue sus objetos a la primera escena como de costumbre, y agregue los objetos que desea tener en la parte superior a la segunda escena.

Luego, en su función render() , haga esto:

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

Esto renderizará la primera escena, borrará el búfer de profundidad y luego renderizará la segunda escena en la parte superior.

Aquí hay un violín: http://jsfiddle.net/d9Lzdkkr/

EDITAR: Otra solución es tener solo una escena, pero use este patrón:

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

Si la malla tiene un solo material, aparecerá "arriba".

three.js r.85