three.js transparent object occlusion

Question

In a three.js scene, I would like to have an object that's not visible, but still occludes other objects in the scene as if it was visible.

Is this possible with the three.js library? Here is an example:

Suppose I have a three.js scene that contains 3 objects: object a, object b and object c and a camera. I would like object c to be invisible to the camera, but still occlude object b... Scenario 1: In scenario 1, here is what I would like the camera to see:

Scenario 2: In scenario 2, here is what I would like the camera to see:

Can anyone tell suggest a technique use to achieve such an effect?

Answer 1

Yes, in three.js you can create an object that is invisible, but still occludes other objects as if it were visible.

To do that, you need to use two features available in three.js: Object3D.renderOrder and Material.colorWrite.

You need to make sure the invisible object is rendered prior to the object(s) it must occlude.

You control the rendering order with the renderOrder property.

You make the occluding object invisible by setting its material's colorWrite property to false.

// 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