三.js 透明物体遮挡 [英] three.js transparent object occlusion

问题描述

在一个three.js场景中，我想要一个不可见的对象，但仍然像可见一样遮挡场景中的其他对象.

In a three.js scene, I would like to have an object that's not visible, but still occludes other objects in the scene as if it was visible.

这可以通过three.js库实现吗?下面是一个例子:

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

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

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

场景 2:在场景 2 中，这是我希望相机看到的内容:

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

谁能告诉建议使用什么技术来实现这种效果?

Can anyone tell suggest a technique use to achieve such an effect?

推荐答案

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

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

为此，您需要使用three.js r.71 中提供的两个新功能:Object3D.renderOrder 和Material.colorWrite.

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

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

You need to make sure the invisible object is rendered prior to the object(s) it must occlude.

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

You control the rendering order with the renderOrder property.

您可以通过将其材质的 colorWrite 属性设置为 false 来使遮挡对象不可见.

You make the occluding object invisible by setting its material's colorWrite property 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 );

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

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

three.js r.71

three.js r.71

这篇关于三.js 透明物体遮挡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！