three.js 鼠标点击获取模型对象

three.js 创建模型后，想要实现点击模型获取模型对象触发相应事件。可以使用它提供的API THREE.Raycaster()

https://threejs.org/docs/index.html?q=Raycaster#api/en/core/Raycaster

 
//监听点击事件
window.addEventListener('click', (event) => {

    event.preventDefault();

    var raycaster = new THREE.Raycaster();

    var mouse = new THREE.Vector2();

    mouse.x = ((event.clientX) / renderer.domElement.clientWidth) * 2 - 1;

    mouse.y = -((event.clientY) / renderer.domElement.clientHeight) * 2 + 1;

    raycaster.setFromCamera(mouse, camera);

    var intersects = raycaster.intersectObjects(scene.children, true);

      //当intersects.length > 0说明碰点击到物体（可能为多个重合的物体），获取最近的物体名称进行判断

    if (intersects.length > 0) {
        console.log(intersects)
    }

});

如果当前场景不是整个页面 需要调整鼠标拾取位置 否则获取数据不准确具体调整代码如下（其中的renderer就是场景canvas大小）

        const mouse = new THREE.Vector2();
        // 转换为webgl坐标系下的鼠标位置
        mouse.x = ((event.clientX - renderer.domElement.getBoundingClientRect().left) / renderer.domElement.clientWidth) * 2 - 1;
        mouse.y = -((event.clientY - renderer.domElement.getBoundingClientRect().top) / renderer.domElement.clientHeight) * 2 + 1;

        // // 使用鼠标位置更新射线投射器
        raycaster.setFromCamera(mouse, camera);
        
        // // 计算鼠标点击的所有物体
        const intersects = raycaster.intersectObjects(scene.children, true);
        
        // 如果有物体被点击，输出它的信息
        if (intersects.length > 0) {
            // 取第一个被点击的物体
            let intersect = null;
            intersects.forEach((ele) => {
                if(ele.object.name == "partitionName"){
                    intersect = ele;
                }
            })
            if(intersect){
                // 输出被点击的物体信息
                console.log('输出被点击的物体信息');
                console.log(intersect.object);
                if(intersect.object.partitionInfo.volume){
                    intersect.object.partitionInfo.volume = Number(intersect.object.partitionInfo.volume).toFixed(2)
                }
                this.currentPartition = { ...intersect.object.partitionInfo }
                // console.log(intersects);
            }
            // 你可以获取更多的信息，例如点的位置、面的法线等
            // console.log(intersect.point);
            // console.log(intersect.face.normal);
        }