0

これを数日間整理しようとしていて、CSSマトリックスが標準のグラフィックスマトリックスと異なるのか、何か問題があるのか​​（おそらく何か問題があるのか​​）わかりません。

私は主にX軸とY軸を中心に回転する方法を理解しようとしています。「transform：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

さて、2番目の数字ではいくつかの数字が異なりますが、1つの数字が問題を引き起こしていると思います。両方の行列について、行1/列2および行2/列1の数値に注意してください。「-0.001217974870087876」は切り替えられているようです。そして、すべてがどのように計算されるかを理解していれば、他のすべての数値を捨てる可能性があります。

これが私が2番目のマトリックスを作成するために使用しているコードです

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マトリックスの操作方法を学ぼうとしているだけなので、私のコードは少し冗長です。しかし、うまくいけば、誰かが私がその1つの番号を正しい場所に入れるのを手伝ってくれるでしょう。

編集 私は投稿をぶつけるのが嫌いですが、質問する場所が不足しているので、もっと多くの人が答えを得るチャンスがあるのを見てくれることを願っています。私はこれを理解するために可能な限りの検索を試みました（ユニークな質問はGoogleでそれほど高くランク付けされません）。私はおそらく行列の操作に関する20以上の記事を読んだことがありますが、何も得られていません。さらに情報を追加する必要がある場合は、お知らせください。また、質問するのに良い場所があれば、それも知らせてください。今では何人かの人がコードを見ていて、コードは大丈夫だと思います。おそらく、CSSが原因であるという私の仮定が可能です。もしそうなら、どのようにしてそれを追跡するのでしょうか。

4

2 に答える 2

0

このページを見てください。css 3dmatrix の仕組みについて説明しています。また、ここには CSSMatrix オブジェクトの JS での実装があります。これは、(Webkit) ブラウザーに既に含まれている WebKitCSSMatrix と非常によく似ています。

于 2013-05-09T16:47:03.000 に答える