mapbox-gl.js three.js 添加的几何体的点击事件 如何获取

在Mapbox GL JS 中添加的 Three.js 几何体，并希望监听其点击事件，你需要结合两者的事件系统。以下是基本步骤：

1. 首先，在Three.js中，你需要给几何体添加一个`raycaster`和`mouse拾取`功能。当你鼠标点击时，它会检查这个位置是否落在你的几何体上。

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

// 当地图触发click事件时
map.on('click', function(e) {
    mouse.x = (e.lngLat.lng * Math.PI / 180);
    mouse.y = (e.lngLat.lat * Math.PI / 90) - 0.5; // 将经纬度转为屏幕坐标
    raycaster.setFromCamera(mouse, camera);

    const intersects = raycaster.intersectObjects(scene.children); // 交集数组
    if (intersects.length > 0) {
        const hitObject = intersects[0].object;
        handleHitObject(hitObject);
    }
});

2. `handleHitObject`函数负责处理几何体被点击后的操作，例如传递给Mapbox GL JS 或者执行其他定制的逻辑。

function handleHitObject(hitObject) {
    console.log('Clicked on:', hitObject); // 获取到被点击的3D模型

    // 如果需要，你也可以在这里更新Mapbox GL JS 的UI，如显示信息窗口
}

请注意，这里的代码示例简化了处理过程，实际应用中可能需要考虑浏览器的差异以及性能优化。