Computing affine transformation from 2 sets of points

Question

I am using threejs, and have 2 rectangles defined via two sets of THREE.Vector3's with 4 vertices each.

How do I compute the affine transformation that transforms the first rectangle into the second?

I want to apply the computed affine transformation to a 3rd rectangle via .applyMatrix(matrix).

enter image description here

Solved:

/**
 * 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);
}

score 5 · Answer 1 · answered Jan 23 '18 at 09:21

5

I'm looking for the same thing. Found this: https://github.com/epistemex/transformation-matrix-js

Haven't tried it yet, but the fromTriangles() function looks promising.

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

Edit: oops, thought I posted this as a comment. It became an answer. Oh well..

answered Jan 23 '18 at 09:21

Michael

1,764
2
20
36

2

Libraries not around anymore, but this is a good alternative: https://github.com/chrvadala/transformation-matrix – imns Dec 13 '19 at 21:12
1

Thanks. I’ll take a look at it. Seems like a great tool. – Michael Dec 13 '19 at 22:24

score 1 · Accepted Answer · edited May 23 '17 at 12:13

There is method to calculate affine matrix, for example, 2D-case here: Affine transformation algorithm. But to find unique affine transform in 3D, you need 4 non-coplanar points (the same is true for 2d - 3 non-collinear points). M matrix for 4 coplanar points (your rectangle vertices) is singular, has no inverse matrix, and above mentioned method is not applicable.

Example of ambiguity for 2d case: points B, C, D are collinear. Some affine tranformation moves them into B, E, F points. But there are infinite number of matching affine transformations. Two of them translate A point to G or H points.

enter image description here

Some solution exists for limited class of affine transformation. For example - is your 3rd rectangle always in the XY-plane? If it is true, then transformed rectangle will lie in the same plane as 2nd rectangle, and your problem becomes simpler - you need to calc coordinates in the changed vector bazis from (V1,V2,V3) to (V1', V2', V3'). Let's vector A = V2-V1, B = V3-V1, A' = V2'-V1', B' = V3'-V1'. Every point P in XY plane (3rd rectangle vertice, for example) is linear combination P = V1 + t * A + u * B, and it's transformed image in new plane P' = V1' + t * A' + u * B'. It is not hard to find t,u coefficients in this case: t=(P.x - V1.x)/(V2.x-V1.x) u=(P.y - V1.y)/(V2.y-V1.y)

I have updated the question with a sketch of what I am trying to achieve. At least in this situation there should be a unique affine transformation M. The first rectangle is in the XY-plane, mid-point in origin, axis parallel to X/Y. The second rectangle is uniformly scaled, but arbitrarily translated and rotated. Is there a closed solution for this case? — oberstet, Jul 24 '13 at 15:49
Thanks for your answer. Yeah, changing vector basis. But I needed the actual transformation M for use with three. In the meantime, I've figured it out (see updated question). Thanks anyway! — oberstet, Jul 25 '13 at 12:01

Computing affine transformation from 2 sets of points

2 Answers2