three.js透明对象遮挡

Question

在一个three.js场景中,我希望有一个不可见的对象,但仍会遮挡场景中的其他对象,就好像它是可见的一样.

这可能与three.js库有关吗？这是一个例子:

假设我有一个包含3个对象的three.js场景:对象a,对象b和对象c以及摄像机.我希望对象c对相机不可见,但仍会遮挡对象b ...场景1: 在方案1中,这是我希望相机看到的内容:

场景2: 在方案2中,以下是我希望相机看到的内容:

任何人都可以告诉建议使用技术来达到这样的效果吗？

Answer 1

是的,在three.js中,您可以创建一个不可见的对象,但仍然会遮挡其他对象,就好像它是可见的一样.

要做到这一点,你需要使用three.js r.71中提供的两个新功能:Object3D.renderOrder和Material.colorWrite.

您需要确保不可见对象在它必须遮挡的对象之前呈现.

您可以使用renderOrder属性控制渲染顺序.

通过将其材质的colorWrite属性设置为,可以使遮挡对象不可见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 );

小提琴:http://jsfiddle.net/4vnsbdz6/1/

另一个小提琴:http://jsfiddle.net/4vnsbdz6/4/

three.js r.71