Javascript three.js透明对象遮挡

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

这在three.js库中可能吗？以下是一个例子：

假设我有一个包含3个对象的three.js场景：对象a、对象b和对象c以及一个摄影机。我希望对象c对摄影机不可见，但仍然遮挡对象b。。。情景1： 在场景1中，以下是我希望摄影机看到的内容：

情景2： 在场景2中，以下是我希望摄影机看到的内容：

---

有人能告诉我一个实现这种效果的方法吗？

是的，在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 );

//材料
var material=新的三个。MeshPhongMaterial（）；
//网格a
var几何=新的三个平面几何（10,10,4,4）；
mesh=新的三个.mesh（几何体，material.clone（））；
网格。材质。颜色。设置（0xff0000）；
mesh.renderOrder=0；//这太棒了！我刚刚发布了另一个类似问题（）的更复杂的答案（基本上，如何修改webGLrenderer以支持类似的内容），我现在更新到这里。期待R71问世。