CSS3矩阵旋转

2018-06-04 09:25:46

我有一个CSS 3D多维数据集，我试图直接向左/右/向上/向下旋转，因为它看起来像用户。如果我使用css rotation功能，那么我旋转轴，而不是立方体。

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

解决我的问题的工作将是一个WebKitCSSMatrix对象，它有自己的旋转功能，可以像魔术一样工作。小提琴上的一个例子：http://jsfiddle.net/joecritch/tZBDW/。但是，这只依赖uppon Webkit，但我需要在这里进行讨论。

现在，成功的道路上有三个步骤：

1）我需要得到当前矩阵，设置方向矢量（1,0,0为上/下，0,1,0为左/右旋转）并设置角度。 DONE。

2）我需要基于当前矩阵计算新的旋转向量。 DONE。

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立方体。问题是 - 它不会像应该那样旋转。现在我使用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/

我的代码非常辛苦。但是，如果我正确地理解了这个问题，那么你真的是倒着走了一个基本问题。

你的出发点是一个有矩阵变换的对象。你想改变那个变化。在这一点上，尝试一些东西，看看有什么东西是非常诱人的。没有冒犯，但这就是你的代码看起来像是在做什么。你真正需要的是了解矩阵如何工作。有很多很好的教程。（第一次谷歌命中：http：//chortle.ccsu.edu/vectorlessons/vectorindex.html）从长远来看，这将需要一些时间，但帮助很多。

你所面临的基本问题是矩阵乘法不可交换。 A * B！= B * A用于矩阵。（A）将对象移动到它的原点（B）围绕它的原点旋转对象（C）将对象移到世界上的一个位置（D）将物体移到相机在原点的位置（E）围绕相机旋转。你看到的矩阵只是A * B * C * D * E.现在取决于你想做什么，你最好有一个好的计划。在大多数情况下，您要么旋转对象或相机，只能在左侧或右侧进行相乘。你的代码看起来有点像你在错误的方面倍增，并试图跳过圈套，以弥补这一点，因为许多矩阵都是身份。

因此更实用：获取立方体矩阵，制作独立于它的旋转矩阵（无棱角！），并将旋转* cubematrix设置为新的变换。

链接地址: http://www.djcxy.com/p/14349.html

上一篇: CSS3 Matrix rotation

下一篇: How to find vector for the quaternion from X Y Z rotations