如何将OpenCV单应性矩阵应用于Three.js平面并提取平移旋转？

嘿，这个问题我刚好折腾过，咱们一步步理清楚：

首先得明确：OpenCV输出的3x3单应性矩阵是2D齐次坐标的投影变换，而Three.js是3D引擎，所以我们需要把这个2D变换适配到Three.js的场景中，有两种靠谱的方案：

方案1：自定义着色器直接对纹理应用单应性变换 #

这是最贴合OpenCV拼接逻辑的方式——因为OpenCV的单应性本质是把原图像的像素坐标映射到拼接后的全景坐标，我们可以在片元着色器里直接复刻这个映射：

步骤： #

1. 编写自定义材质，添加单应性矩阵的uniform变量：

const planeMaterial = new THREE.ShaderMaterial({
  uniforms: {
    texture: { value: yourVideoTexture },
    hMatrix: { value: new THREE.Matrix3() } // 这里传入OpenCV的单应性矩阵
  },
  vertexShader: `
    varying vec2 vUv;
    void main() {
      vUv = uv;
      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
    }
  `,
  fragmentShader: `
    uniform mat3 hMatrix;
    uniform sampler2D texture;
    varying vec2 vUv;

    void main() {
      // 把UV坐标转成齐次坐标，应用单应性变换
      vec3 uvHomogeneous = vec3(vUv, 1.0);
      vec3 transformedUv = hMatrix * uvHomogeneous;
      // 齐次坐标转成普通UV（除以第三个分量）
      transformedUv.xy /= transformedUv.z;
      // 采样纹理
      gl_FragColor = texture2D(texture, transformedUv.xy);
    }
  `
});

2. 把OpenCV得到的单应性矩阵传入uniform：

// 假设你的OpenCV单应性矩阵是数组形式：[h00, h01, h02, h10, h11, h12, h20, h21, h22]
planeMaterial.uniforms.hMatrix.value.fromArray(yourOpenCVHMatrix);

3. 注意坐标系统差异：OpenCV的图像原点在左上角（Y轴向下），而Three.js默认纹理原点在左下角（Y轴向上），你可以直接设置yourVideoTexture.flipY = false来对齐，避免额外的矩阵校正。

方案2：将单应性矩阵转换为Three.js的4x4模型矩阵 #

如果你想通过平面的3D变换来实现效果，可以把3x3的单应性矩阵扩展为4x4的模型矩阵（假设平面在XY平面，Z轴无变换）：

function convertHToThreeMatrix(hArray) {
  // 构建4x4矩阵，单应性作用于XY平面，Z轴保持不变
  return new THREE.Matrix4().set(
    hArray[0], hArray[1], 0, hArray[2],
    hArray[3], hArray[4], 0, hArray[5],
    0,         0,         1, 0,
    hArray[6], hArray[7], 0, hArray[8]
  );
}

// 应用到平面
const planeMesh = new THREE.Mesh(new THREE.PlaneGeometry(), planeMaterial);
planeMesh.matrix = convertHToThreeMatrix(yourOpenCVHMatrix);
planeMesh.matrixAutoUpdate = false; // 手动控制矩阵，关闭自动更新
scene.add(planeMesh);

这种方法适合你想把平面作为3D物体来控制的场景，但同样需要注意坐标翻转的问题。

这里得先泼个冷水：单应性矩阵不是纯刚体变换（旋转+平移），它还包含缩放、剪切、透视变形的信息。只有满足特定条件时，才能准确提取旋转和平移：

能准确提取的场景： #

当你的相机是围绕平面旋转（无前后平移），且拍摄的是纯平面物体时，单应性矩阵可以分解为：H = K * R * K⁻¹，其中K是相机内参，R是旋转矩阵。

提取步骤：

1. 用相机内参K对单应性矩阵做归一化：H_norm = K⁻¹ * H * K，得到归一化后的旋转矩阵R。
2. 把R转换成Three.js的旋转参数：

const threeMat3 = new THREE.Matrix3().fromArray(normalizedRArray);
const quaternion = new THREE.Quaternion().setFromRotationMatrix(threeMat3);
planeMesh.quaternion.copy(quaternion);

不能准确提取的场景： #

如果相机有前后平移，或者拍摄的场景有深度，单应性矩阵里包含了透视变形的信息，这时候提取的旋转和平移只是近似值，无法还原OpenCV的拼接效果——因为刚体变换（旋转+平移）无法模拟透视变形。这种情况下，直接用前面的两种方案（着色器/4x4矩阵）会更靠谱。

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