我正在使用 threejs ,并且通过两组THREE.Vector3
定义了2个矩形,每组{4}有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);
}
答案 0 :(得分:1)
我正在寻找同样的事情。发现这个: https://github.com/epistemex/transformation-matrix-js
尚未尝试过,但fromTriangles()函数看起来很有希望。
protected void Page_Load(object sender, EventArgs e)
{
CultureInfo us = new CultureInfo("en-US");
string shortUsDateFormatString = us.DateTimeFormat.ShortDatePattern;
string shortUsTimeFormatString = us.DateTimeFormat.ShortTimePattern;
Response.Write(shortUsDateFormatString);
}
编辑:哎呀,以为我发布了这个评论。它成了一个答案。哦,好吧..
答案 1 :(得分:0)
有计算仿射矩阵的方法,例如,2D-case:Affine transformation algorithm。但是要在3D中找到独特的仿射变换,您需要4个非共面点(对于2d - 3个非共线点也是如此)。 4个共面点(矩形顶点)的M矩阵是奇异的,没有逆矩阵,上述方法不适用。
2d情况的模糊性示例:点B,C,D是共线的。一些仿射变换将它们移动到B,E,F点。但是有无限多的匹配仿射变换。其中两个将A点转换为G或H点。
对于有限类型的仿射变换存在一些解决方案。例如 - 您的第三个矩形是否始终位于XY平面中?
如果是真的,那么变换后的矩形将与第二个矩形位于同一平面上,并且您的问题变得更简单 - 您需要将变化后的矢量bazis中的坐标从(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)