1

我有以下 JSFiddle http://jsfiddle.net/3vf9J/突出了我的问题。

我遵循了有关如何制作将 css 转换组合成 matrix3d 的函数的指南，这样我一次可以使用多个苹果。

不幸的是，我未能使其正常工作。围绕一个轴简单旋转 180 度，最终看起来更像 135 度，所以我显然在某处有一些数学错误。

懂矩阵的人能帮帮我吗？

我的功能如下所示：

var generateRotationMatrix = function(x, y, z, tx, ty, tz) {
    var a = x;
    var b = y;
    var c = z;

    var rotationXMatrix = $M([
      [1,0,0,0],
      [0,Math.cos(a), Math.sin(-a), 0],
      [0,Math.sin(a), Math.cos( a), 0],
      [0,0,0,1]
    ]);

    var rotationYMatrix = $M([
      [Math.cos( b), 0, Math.sin(b),0],
      [0,1,0,0],
      [Math.sin(-b), 0, Math.cos(b), 0],
      [0,0,0,1]
    ]);

    var rotationZMatrix = $M([
      [Math.cos(c), Math.sin(-c), 0, 0],
      [Math.sin(c), Math.cos( c), 0, 0],
      [0,0,1,0],
      [0,0,0,1]
    ]);

    var translationMatrix = $M([
                [1,0,0,0],
                [0,1,0,0],
                [0,0,1,0],
                [tx,ty,tz,1]
                   ]);
    var tM = rotationXMatrix
             .x(rotationYMatrix)
             .x(rotationZMatrix)
         .x(translationMatrix);

    var s  = "matrix3d("
    s += tM.e(1,1).toFixed(10) + "," + tM.e(1,2).toFixed(10) + "," + tM.e(1,3).toFixed(10) + "," + tM.e(1,4).toFixed(10) + ","
    s += tM.e(2,1).toFixed(10) + "," + tM.e(2,2).toFixed(10) + "," + tM.e(2,3).toFixed(10) + "," + tM.e(2,4).toFixed(10) + ","
    s += tM.e(3,1).toFixed(10) + "," + tM.e(3,2).toFixed(10) + "," + tM.e(3,3).toFixed(10) + "," + tM.e(3,4).toFixed(10) + ","
    s += tM.e(4,1).toFixed(10) + "," + tM.e(4,2).toFixed(10) + "," + tM.e(4,3).toFixed(10) + "," + tM.e(4,4).toFixed(10)
    s += ")";
    return s;
}

请注意，我正在使用Sylvester进行矩阵数学运算（乘法）

4

1 回答 1

1

thisiate 更新（2014 年 4 月 22 日） - 原作者

当我正在做类似的事情时，这个问题一直在我的脑海中，所以在更仔细地观察它时，我注意到了这个错误并找出了它发生的原因。这是一个简短的解释。

翻译矩阵错误：

var translationMatrix = $M([
            [1,0,0,0],
            [0,1,0,0],
            [0,0,1,0],
            [tx,ty,tz,1]
               ]);

需要改写为：

var translationMatrix = $M([
            [1,0,0,tx],
            [0,1,0,ty],
            [0,0,1,tz],
            [0,0,0,1]
               ]);

这个小错误解释了为什么您会看到奇怪的结果。现在，在矩阵乘法中将乘以零的 3 个位置乘以变换变量，从而计算出不同的角度。此外，不会应用任何变换，因为 0 基本上是常数。此外，tz最初的位置会影响矩阵中处理​​透视的部分。

我相信这应该可以解决矩阵部分的任何问题。我最初的答案是基于 rotate3d 被限制为 360 度（0-359）的事实。由于正弦波和余弦波的周期，一个人不能通过 360 或 -360，因为两者之间的变换被内插为模 360 值。say rotateX valueX1 rotateY valueY1to之间的转换rotateX valueX2 rotateY valueY2实际上将直接插入每个结果并在 CSS 引擎中使用该结果（如果可用，所有这些转换将由视频处理器而不是 CPU 进行硬件加速）并且将比计算矩阵转换更快。

原答案如下：

马特，如果您只想应用多个变换并有一种简单的方法来更改变换的每个单独元素（比如 rotateX），请参阅我给出的这个答案以获得不同的解决方案。

你不需要使用 matrix3d 来获得你想要的。浏览器将计算出结果转换（如果可用，使用图形处理器）。重要的是要意识到写入旋转变换的顺序会随着参考系的变化而影响最终输出。

例如，当您执行 rotateY(180deg) 时，参考系现在将 X 和 Z 轴更改为相反，因为您现在正盯着元素的背面（负 X 值在 Y 轴的右侧，左侧为正，同样，Z 轴负值现在比 0 更靠近您，并且 Z 轴正值进入屏幕）。

为了更容易计算出多次旋转的元素会发生什么，拿一张卡片纸或类似的纸，画出 X 和 Y 轴，然后用一根牙签穿过原点，更多的牙签穿过顶面（正z 轴），注意在浏览器中 Y 是向下的，而不是向上的。现在从第一次旋转开始，用纸做 3d 旋转。重复所有旋转，然后进行任何平移，然后缩放（你必须想象这个）等等。

于 2013-11-12T01:20:19.103 回答