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

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 new features available in three.js r.71: 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; // <=================== new
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; // <================= new
mesh.renderOrder = 2;
mesh.position.z = 10;
scene.add( mesh );

fiddle: http://jsfiddle.net/4vnsbdz6/1/

another fiddle: http://jsfiddle.net/4vnsbdz6/4/

three.js r.71