three.js 怎么点击加载完成的gltf模型？

Question

加载gltf文件的代码如下：

function loadGLTF(path, fileName) {
      var loader = new THREE.GLTFLoader();
      loader.load(`${path}${fileName}.gltf`, function (gltf) {
      
        let object = gltf.scene;
        object.scale.set(scale, scale, scale);
        scene.add(object);
      });
    }

这里加载出来的object是一个scene。
点击代码如下：

 window.addEventListener("mousedown", mousedown);
    var raycaster = new THREE.Raycaster();
    var mouse = new THREE.Vector2();
    function mousedown() {
      mouse.x = e.clientX / renderer.domElement.clientWidth * 2 - 1;
      mouse.y = -(e.clientY / renderer.domElement.clientHeight * 2) + 1;
      raycaster.setFromCamera(mouse, camera);
      var intersects = raycaster.intersectObjects(scene.children);
      if (intersects.length > 0) {
        console.log(intersects[0].object);
      }
    }

点击时，点击不到加载的gltf物体，返回的总是空，或者是其它非加载的物体。

Answer 1

只有硬写了- -，把加载模型递归children，每个children加个所属模型标识，放入一个数组，判断是否点击到了数组中的子元素，再根据子元素找所属模型

Answer 2

@坠入
您好,我最近也在研究这个问题. 按照这个递归的思路已经可以实现点击,但是遇到了新的问题想向您请教.
问题描述:
我的模型是一个简单的桥, 有很多部件, 但是 gltf 加载进来后把一些部件归为一组, 鼠标悬停到部件时只能高亮对应的组(可参见Demo), 不能高亮某部件. 不知道您是否有遇到过类似的问题.
在线运行的Demo:Demo
模型文件:modifiedLianXu.gltf
Code:Demo.html

Answer 3

怎么解决的,我的gltf 模型里面好多mesh