Model Viewer加载GLB模型时点击部件获取对应数据的实现方案问询

你已有的基础渲染代码如下，可直接基于此扩展交互逻辑：

<model-viewer 
  src="https://modelviewer.dev/shared-assets/models/Astronaut.glb"
  alt="A 3D model of an astronaut"
  auto-rotate
  camera-controls>
</model-viewer>

实现逻辑说明 #

底层封装了Three.js的射线检测能力，可直接通过内置API获取点击交点的所有关联信息，无需自行实现3D空间坐标转换逻辑。

完整可运行代码示例 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <!-- 引入model-viewer依赖 -->
  <script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
</head>
<body>
<!-- 定义模型渲染容器 -->
<model-viewer 
  id="customModel"
  src="替换为你自有GLB文件的访问地址"
  alt="自定义3D模型"
  camera-controls
  style="width: 100%; height: 800px;">
</model-viewer>

<script>
const modelViewer = document.querySelector('#customModel');

// 等待模型加载完成后绑定交互事件
modelViewer.addEventListener('load', () => {
  // 绑定模型区域点击事件
  modelViewer.addEventListener('click', async (e) => {
    // 将屏幕点击坐标转换为模型空间内的交点信息
    const intersectResult = await modelViewer.positionAndNormalFromPoint(e.clientX, e.clientY);
    
    // 判断是否点击到模型实体区域
    if (intersectResult) {
      // 提取所需数据
      const click3dPoint = intersectResult.point; // 模型空间内三维坐标
      const hitMesh = intersectResult.mesh; // 被点击的网格实例
      const nodeName = hitMesh.name; // GLTF中定义的节点名称
      const rawGltfAttrs = hitMesh.userData.gltf || {}; // GLTF原始JSON中的节点属性、extras自定义字段等

      // 弹窗输出示例，可替换为你自己的客户端数据传递逻辑
      alert(`
点击三维坐标：x: ${click3dPoint.x.toFixed(2)}, y: ${click3dPoint.y.toFixed(2)}, z: ${click3dPoint.z.toFixed(2)}
被点击节点名称：${nodeName}
节点原始GLTF属性：${JSON.stringify(rawGltfAttrs, null, 2)}
      `);
    }
  });
});
</script>
</body>
</html>

可获取的核心数据说明 #

• 点击坐标：intersectResult.point返回模型空间内的三维坐标值，可根据需要转换为世界坐标或屏幕坐标
• 网格实例：intersectResult.mesh返回Three.js原生Mesh实例，可读取面、顶点、材质等所有几何信息
• GLTF原始数据：mesh.userData.gltf字段可直接读取GLB文件中嵌入的GLTF JSON所有原始配置，包括自定义的extras字段、节点层级关系等

注意事项 #

• 导出自有GLB文件时，需要提前给需要识别的节点设置明确的名称、自定义属性，否则读取到的节点名称会为空或默认值
• 若模型包含多层级子节点，可通过遍历mesh.parent属性获取上层节点的相关数据
• 数据拿到后可根据你的客户端类型自行扩展传递逻辑，比如调用JSBridge给原生APP发消息、发起接口请求、触发页面其他交互等

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