How does three.js click to load the finished gltf model?

the code to load the gltf file is as follows:

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);
      });
    }

the object loaded here is a scene.
Click the code as follows:

 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);
      }
    }

when you click, you cannot click on the loaded gltf object, and the returned object is always empty, or other non-loaded objects.

Sep.22,2021

can only be hard-written-- add a model ID to each children of the loading model recursively, put it into an array, determine whether it clicks on the child elements in the array, and then find the model


@ fall into
Hello, I have also been studying this problem recently. According to this recursive idea, you can click, but when you encounter a new problem, I would like to ask you.
problem description:
my model is a simple bridge with many parts, but gltf loads some parts into a group. When you hover over a part, you can only highlight the corresponding group (see Demo), can not highlight a component. I wonder if you have encountered similar problems.
Demo running online : Demo.html


how to solve the problem, There are many mesh in my gltf model

Menu