在 Three.js 场景中,我希望有一个不可见的对象,但仍然遮挡场景中的其他对象,就好像它是可见的一样。
这可以通过 Three.js 库实现吗?这是一个例子:
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:
Scenario 2:
In scenario 2, here is what I would like the camera to see:
任何人都可以建议使用一种技术来实现这种效果吗?
是的,在 Three.js 中,您可以创建一个不可见的对象,但仍然遮挡其他对象,就像它是可见的一样。
为此,您需要使用 Three.js 中提供的两个功能:Object3D.renderOrder
and 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; // <===================
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 );
三.js r.143
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)