Three.js中intersects[0].obj.userData.URL未定义问题求助

我帮你分析下代码里的问题哈，你遇到的undefined错误主要来自两个关键问题，咱们一步步修正：

1. 射线检测的物体属性引用错误 #

你在事件处理函数里用了intersects[0].obj，但Three.js的Raycaster返回的相交结果中，对应的物体属性是object，不是obj！这直接导致你获取不到目标物体，自然会出现undefined。

修正后的事件处理函数：

function onDocumentMouseDown(event) {
  event.preventDefault();
  mouse.x = (event.clientX / renderer.domElement.clientWidth) * 2 - 1;
  mouse.y = -(event.clientY / renderer.domElement.clientHeight) * 2 + 1;
  raycaster.setFromCamera(mouse, camera);
  var intersects = raycaster.intersectObjects(objs);
  if (intersects.length > 0) {
    // 修正属性名：obj → object
    const targetObject = intersects[0].object;
    // 先判断URL是否存在，避免再次出现undefined
    if (targetObject.userData?.URL) {
      window.open(targetObject.userData.URL);
    }
  }
}

2. UserData绑定逻辑混乱 #

你绑定URL的循环逻辑有好几个问题：

• 循环变量u没有初始化，直接for (u; u < urllist.length; u++)会导致循环无法正常执行
• 你正在创建第i个物体，却给objs[u]赋值userData，索引完全不匹配
• 提前判断objs[i].userData.URL !== undefined会直接跳出循环，根本没机会给物体绑定URL

如果你的urllist长度和要创建的物体数量一致，直接在创建每个物体时对应赋值即可：

// 假设你是在循环创建多个物体，示例如下
for (let i = 0; i < urllist.length; i++) {
  const geometry = /* 你的几何体 */;
  const material = /* 你的材质 */;
  // 创建当前物体并加入objs数组
  const obj = objs[i] = new THREE.Mesh(geometry, material);
  // 直接给当前物体绑定对应索引的URL
  obj.userData = { URL: urllist[i] };
  // 记得把物体添加到场景中
  scene.add(obj);
}

这样每个物体都会正确绑定对应的URL，点击时就能正常打开链接啦～

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