javascript - 从 2 组点计算仿射变换

Question

我正在使用 threejs，并通过两组 THREE.Vector3 定义了 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);
}

Answer 1

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

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

Matrix.fromTriangles( t1, t2 );//返回从 t​​1 生成 t2 所需的矩阵

编辑:哎呀，我以为我把它作为评论发布了。它成为了一个答案。哦好吧..