Occlusion of a transparent object.

Question

In three.js scene, I would like to have an object that does not appear, but still closes other objects in the scene, as if it were visible.

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

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

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

Can anyone talk about the application of the method to achieve this effect?

Answer 1

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

To do this, you need to use two new functions available in three .js r.71: Object3D.renderOrder and Material.colorWrite .

You need to make sure that the invisible object is rendered before the object should close.

You control the order of visualization using the renderOrder property.

You make the occlusal object invisible by setting your colorWrite material 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 ); 

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

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

three.js r.71