vue2+three.js 给图层绑定点击事件_vue three.js 点击

我们想要个相应的元素绑定点击事件就必须知道元素的一些信息，这些信息并不是由我们决定的，而是建模的人，我这里用的是图层的名字，当然他也有id，建模的人未必有程序思维，所以命名会很奇怪，比如：

代码示例：

参数说明：

object为我的3D模型对象

this.object = gltf.scene;

 options是一个数据字典，里边存有图层名字，只有点击时child.name能对应上options中的某一项才会触发相应逻辑

方法代码：

initClick() {
      let arr = this.options.map((item) => item.value);
      this.object.traverse((child) => {
        //点击
        if (child instanceof THREE.Mesh && arr.includes(child.name)) {
          child.userData.onClick = () => {
            //业务逻辑
          };
          child.userData.clickable = true; //将元素设置为可点击
        }
      });
    },

当然上面代码是针对Mesh（网格）的，可以理解为一个元素，比方说上图我的世界中的小人，那么我想点击一个房子怎么办（多个元素），于是我让建模工程师帮我把房子里的所有元素弄成一个分组，发现点击后是一个object3D，相比Mesh并没有点击事件，但是里边有一些Mesh，整体上看是一个树形结构

最后我用深度优先遍历算法的获取了object3D里的每一个Mesh（我认为他们的集合完全能代表一整个房屋），并给他们绑上了点击事件。如果各位大佬有更好的办法可以教教我，哈哈哈哈