2

我正在使用threejs，并通过两组THREE.Vector3's 定义了 2 个矩形，每组 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);
}
4

2 回答 2

3

我正在寻找同样的东西。发现这个： https ://github.com/epistemex/transformation-matrix-js

还没有尝试过，但是 fromTriangles() 函数看起来很有希望。

Matrix.fromTriangles( t1, t2 ); // returns matrix needed to produce t2 from t1

编辑：哎呀，以为我将其发布为评论。变成了答案。那好吧..

于 2018-01-23T09:21:34.033 回答
1

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

二维情况的歧义示例：点 B、C、D 共线。一些仿射变换将它们移动到 B、E、F 点。但是有无数个匹配的仿射变换。其中两个将 A 点转换为 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)

于 2013-07-24T15:22:26.890 回答