Three.js使用raycaster intersectObjects忽略模糊的对象

Question

[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

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

我的用例是我实际上想隐藏位于球体后部的对象及其标签。

显示交叉点的示例：

• https://threejsfundamentals.org/threejs/lessons/threejs-align-html-elements-to-3d.html
• https://stemkoski.github.io/Three.js/Mouse-Click.html
• https://callumprentice.github.io/apps/country_selector/index.html
• http://jensljungblad.github.io/musicmap-globe/

Answer 1

因此实际上是一个非常简单的解决方案。 intersectObjects实际上会按照距相机的距离顺序返回对象：

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