three.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

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