Three.js 使用 raycaster intersectObjects 忽略被遮挡的对象答案

【问题标题】：Three.js ignore obscured objects using raycaster intersectObjectsThree.js 使用 raycaster intersectObjects 忽略被遮挡的对象
【发布时间】：2020-04-11 11:14:28
【问题描述】：

three.js Raycaster 示例展示了如何使用 intersectObjects 突出显示对象：

var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();

function onMouseMove( event ) {
    mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
    mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
}

function render() {
    raycaster.setFromCamera( mouse, camera );
    var intersects = raycaster.intersectObjects( scene.children );
    for ( var i = 0; i < intersects.length; i++ ) {
        intersects[ i ].object.material.color.set( 0xff0000 );
    }
    renderer.render( scene, camera );
}

window.addEventListener( 'mousemove', onMouseMove, false );
window.requestAnimationFrame(render);

https://threejs.org/docs/#api/en/core/Raycaster

但是，即使对象被另一个对象遮挡，这也会与对象相交。我创建了一个演示，显示您可以突出显示对象，即使它们位于球体对象后面：

https://codepen.io/kmturley/pen/gObgKee

注意在演示中如何突出显示球体后面的对象。 我们如何忽略被其他对象遮挡的对象？即使它们存在于 Camera Frustrum 中并由 Three.js 渲染？

我的用例是我实际上想隐藏球体背面的对象及其标签。

显示交叉点的示例：

【问题讨论】：

标签： javascript three.js 3d

【解决方案1】：

所以实际上是一个非常简单的解决方案。 intersectObjects 实际上按照与相机的距离顺序返回 Objects：

var intersects = raycaster.intersectObjects(points);

因此，通过选择数组中的第一项，您将始终获得最接近的对象：

console.log(intersects[0].object);

我必须更改的另一件事是将 Sphere 包含在 intersectObjects 列表中，以确保它会在其后面的任何内容之前被选中：

var points = [];
var geometry = new THREE.SphereGeometry(radius, 20, 20);
var material = new THREE.MeshBasicMaterial({color: 0xffffff, opacity: 0.2, transparent: true});
sphere = new THREE.Mesh(geometry, material);
scene.add(sphere);
points.push(sphere);

所以 intersectObjects 包含球体，但随后我在以下 if 语句中将其作为选定对象忽略：

var intersects = raycaster.intersectObjects(points);
if (intersects[0] && intersects[0].object !== sphere) {
  selected = intersects[0].object;
  selected.currentHex = selected.material.color.getHex();
  selected.material.color.setHex(0xffffff);
}

此演示现在会阻止球体后面的对象：

https://codepen.io/kmturley/pen/gObgKee

【讨论】：