threejs添加点击事件

要在 Three.js 中添加点击事件，需要使用 JavaScript 事件监听器和 Raycaster。

首先，创建一个 Raycaster 对象。Raycaster 对象用于检测鼠标点击位置是否与 Three.js 场景中的任何物体相交。

var raycaster = new THREE.Raycaster();

然后，在渲染循环中检测鼠标点击事件。使用事件监听器来检测点击事件，并将点击位置的坐标转换为 Three.js 中的坐标。

document.addEventListener('mousedown', onMouseDown, false);

function onMouseDown(event) {
    // 将鼠标点击位置的屏幕坐标转换为 Three.js 中的坐标
    var mouse = new THREE.Vector2();
    mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
    mouse.y = -( event.clientY / window.innerHeight ) * 2 + 1;

    // 通过 Raycaster 检测鼠标点击位置是否与场景中的物体相交
    raycaster.setFromCamera(mouse, camera);
    var intersects = raycaster.intersectObjects(scene.children, true);

    // 如果有物体被点击到，则执行相应的操作
    if (intersects.length > 0) {
        // 获取被点击的物体
        var clickedObject = intersects[0].object;

        // 执行相应的操作
        // ...
    }
}

在 `onMouseDown` 函数中，使用 `setFromCamera` 方法将鼠标点击位置的屏幕坐标转换为 Three.js 中的坐标，并使用 `intersectObjects` 方法检测鼠标点击位置是否与场景中的物体相交。如果有物体被点击到，则可以执行相应的操作。

注意，`intersectObjects` 方法的第二个参数为 true，表示检测子物体。如果要忽略某些子物体，则需要将其设置为 `object3d.userData.ignoreRaycast = true`。