¿Cómo puedo ocultar objetos basados en la posición de la cámara con Three.js?
Cuando trabajamos con Three.js En muchas ocasiones nos interesa ocultar un objecto o varios de una escena 3d que según la posición de la cámara no permiten la visualización de otros objectos. Un ejemplo práctico sería cuando realizamos una escena 3d de una habitación. La habitación está formada por 4 paredes, un suelo y un techo. Si queremos visualizar el interior de la habitación deberemos aplicar esta técnica para ocultar los muros que tengamos más cerca de la cámara.
Utilizaremos los métodos "onBeforeRender()" y "onAfterRender()" y los aplicarmos a los objetos que queramos que tengan este comportamiento.
// Callbacks.
var onBeforeRender = function() {
var v = new THREE.Vector3();
return function onBeforeRender( renderer, scene, camera, geometry, material, group ) {
// Esto es una manera. Adáptalo en tu caso.
if ( v.subVectors( camera.position, this.position ).dot( this.userData.normal ) > 0 ) {
// Es demasiado tarde para establecer visible = false, en su lugar haz lo siguiente.
geometry.setDrawRange( 0, 0 );
}
};
}();
var onAfterRender = function( renderer, scene, camera, geometry, material, group ) {
geometry.setDrawRange( 0, Infinity );
};
// Mesh
mesh = new THREE.Mesh( geometry, material );
mesh.userData.normal = mesh.position.clone().normalize(); // Utilizado en los Callbacks.
mesh.onBeforeRender = onBeforeRender;
mesh.onAfterRender = onAfterRender;Con el código anterior conseguimos que cuando un objeto se interponga en la dirección en la que está mirando la cámara quede oculto y permita ver los diferentes objetos que estarían detrás de dicho objeto. Para el ejemplo utilizamos un Mesh como objeto con una geometría y material previamente definidas. Le calculamos su normal que se utiliza en los callback onBeforeRender y onAfterRender. Por último asignamos estos Callbacks al objeto.
Podéis ver un ejemplo en la Demo técnica de Lyreco dónde se puede observar una habitación que tiene oculta las paredes que quedan más cercanas a la cámara. Si rotamos la escena vemos como aparecen las paredes ocultas y como desaparecen las otras paredes.
Si teneis alguna consulta o alguna duda, podéis enviarnos un email a info@morethanweb.es .
