Three.js 为3js中的多维数据集添加单击事件侦听器

在我的代码中有两个多维数据集，我想向它们添加click事件侦听器。例如，提醒用户单击哪个多维数据集。当我将单击事件监听器添加到文档时，它工作得非常好，但是当我将相同的单击事件监听器添加到多维数据集时，它没有显示任何内容。这是我的部分代码

<script type = "text/javascript" src = "three.min.js"></script>
<script type="text/javascript">
var camera = new THREE.PerspectiveCamera(70,window.innerWidth/window.innerHeight,0.1,1000);
var scene = new THREE.Scene();
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);

document.body.appendChild(renderer.domElement);
camera.position.z=30;

var geometry = new THREE.CubeGeometry(10,10,10);
var material = new THREE.MeshBasicMaterial({color:0x778899});
var cube = new THREE.Mesh(geometry,material);
cube.addEventListener("mousedown", onDocumentMouseDown, false);
cube.position.x = -10;
scene.add(cube);

var cube1 = new THREE.Mesh(geometry,material);
cube.addEventListener("mousedown", onDocumentMouseDown, false);
cube1.position.x=10;
scene.add(cube1);

var render = function(){
    var timer = Date.now()*-0.0002;
    requestAnimationFrame(render);
    camera.position.x = 30* Math.cos(timer);
    camera.position.z = 30* Math.sin(timer);

    camera.lookAt(scene.position);
    renderer.render(scene,camera);
};

render();

function onDocumentMouseDown(event){
    alert('hi');
}
</script>

var摄像机=新的三透视摄像机（70，窗口内宽/窗口内高，0.11000）；
var scene=new THREE.scene（）；
var renderer=new THREE.WebGLRenderer（）；
renderer.setSize（window.innerWidth、window.innerHeight）；
document.body.appendChild（renderer.doElement）；
摄像机位置z=30；
var几何=新的三立方测量法（10,10,10）；
var material=新的三个.MeshBasicMaterial（{color:0x778899}）；
var cube=新的三个网格（几何体、材质）；
多维数据集。addEventListener（“mousedown”，onDocumentMouseDown，false）；
cube.position.x=-10；
场景.添加（立方体）；
var cube1=新的三个网格（几何体、材质）；
多维数据集。addEventListener（“mousedown”，onDocumentMouseDown，false）；
立方1.位置x=10；
场景。添加（立方体1）；
var render=function（）{
var timer=Date.now（）*-0.0002；
请求动画帧（渲染）；
camera.position.x=30*Math.cos（定时器）；
camera.position.z=30*Math.sin（定时器）；
摄像机。注视（场景。位置）；
渲染器。渲染（场景、摄影机）；
};
render（）；
函数onDocumentMouseDown（事件）{
警报（“hi”）；
}

addEventListener

只能用于DOM元素。看

如果要在Three.js场景中选择对象，应查看Three.js

光线投射器基本上会将一条光线从摄影机发送到场景中，并返回一组与光线相交的对象。要使用光线投射器，需要将

addEventListener

附加到window对象或Three.js画布

例如：

window.addEventListener（'mousemove'，onMouseMove，false）

在Three.js示例页面上有很多使用Raycaster的示例。
您还可以使用Threex.js的DomeEvents向对象网格添加侦听器

var domEvents = new THREEx.DomEvents(camera, renderer.domElement);
domEvents.addEventListener(cube, 'mousedown', onDocumentMouseDown, false);
domEvents.addEventListener(cube1, 'mousedown', onDocumentMouseDown, false);

function onDocumentMouseDown(event){
    if (event.target == cube)
        //do stuff
}

默认情况下，不支持为Three.js对象添加click listener

您应该结合使用光线投射器和鼠标事件：

export const addObjectClickListener = (
          camera,
          scene,
          raycaster,
          objectToWatch,
          onMouseClick,
        ) => {
          const objectToWatchId = objectToWatch.uuid;
          let mouse = new THREE.Vector2();

          document.addEventListener(
            "click",
            (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);

              const isIntersected = intersects.find(
                (intersectedEl) => intersectedEl.object.uuid === objectToWatchId
              );

              if (isIntersected) {
                onMouseClick();
              }
            },
            false
          );
        };

这需要几个参数：


摄像机-三个摄像机（例如透视）
第三幕，第三幕
雷卡斯特-三，雷卡斯特
objectToWatch-Three.Object（要监视单击事件的目标网格）
onMouseClick-回调

您可以对悬停和其他事件执行类似的操作。只需注意性能，因为每次调用此函数时都会为全局鼠标事件注册新的侦听器。所以，如果您需要添加许多可单击的对象，您可能希望以其他方式进行添加。
如何将此addObjectClickListener添加到应用程序的副本？