我想使用这个 JavaScript 矩阵库:Matrix3D
我的目标是实现一个将 CSS 变换属性作为参数并返回适当的 matrix3d() CSS 变换声明的函数。
function 3d(x, y, z, rotateX, rotateY, rotateZ){
var m = Matrix3D.create();
Matrix3D.translateX(m, x);
Matrix3D.translateY(m, y);
Matrix3D.translateZ(m, z);
Matrix3D.rotateX(m,this.data.rotateX);
Matrix3D.rotateY(m,this.data.rotateY);
Matrix3D.rotateZ(m,this.data.rotateZ);
return Matrix3D.toTransform3D(m);
}
它适用于 x、y、z 和 rotateZ 参数,但它无法将旋转矩阵合并为一个矩阵,而是覆盖旋转。
你能帮我如何组合矩阵才能以正确的方式运行吗?
更新 #1
我刚刚发现我需要从三个欧拉旋转轴创建一个四元数。 euler to quaternion
function eulerToQuaternion(rotateX, rotateY, rotateZ) {
// Assuming the angles are in radians.
var c1 = Math.cos(rotateX / 2),
s1 = Math.sin(rotateX / 2),
c2 = Math.cos(rotateY / 2),
s2 = Math.sin(rotateY / 2),
c3 = Math.cos(rotateZ / 2),
s3 = Math.sin(rotateZ / 2),
c1c2 = c1 * c2,
s1s2 = s1 * s2,
w = c1c2 * c3 - s1s2 * s3,
x = c1c2 * s3 + s1s2 * c3,
y = s1 * c2 * c3 + c1 * s2 * s3,
z = c1 * s2 * c3 - s1 * c2 * s3;
return [w, x, y, z]
}
function deg2rad(deg) {
return deg * (Math.PI / 180);
};
console.log(eulerToQuaternion(deg2rad(45), 0, deg2rad(45)));
但在这里我又被困住了。如何将这个四元数添加到我的矩阵中?
最佳答案
找到解决方案:
function a(x, y, z, scaleX, scaleY, rotateX, rotateY, rotateZ) {
var D = 2;
var Y = Math.cos(rotateX * (Math.PI / 180)).toFixed(D),
Z = Math.sin(rotateX * (Math.PI / 180)).toFixed(D),
b = Math.cos(rotateY * (Math.PI / 180)).toFixed(D),
F = Math.sin(rotateY * (Math.PI / 180)).toFixed(D),
I = Math.cos(rotateZ * (Math.PI / 180)).toFixed(D),
P = Math.sin(rotateZ * (Math.PI / 180)).toFixed(D);
var a = new Array(16);
a[0] = b * I * scaleX;
a[1] = -1 * P;
a[2] = F;
a[3] = 0;
a[4] = P;
a[5] = Y * I * scaleY;
a[6] = Z;
a[7] = 0;
a[8] = -1 * F;
a[9] = -1 * Z;
a[10] = b * Y;
a[11] = 0;
a[12] = x;
a[13] = y;
a[14] = z;
a[15] = 1;
console.log("transform: matrix3d(" + a[0] + "," + a[1] + "," + a[2] + "," + a[3] + "," + a[4] + "," + a[5] + "," + a[6] + "," + a[7] + "," + a[8] + "," + a[9] + "," + a[10] + "," + a[11] + "," + a[12] + "," + a[13] + "," + a[14] + "," + a[15] + ");");
}
关于javascript - 结合矩阵中的多次旋转,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31264319/