A possibility in three.js is to create an object that remains invisible while still obscuring other objects as if it were visible.
To achieve this effect, two key features within three.js need to be utilized: Object3D.renderOrder and Material.colorWrite.
It is crucial to ensure that the imperceptible object is rendered before the object(s) it is intended to obscure.
The rendering sequence can be manipulated through the renderOrder attribute.
By adjusting the material's colorWrite property to false, the obstructing object can be made unseen.
// material
var material = new THREE.MeshPhongMaterial();
// mesh a
var geometry = new THREE.PlaneGeometry( 10, 10, 4, 4 );
mesh = new THREE.Mesh( geometry, material.clone() );
mesh.material.color.set( 0xff0000 );
mesh.renderOrder = 0; // <===================
mesh.position.z = - 10;
scene.add( mesh );
// mesh b
var geometry = new THREE.BoxGeometry( 2, 2, 2 );
mesh = new THREE.Mesh( geometry, material.clone() );
mesh.material.color.set( 0x606060 );
mesh.renderOrder = 3;
mesh.position.z = 0;
scene.add( mesh );
// mesh c
var geometry = new THREE.BoxGeometry( 3, 3, 3 );
mesh = new THREE.Mesh( geometry, material.clone() );
mesh.material.color.set( 0x0000ff );
mesh.material.colorWrite = false; // <=================
mesh.renderOrder = 2;
mesh.position.z = 10;
scene.add( mesh );
three.js r.143