0

几天来一直试图解决这个问题，但我不确定 CSS 矩阵是否与标准图形矩阵不同，或者我是否有问题（可能我有问题）。

我主要想弄清楚如何在 X 和 Y 轴上旋转。当我使用“变换：rotateX(2deg) rotateY(2deg) translate3d(0px, -100px, 0px);” 我使用 javascript 来获取矩阵样式，这就是我能够输出的。

0.9993908270190958,  -0.001217974870087876, -0.03487823687206265, 0,
0,                    0.9993908270190958,   -0.03489949670250097, 0,
0.03489949670250097,  0.03487823687206265,   0.9987820251299122,  0,
0,                  -99.93908270190957,      3.489949670250097,   1

但是，如果我尝试使用 javascript 计算矩阵（X 和 Y 均为 2 度），我会得到

 0.9993908270190958,    0,                   -0.03489949670250097, 0, 
-0.001217974870087876,  0.9993908270190958,  -0.03487823687206265, 0, 
 0.03487823687206265,   0.03489949670250097,  0.9987820251299122,  0, 
 0.1217974870087876,  -99.93908270190957,     3.487823687206265,   1

现在，虽然第二个数字中有几个不同的数字，但我相信一个数字会导致问题。请注意两个矩阵的第 1 行/第 2 列和第 2 行/第 1 列中的数字。“-0.001217974870087876”看起来被切换了。如果我了解一切是如何计算的，那么这可能会抛弃所有其他数字。

这是我用来创建第二个矩阵的代码

var basematrix = [
    [1, 0, 0, 0],
    [0, 1, 0, 0],
    [0, 0, 1, 0], 
    [0, -100, 0, 1]
];
function RotateWorld(y, x)
{
    var halfrot = Math.PI / 180;

    var xcos = Math.cos(x * halfrot);
    var xsin = Math.sin(x * halfrot);

    var ycos = Math.cos(y * halfrot);
    var ysin = Math.sin(y * halfrot);

    var ymatrix = [
        [ycos, 0, -ysin, 0],
        [0, 1, 0, 0],
        [ysin, 0, ycos, 0], 
        [0, 0, 0, 1]
    ];

    var xmatrix = [
        [1, 0, 0, 0],
        [0, xcos, xsin, 0],
        [0, -xsin, xcos, 0], 
        [0, 0, 0, 1]
    ];

    var calcmatrix = MatrixMultiply(ymatrix, basematrix);

    calcmatrix = MatrixMultiply(xmatrix, calcmatrix);

    calcmatrix = TransMultiply(calcmatrix);

    for (var i = 0; i < 4; i++)
    {
        for (var j = 0; j < 4; j++)
        {
            document.getElementById('info').innerHTML += calcmatrix[i][j] + ', ';
        }
    }
}

function MatrixMultiply(matrixa, matrixb)
{
    var newmatrix = [];
    for (var i = 0; i < 4; ++i)
    {
        newmatrix[i] = [];
        for (var j = 0; j < 4; ++j)
        {
            newmatrix[i][j] = matrixa[i][0] * matrixb[0][j] 
                    + matrixa[i][1] * matrixb[1][j] 
                    + matrixa[i][2] * matrixb[2][j] 
                    + matrixa[i][3] * matrixb[3][j];
        }
    }

    return newmatrix;
}
function TransMultiply(matrix)
{
    var newmatrix = matrix;
    var x = matrix[3][0];
    var y = matrix[3][1];
    var z = matrix[3][2];
    var w = matrix[3][3];

    newmatrix[3][0] = x * matrix[0][0] + y * matrix[1][0] + z * matrix[2][0];
    newmatrix[3][1] = x * matrix[0][1] + y * matrix[1][1] + z * matrix[2][1];
    newmatrix[3][2] = x * matrix[0][2] + y * matrix[1][2] + z * matrix[2][2];
    newmatrix[3][3] = x * matrix[0][3] + y * matrix[1][3] + z * matrix[2][3] + newmatrix[3][3];
    if (newmatrix[3][3] != 1 && newmatrix[3][3] != 0)
    {
        newmatrix[3][0] = x / w;
        newmatrix[3][1] = y / w;
        newmatrix[3][2] = z / w;
    }
    return newmatrix;
}

我的代码有点冗长，因为我只是想学习如何使用 CSS 矩阵。但希望有人能帮我把那个号码放到正确的位置。

编辑 我讨厌发帖，但我已经没有地方可以问了，所以我希望更多的人会看到它并有机会得到答案。我已经尝试了所有可能的搜索来解决这个问题（独特的问题在谷歌中的排名并不高）。我可能已经阅读了 20 多篇关于使用矩阵的文章，但它们一无所获。如果我需要添加更多信息，请告诉我。另外，如果有更好的地方可以问，请告诉我。我假设现在有几个人已经看过代码并且代码一定没问题，也许我认为 CSS 是罪魁祸首的假设是可能的，如果是这样，如何追踪呢？

4

2 回答 2

0

看看这个页面，它解释了 css 3dmatrix 是如何工作的。同样在这里，您在 JS 中实现了 CSSMatrix 对象，与 WebKitCSSMatrix 非常相似，WebKitCSSMatrix 已经包含在您的（webkit）浏览器中供您使用。

于 2013-05-09T16:47:03.000 回答
0

您的实施中有一个错误function TransMultiply(matrix) { .. }

var newmatrix = matrix;

那不是克隆您的矩阵，而是设置newmatrix为引用您的原始矩阵！任何使用这种方法的东西都会把原始矩阵和新矩阵弄乱。您可能希望使用创建新 4x4 矩阵的方法，例如：

function new4x4matrix(){
    return  [[0, 0, 0, 0],
             [0, 0, 0, 0],
             [0, 0, 0, 0], 
             [0, 0, 0, 0]];
}

然后在需要新矩阵的任何地方，执行： 

var newmatrix = new4x4matrix();

编辑：错误，但您实际上可能需要一个克隆方法：很好。

function cloneMatrix(matrixa)
{
    var newmatrix = [];
    for (var i = 0; i < 4; ++i)
    {
        newmatrix[i] = [];
        for (var j = 0; j < 4; ++j)
        {
            newmatrix[i][j] = matrixa[i][j];
        }
    }

    return newmatrix;
}

相反，对于 TransMultiply 做：

var newmatrix = cloneMatrix(matrix);
于 2013-05-09T18:09:58.587 回答