Three.js中如何为GLTF loader加载的对象添加超链接？

完全可以在你现有代码基础上实现该功能，核心通过Three.js射线检测（Raycaster）判断鼠标点击是否命中目标模型，命中后触发跳转逻辑即可。

核心实现逻辑 #

• 模型加载完成后，通过userData属性给模型挂载对应跳转地址
• 监听页面点击事件，将鼠标屏幕坐标转换为Three.js要求的归一化设备坐标
• 用射线从相机位置沿鼠标点击方向发射，检测是否命中可点击模型
• 命中模型后读取提前挂载的链接地址，执行页面跳转

修改后完整代码 #

以下代码完全保留你原有加载、位置、缩放逻辑，仅新增点击跳转相关代码：

// 新增：初始化射线检测器、鼠标坐标实例
const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2();
// 新增：存储所有需要检测点击的3D对象
const clickableObjects = [];

var loader = new THREE.GLTFLoader();
var mesh;
loader.load('globe.glb', function(gltf){
  console.log(gltf);
  mesh = gltf.scene;
  console.log(mesh.children[0]);
  mesh.children[0].material = new THREE.MeshLambertMaterial();
  
  mesh.position.z = z;
  mesh.position.x = x
  if(x!=0){
    gltf.scene.scale.set(0.5,0.5,0.5)
  }
  if(y==1){
    mesh.position.y = x
  }
  if(y==2){
    mesh.position.y = -1*x
  }

  // 新增：给当前模型绑定跳转地址，替换为你的实际目标地址
  mesh.userData.jumpUrl = "替换为你需要跳转的地址";
  // 新增：将模型加入点击检测列表
  clickableObjects.push(mesh);

  scene.add( mesh );
  
});

// 新增：全局点击事件监听
window.addEventListener('click', (e) => {
  // 将鼠标屏幕坐标转换为Three.js归一化坐标（范围-1到1）
  mouse.x = (e.clientX / window.innerWidth) * 2 - 1;
  mouse.y = -(e.clientY / window.innerHeight) * 2 + 1;

  // 更新射线：从相机位置出发，穿过鼠标点击点
  raycaster.setFromCamera(mouse, camera);
  // 检测射线与可点击对象的交集，第二个参数true表示递归检测组内所有子网格
  const hitResults = raycaster.intersectObjects(clickableObjects, true);

  if(hitResults.length > 0) {
    // 向上遍历查找绑定了跳转地址的父级对象，避免点到子网格拿不到链接
    let target = hitResults[0].object;
    while(target && !target.userData.jumpUrl) {
      target = target.parent;
    }
    if(target?.userData.jumpUrl) {
      // 新标签页打开链接
      window.open(target.userData.jumpUrl, '_blank');
      // 如果需要当前页面跳转，注释上面的open，启用下面这行
      // window.location.href = target.userData.jumpUrl;
    }
  }
})

注意事项 #

• 代码中raycaster.setFromCamera传入的camera参数，要替换为你项目中实际初始化使用的相机实例，否则射线检测会出现位置偏差
• 必须开启递归检测（intersectObjects第二个参数传true），因为GLTF加载返回的gltf.scene是Group容器对象，本身不参与射线命中计算，只有递归才能检测到内部的实际网格
• 如果需要给模型的不同部位绑定不同跳转链接，不需要给整个根容器绑地址，找到对应子网格单独设置userData.jumpUrl并加入clickableObjects列表即可
• 如果需要实现鼠标悬停在模型上变成手型的效果，可以把相同的射线检测逻辑绑定到mousemove事件，命中时设置document.body.style.cursor = 'pointer'，未命中时改回default

内容的提问来源于stack exchange，提问作者jumbled_joe