如何在THREE.js中通过鼠标点击仅选中特定对象？

你的代码里有两个关键错误导致点击任意位置都会触发动画，修正后就能实现仅选中目标对象的效果：

错误点分析 #

1. 条件判断用错运算符：你用了赋值符号=而不是相等比较符号===，这会导致每次循环都把'cube'赋值给目标属性，进而强制触发相机动画，完全失去判断作用。
2. 获取对象名称的方式错误：射线检测返回的intersects数组元素是交点信息对象，不是Mesh本身，要获取对象名称得访问intersects[i].object.name，而非intersects[i].name。

修正后的点击事件代码 #

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

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

    raycaster.setFromCamera( mouse, camera );
    const intersects = raycaster.intersectObjects( scene.children );

    for ( var i = 0; i < intersects.length; i++ ) {
        // 正确获取Mesh对象并判断名称
        if(intersects[ i ].object.name === 'cube') {
            gsap.to(camera.position, {z: 100, duration: 10});
            // 找到目标后跳出循环，避免不必要的遍历
            break;
        }
    }
}

window.addEventListener( 'click', onMouseClick, false );

额外优化建议 #

• 如果场景里对象很多，可以在intersectObjects方法里只传入目标对象的数组，比如raycaster.intersectObjects([cube])，减少射线检测的计算量。
• 给未命名的对象（比如你的earth）也设置一个名称，方便后续调试和区分。

内容的提问来源于stack exchange，提问作者Влад П