Javascript 从两组点计算仿射变换

我使用的是threejs，通过两组

THREE.Vector3

定义了两个矩形，每个矩形有4个顶点

如何计算将第一个矩形变换为第二个矩形的仿射变换

我想通过

.applyMatrix（matrix）

将计算出的仿射变换应用于第三个矩形

已解决：

/**
 * Transform a THREE.CSS3DObject object so that it aligns to a given rectangle.
 *
 * @param object: A THREE.CSS3DObject object.
 * @param v: A list of the 4 vertices of the rectangle (clockwise order) on which to align the object.
 */
function alignObject(object, v) {

   // width of DOM object wrapped via CSS3DObject
   var width = parseInt(object.element.style.width, 10);

   // compute rect vectors from rect vertices
   var v10 = v[1].clone().sub(v[0]);
   var v30 = v[3].clone().sub(v[0]);

   // compute (uniform) scaling
   var scale = v10.length() / width;

   // compute translation / new mid-point
   var position = new THREE.Vector3().addVectors(v10, v30).multiplyScalar(0.5).add(v[0]);

   // compute rotations
   var rotX = -v30.angleTo(new THREE.Vector3(0, -1, 0));
   // FIXME: rotY, rotZ

   // apply transformation
   object.scale.set(scale, scale, scale);
   object.position = position;
   object.rotateX(rotX);
}

---

这里有计算仿射矩阵的方法，例如，2D情况：。但要在3D中找到唯一的仿射变换，需要4个非共面点（2d-3个非共线点也是如此）。4个共面点（矩形顶点）的M矩阵是奇异的，没有逆矩阵，上述方法不适用

2d情况下的歧义示例：点B、C、D共线。一些仿射变换将它们移动到B、E、F点。但匹配仿射变换的数量是无限的。其中两个将一个点转换为G点或H点

有限类仿射变换存在一些解。例如，第三个矩形是否始终在XY平面内？ 如果为真，则变换后的矩形将位于与第二个矩形相同的平面上，您的问题将变得更简单-您需要计算更改后的向量中的坐标，即从（V1，V2，V3）到（V1'，V2'，V3'）。让我们用向量

A=V2-V1，B=V3-V1，A'=V2'-V1'，B'=V3'-V1'

。XY平面中的每个点P（例如，第三个矩形垂直面）是线性组合

P=V1+t*A+u*B

，它是新平面中的变换图像

P'=V1'+t*A'+u*B

”。在这种情况下不难找到t，u系数：

t=（P.x-V1.x）/（V2.x-V1.x）
u=（P.y-V1.y）/（V2.y-V1.y）

我在寻找同样的东西。我们发现：

还没有尝试过，但是fromTriangles（）函数看起来很有希望

矩阵。来自三角形（t1，t2）；//返回从t1生成t2所需的矩阵

---

编辑：哎呀，我还以为这是我的评论呢。这成了一个答案。哦，好吧。

我已经用我想要达到的目标的草图更新了这个问题。至少在这种情况下，应存在唯一的仿射变换M。第一个矩形位于XY平面，原点中点，轴平行于X/Y。第二个矩形均匀缩放，但可任意平移和旋转。这个案子有没有一个封闭的解决方案？@oberstet编辑了一些假设谢谢你的回答。是的，改变向量基。但是我需要实际的转换M来与三个一起使用。与此同时，我已经弄明白了（见更新的问题）。无论如何谢谢你！图书馆不再存在了，但这是一个很好的选择：谢谢。我来看看。看起来是个很棒的工具。