如何在Three.js中获取2D纹理标签映射到3D模型的位置

你找到的旧帖依赖的Geometry已经被新版Three.js的BufferGeometry完全取代，下面给你两种可行方案，优先推荐新手友好的预处理方案：

一、适配新版Three.js的UV反查方案 #

如果必须从UV坐标反推3D位置，按以下步骤修改旧逻辑：

1. 提取模型的BufferGeometry数据
   加载OBJ模型后，从网格对象中获取顶点、UV和索引数据：

const geometry = mesh.geometry;
const positions = geometry.attributes.position.array; // 顶点坐标数组（x,y,z依次排列）
const uvs = geometry.attributes.uv.array; // UV坐标数组（u,v依次排列）
const indices = geometry.index ? geometry.index.array : null; // 面索引（存在时表示三角面的顶点索引）

2. 匹配目标UV范围的顶点
   假设你知道纹理标签的UV范围（比如某肌肉标签对应UV的u在0.2-0.3、v在0.4-0.5），遍历所有顶点UV筛选匹配项，再生成交互标记：

// 目标UV范围示例
const targetU = [0.2, 0.3];
const targetV = [0.4, 0.5];
const matchedPoints = [];

// 遍历所有UV对（每两个元素为一组u,v）
for (let i = 0; i < uvs.length; i += 2) {
  const u = uvs[i];
  const v = uvs[i + 1];
  // 注意：Three.js的UV v轴是从下到上，部分绘图软件是从上到下，需时可加v = 1 - v翻转
  if (u >= targetU[0] && u <= targetU[1] && v >= targetV[0] && v <= targetV[1]) {
    // 取出对应顶点的三维坐标
    const vertexIdx = i / 2;
    const x = positions[vertexIdx * 3];
    const y = positions[vertexIdx * 3 + 1];
    const z = positions[vertexIdx * 3 + 2];
    matchedPoints.push(x, y, z);
  }
}

// 用匹配到的顶点创建可交互标记（比如红色点云）
const markerGeo = new THREE.BufferGeometry();
markerGeo.setAttribute('position', new THREE.Float32BufferAttribute(matchedPoints, 3));
const markerMat = new THREE.PointsMaterial({ color: 0xff0000, size: 0.05 });
const interactiveMarker = new THREE.Points(markerGeo, markerMat);
scene.add(interactiveMarker);

注意：如果模型有索引（index不为空），建议按三角面筛选，避免零散顶点；复杂模型的UV可能重叠，需结合空间位置二次筛选。

二、更优的新手友好方案：建模阶段预处理 #

UV反查对新手来说容易踩坑（比如UV重叠、轴方向问题），更高效的方法是在建模软件（如Blender）中提前处理：

• 打开OBJ模型，选中需要交互的肌肉/部位的面，将其分离为独立网格或添加分组标记
• 导出OBJ时勾选「保留对象/组」选项
• 用Three.js加载后，直接获取对应子网格添加交互：

loader.load('muscle_model.obj', function (model) {
  model.traverse(child => {
    if (child.isMesh) {
      // 假设子网格的name对应肌肉名称，比如"Biceps"
      if (child.name === 'Biceps') {
        child.material.transparent = true;
        child.material.opacity = 0.7; // 标记可交互区域
        child.userData.interactive = true; // 标记为可交互对象
      }
    }
  });
  scene.add(model);
});

后续用Raycaster检测点击时，直接判断点击的网格是否标记了interactive即可，逻辑简单且准确率高。

新手必看提醒 #

• 优先选择建模分组方案，减少代码复杂度，避免UV反查的各种坑
• 若用UV反查，务必确认UV轴方向是否和Three.js一致（Three.js的v轴从下到上）
• 复杂模型的UV可能存在多区域映射，需结合模型空间位置筛选结果

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