如何用Three.js为3D物体/网格添加超链接？点击盒子跳转失效求助

你的代码核心问题是缺少射线检测的关键逻辑，intersects变量根本没定义，点击时自然无法识别点击到了哪个物体。按下面的步骤修改就能实现功能：

• 先定义射线投射器和鼠标坐标变量，用来检测点击与3D物体的交互
• 在点击事件里把屏幕鼠标坐标转换成Three.js需要的标准化坐标
• 执行射线检测，获取相交的物体列表后再判断跳转

修改后的完整代码：

// 新增：定义射线投射器和鼠标向量
const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2();

const coolTexture = new THREE.TextureLoader().load('cool.jpg');
const cool = new THREE.Mesh(
  new THREE.BoxGeometry(3, 3, 3),
  new THREE.MeshBasicMaterial({
    color: Math.random() * 0xffffff
  })
);

cool.userData = {
  URL: "http://stackoverflow.com"
};
scene.add(cool);

// 修改点击事件函数，添加射线检测逻辑
function linki(event) {
  // 把鼠标坐标转换成Three.js的标准化设备坐标
  mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
  mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;

  // 更新射线投射器的射线
  raycaster.setFromCamera(mouse, camera);

  // 检测射线与场景中物体的相交情况
  const intersects = raycaster.intersectObjects(scene.children);

  if (intersects.length > 0) {
    // 确保目标物体有URL才跳转
    if (intersects[0].object.userData.URL) {
      window.open(intersects[0].object.userData.URL);
    }
  }
}

document.body.onclick = linki

注意：代码里的camera是你场景中已经定义好的相机实例，要确保它已经正确初始化并添加到场景中，否则射线检测会失效。

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