使用Three.js

Question

我正在尝试在画布上绘制图像的透视投影 我用perspective-transform来计算变换矩阵。后来，我用这个矩阵来填充CSS transform.matrix3d

const transform = PerspT([0, 0, width, 0, 0, height, width, height], [dest1.x, dest1.y, dest2.x, dest2.y, dest3.x, dest3.y, dest4.x, dest4.y]);
let t = transform.coeffs;
t = [
  t[0], t[3], 0, t[6],
  t[1], t[4], 0, t[7],
  0, 0, 1, 0,
  t[2], t[5], 0, t[8]
];
t = 'matrix3d(' + t.join(', ') + ')';
renderer.setStyle(element, 'transform', t);

效果很好，但我也想保存图像，因此我使用了html2canvas。不幸的是，html2canvas不支持CSS转换。

现在我尝试在HTML画布上自己实现CSS转换。我知道透视转换不适用于2D上下文，但我可以在画布上渲染WebGL场景。我可以将图像设置为3D平面的纹理，应用变换矩阵并渲染它。但是，为了渲染3D场景，我需要设置摄像机的位置。我在申请的背景下没有这种立场。如果没有关于相机的附加信息，CSS 3D转换如何工作？我怎么能用WebGL / Three.js实现它？

我在纯JS中找到了一些纹理映射的解决方案，但这种渲染对于Web浏览器来说是一种压力。根据我对OpenGL的经验，我认为我正在寻找某种UV纹理映射算法。

我只想基于4个源和4个目标点执行此类转换：