javascript - 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 中提供的两个功能:Object3D.renderOrder 和 Material.colorWrite。

您需要确保不可见对象在它必须遮挡的对象之前渲染。

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

您可以通过将其 Material 的 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; // <===================
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; // <=================
mesh.renderOrder = 2;
mesh.position.z = 10;
scene.add( mesh );

three.js r.143