使用 raycaster 选择 gltf 的特定元素并添加事件侦听器

Question

我正在构建一个交互式网络应用程序。我已将 glb 文件加载到场景中，现在我想添加 2 个功能：

1. onMouseover 在对象的其中一个元素上，我想更改该元素的颜色。

2. 3D 对象由 Texture_Group[Object3D] 组成，如下面的控制台日志所示。纹理组本质上是拼写出 HAJDUK 的 3D 字母（对象），但我已将它们作为分组的 .glb 文件导入，我想添加一个事件侦听器，以便在单击单个字母（对象）时加载不同的链接对于每个单独的对象。

我的困惑是，我是否可以通过使用 raycaster 以某种方式做到这一点，或者我是否需要进一步遍历 Texture_Group 并为此开发一种 if else 逻辑，以及如何做到这些？
我猜我需要使用光线投射器并遍历场景，但我有点卡住了。感谢您的任何帮助，如果我需要提供其他任何东西，请现在告诉我，这是我的第一个问题。

借助我在网上找到的一些代码，我在 console.log 中遍历了我的场景，并根据我的情况对其进行了一些调整。

这是我的 app.js 代码：

/*jshint esversion: 6 */

let scene, camera, renderer, h, controls, raycaster, mouse;

function init() {

  scene = new THREE.Scene();

  //Camera

  camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);

  camera.position.set(0, 6, 6);

  const myCanvas = document.getElementById('myCanvas');

  //Renderer

  renderer = new THREE.WebGLRenderer({

    canvas: myCanvas,

    antialias: true,

  });

  renderer.setClearColor(0xcfd4d8);

  renderer.setPixelRatio(window.deviceSPixelRatio);

  renderer.setSize(window.innerWidth, window.innerHeight);

  document.body.appendChild(renderer.domElement);

  //Controls

  controls = new THREE.OrbitControls(camera, myCanvas);

  controls.target.set(0, 6, 0);

  controls.update();

  controls.enableDamping = true;

  controls.dampingFactor = 0.25;

  controls.screenSpacePanning = false;

  controls.minDistance = -20;

  controls.maxDistance = 100;

  controls.maxPolarAngle = Math.PI;

  controls.enableZoom = true;

  controls.rotateSpeed = 0.3;

  controls.zoomSpeed = 10.0;

  //Lights

  const light = new THREE.AmbientLight(0xffffff, 0.5);

  scene.add(light);

  const light2 = new THREE.PointLight(0xffffff, 0.5);

  scene.add(light2);

  //Loader

  const loader = new THREE.GLTFLoader();

  loader.load(

    'content/hajdukzagltf.glb',

    function (gltf) {

      h = scene.add(gltf.scene);

      h.position.set(6, -2, 1);

      console.log(dumpObject(h).join('\n'));

      console.log(gltf);

    }

  );

}