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

Question

我正在构建一个交互式网络应用程序。我已将 glb 文件加载到场景中，现在我想添加 2 个功能：onMouseover 在对象的其中一个元素上，我想更改该元素的颜色。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);    }  );}