结合矩阵中的多次旋转

Question

我想使用这个 JavaScript 矩阵库：Matrix3D

我的目标是实现一个函数，该函数将 CSS 转换属性作为参数，并使用适当的 matrix3d() CSS 转换声明 returns。

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)));

但是我又卡住了。如何将这个四元数添加到我的矩阵中？

Answer 1

如何将 2 个参数传递给 Matrix3D.rotateXYZ() 方法，如下所示

Matrix3D.rotateX(m, this.data.rotateX)

我不知道您使用的是哪个版本，但是根据 https://gist.github.com/f5io/7466669，该方法需要 2 个参数。

如果省略第一个参数，this.data.rotateX将被理解为结果数组，而不是旋转，这不是您想要的。

Answer 2

找到解决方案：

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] + ");");
}

结合矩阵中的多次旋转

Combine multiple rotation in matrix

javascript

css

3d

matrix