23

我有一个 CSS 3D 立方体，我正在尝试向用户显示它向左/向右/向上/向下直线旋转。如果我使用 cssrotation函数，那么我会旋转轴，而不是立方体。

网上有很多关于 X、Y、Z 矩阵旋转计算的文章，但我现在花了几天时间尝试设置这个东西，但这些信息都没有真正帮助我。

解决我的问题的方法是一个WebKitCSSMatrix对象，它有自己的旋转功能，就像魔法一样。小提琴上的一个例子：http: //jsfiddle.net/joecritch/tZBDW/。但同样，这仅依赖于 Webkit，但我需要在这里浏览。

现在，成功之路有3个步骤：

1）我需要获取当前矩阵，设置方向向量（上/下为 1,0,0，左/右旋转为 0,1,0）并设置角度。完毕。

2）我需要根据当前矩阵计算新的旋转向量。完毕。

3）我需要用新的向量和角度实际旋转我的当前矩阵。问题。

var newMArray = deMatrix(".cube");//getting current matrix from CSS

var v = [vecX, vecY, vecZ, 0];//current vector (1,0,0) or (0,1,0)

var newV = newMVector(newMArray, v);//calculating new vector for current matrix

//getting the angle for each axis based on new vector
angleX = newV[0]*angle;
angleY = newV[1]*angle;
angleZ = newV[2]*angle;

this.rotateX -= angleX;
this.rotateY -= angleY;
this.rotateZ -= angleZ; 

//calculating the rotation matrix
var rotationXMatrix, rotationYMatrix, rotationZMatrix, s, transformationMatrix;
rotationXMatrix = $M([[1, 0, 0, 0], [0, Math.cos(this.rotateX * deg2rad), Math.sin(-this.rotateX * deg2rad), 0], [0, Math.sin(this.rotateX * deg2rad), Math.cos(this.rotateX * deg2rad), 0], [0, 0, 0, 1]]);
rotationYMatrix = $M([[Math.cos(this.rotateY * deg2rad), 0, Math.sin(this.rotateY * deg2rad), 0], [0, 1, 0, 0], [Math.sin(-this.rotateY * deg2rad), 0, Math.cos(this.rotateY * deg2rad), 0], [0, 0, 0, 1]]);
rotationZMatrix = $M([[Math.cos(this.rotateZ * deg2rad), Math.sin(-this.rotateZ * deg2rad), 0, 0], [Math.sin(this.rotateZ * deg2rad), Math.cos(this.rotateZ * deg2rad), 0, 0], [0, 0, 1, 0], [0, 0, 0, 1]]);

transformationMatrix = rotationXMatrix.x(rotationYMatrix).x(rotationZMatrix);//getting all axis rotation into one matrix

比我为我的 CSS Cube 设置新的转换矩阵。问题是 - 它没有按应有的方式旋转。现在我正在使用Sylvester插件来进行所有矩阵计算。

所以，请帮助我如何使用我的新向量进行正确的矩阵旋转。

4

2 回答 2

4

我很难遵循您的代码。但是，如果我理解正确，那么您实际上是在倒退一个基本问题。

您的起点是具有矩阵变换的对象。你想改变那个变换。在这一点上，很容易尝试一些事情，看看有什么能坚持下去。无意冒犯，但这就是您的代码正在做的事情。您真正需要的是了解矩阵的工作原理。有很多很好的教程。（第一次谷歌点击：http ://chortle.ccsu.edu/vectorlessons/vectorindex.html ）这需要一些时间，但从长远来看会有很大帮助。

您面临的基本问题是矩阵乘法不可交换。A * B != B * A 用于矩阵。根据您设置的矩阵，它包含许多顺序很重要的转换：（A）将对象移动到它的原点（B）围绕它的原点旋转对象（C）将对象移动到世界中的某个位置（D）将对象移动到相机位于原点的位置 (E) 围绕相机旋转。您看到的矩阵只是 A * B * C * D * E。现在取决于您想要做什么，您最好有一个好的计划。在大多数情况下，您要么想旋转对象，要么旋转相机，您可以在左侧或右侧进行乘法运算。您的代码看起来有点像您在错误的一侧进行乘法运算并试图跳过箍以补偿由于许多矩阵是恒等式而有些工作的代码。

所以更实用：获取你的立方体矩阵，制作一个独立于它的旋转矩阵（没有 -angle！），然后将 rotation*cubematrix 设置为你的新变换。

于 2013-02-04T07:43:41.203 回答
2

Sylvester 也可以生成旋转矩阵。查看小提琴示例 - 似乎进行旋转的 webkit 函数：

// Rotate the Matrix around the transformed vector
var newMatrix = m.rotateAxisAngle(vector.x, vector.y, vector.z, angle);

看起来它更像Matrix.Rotation(angle [, axis])函数的行，我认为你会提供axis一个 Sylvester Vector 对象，而不是 webkit x,y,z 参数 - http://sylvester.jcoglan.com/api/matrix.html#回转

将 x,y,z 矩阵相乘并不能很好地工作，因为额外的变换将应用于新的上下文。我刚刚陷入这个 js/canvas 页面的陷阱：http: //benjaminbenben.com/projects/twittny_test/

于 2013-01-07T16:23:37.233 回答