如何将MediaPipe归一化屏幕空间坐标转换为世界空间米制坐标？

问题分析 #

你当前的转换代码存在几个关键问题：

• 错误使用body的边界矩形计算坐标偏移，应该以视频元素本身的视口位置为准
• unproject仅生成相机射线上的方向向量，未指定深度（模型到相机的实际距离），无法得到有效世界坐标

修正方案 #

步骤1：获取正确的视口坐标 #

MediaPipe返回的x/y是相对于视频尺寸的归一化值，先转成视频在浏览器视口中的绝对坐标，再转换为WebGL标准设备坐标（NDC，范围-1到1）。

步骤2：通过相机射线计算世界坐标 #

利用Three.js射线投射，从相机出发经过目标屏幕点，在指定深度处截取世界坐标（比如设置模型距相机1米，可按需调整）。

修正后的代码 #

// 假设已获取视频元素ref和3D模型元素
if (results.faceLandmarks) {
  for (const landmarks of results.faceLandmarks) {
    // 1. 取出MediaPipe归一化关键点坐标
    const normX = landmarks[164].x;
    const normY = landmarks[164].y;

    // 2. 获取视频元素的视口边界信息
    const videoEl = videoRef.current;
    const videoRect = videoEl.getBoundingClientRect();
    
    // 3. 转换为浏览器视口内的像素坐标
    const viewportX = videoRect.left + normX * videoRect.width;
    const viewportY = videoRect.top + normY * videoRect.height;

    // 4. 转换为WebGL标准设备坐标（NDC）
    const ndcX = (viewportX / window.innerWidth) * 2 - 1;
    const ndcY = -(viewportY / window.innerHeight) * 2 + 1;

    // 5. 获取A-Frame相机并创建射线
    const scene = AFRAME.scenes[0];
    const camera = scene.camera;
    const raycaster = new THREE.Raycaster();
    raycaster.setFromCamera(new THREE.Vector2(ndcX, ndcY), camera);

    // 6. 设置模型到相机的距离（示例为1米，可根据场景调整）
    const distanceFromCamera = 1;
    const worldPosition = raycaster.ray.at(distanceFromCamera);

    // 7. 将世界坐标应用到3D模型
    const modelEl = document.querySelector('#your-target-model');
    modelEl.setAttribute('position', {
      x: worldPosition.x.toFixed(3),
      y: worldPosition.y.toFixed(3),
      z: worldPosition.z.toFixed(3)
    });
  }
}

额外注意事项 #

• 若需要更精准的面部深度，可结合MediaPipe返回的z值（归一化深度，需自行映射为实际米制距离）
• 确保视频元素未被CSS变换（如transform）影响，否则getBoundingClientRect会返回不准确的位置
• A-Frame默认相机位置为(0, 1.6, 0)，可根据场景需求调整深度值

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