如何基于TensorFlow.js检测的人脸scaledMesh在ThreeJS中构建人脸几何？

可能的问题及修复方案 #

• 坐标系统不匹配
  TensorFlow人脸检测输出的坐标多基于图像像素或相对比例，和ThreeJS的三维坐标系统不兼容，需转换适配：

  • 若坐标是图像像素值，需转为ThreeJS归一化坐标（范围[-1,1]），同时反转y轴（图像y轴向下，ThreeJS y轴向上）
  • 若为相对比例（0-1范围），直接映射到可视范围即可
    示例转换代码：

  // 假设imgWidth、imgHeight为检测图像的宽高，TRIANGULATION是[x1,y1,z1,x2,y2,z2,...]格式的数组
  const normalizedVertices = TRIANGULATION.map((val, idx) => {
    switch(idx % 3) {
      case 0: // X坐标：像素转归一化
        return (val / imgWidth) * 2 - 1;
      case 1: // Y坐标：反转轴后转归一化
        return 1 - (val / imgHeight) * 2;
      default: // Z坐标：按需缩放，避免模型过大
        return val * 0.01;
    }
  });
  const verticesArr = new Float32Array(normalizedVertices);
  

• 缺少三角剖分索引
  TensorFlow的scaledMesh通常只是人脸特征点列表（比如468个关键点），而非三角化的面数据。直接按每3个顶点生成三角面会导致模型错乱，需补充标准人脸三角剖分索引：

  1. 引入MediaPipe Face Mesh等标准的人脸三角剖分数组（如TRIANGLES，每3个元素为一组顶点索引）
  2. 给BufferGeometry设置索引属性
     示例代码：

  const verticesArr = new Float32Array(TRIANGULATION);
  const geo = new THREE.BufferGeometry();
  geo.setAttribute("position", new THREE.BufferAttribute(verticesArr, 3));
  // 假设TRIANGLES是标准三角剖分索引数组
  geo.setIndex(new THREE.BufferAttribute(new Uint16Array(TRIANGLES), 1));
  const mat = new THREE.MeshBasicMaterial({ wireframe: true });
  const mesh = new THREE.Mesh(geo, mat);
  scene.add(mesh);
  

• 模型缩放与位置校准
  人脸模型可能因坐标范围问题出现大小不当、位置偏移的情况，可通过以下方式调整：

  geo.computeBoundingBox();
  // 将模型中心移到原点
  const center = geo.boundingBox.getCenter(new THREE.Vector3());
  mesh.position.sub(center);
  // 自动缩放到合适大小，适配ThreeJS可视范围
  const size = geo.boundingBox.getSize(new THREE.Vector3());
  const maxSize = Math.max(size.x, size.y, size.z);
  mesh.scale.setScalar(2 / maxSize);
  

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