在一个 Three.js 场景中，我想要一个不可见的对象，但仍然像可见一样遮挡场景中的其他对象。
这可以通过three.js库实现吗？下面是一个例子：
假设我有一个包含 3 个对象的three.js 场景：对象a、对象b 和对象c 以及一个相机。我希望物体 c 对相机不可见，但仍然遮挡物体 b... 场景 1：
在场景 1 中，这是我希望相机看到的：
场景 2：
在场景 2 中，这是我希望相机看到的内容：
谁能告诉建议使用一种技术来实现这种效果？
三.js 透明物体遮挡
IT技术
javascript
three.js
2021-02-22 12:24:45
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/
三.js r.71