javascript - style - Rotación de matriz CSS3

title html css

Question

Tengo un cubo CSS 3D que estoy tratando de rotar a la izquierda / derecha / arriba / abajo en línea recta, tal como lo muestra el usuario. Si uso funciones de rotation css, entonces giro el eje, no el cubo.

Hay muchos artículos en la web sobre el cálculo de la rotación de matriz X, Y, Z, pero he pasado varios días intentando establecer esto y esta información no me sirve realmente.

El trabajo alrededor de mi problema sería un objeto WebKitCSSMatrix , que tiene sus propias funciones de rotación que funcionan como magia. Un ejemplo en Fiddle: http://jsfiddle.net/joecritch/tZBDW/ . Pero, una vez más, eso solo depende de Webkit, pero necesito ser un poco loco aquí.

Ahora, hay 3 pasos en el camino del éxito:

1) Necesito obtener la matriz actual, establecer el vector direccional (1,0,0 para arriba / abajo y 0,1,0 para las rotaciones izquierda / derecha) y establecer el ángulo. HECHO.

2) Necesito calcular un nuevo vector de rotación basado en la matriz actual. HECHO.

3) Necesito rotar mi matriz actual con un nuevo vector y ángulo. PROBLEMA.

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

Que estoy estableciendo una nueva matriz de transformación en mi CSS Cube. El problema es que no gira como debería. Ahora estoy usando el plugin de Sylvester para hacer todos los cálculos matriciales.

Por lo tanto, ayúdenme a usar mi nuevo vector para una rotación matricial adecuada.

Answer 1

Me está costando mucho seguir tu código. Pero si lo entiendo correctamente, estás yendo por un problema básico realmente al revés.

Su punto de partida es un objeto que tiene una transformación de matriz. Quieres cambiar esa transformación. En este punto, es muy tentador simplemente probar cosas y ver qué se adhiere. Sin ofender, pero así es como se ve tu código. Lo que realmente necesitas es entender cómo funcionan las matrices. Hay muchos buenos tutoriales. (primer hit de google: http://chortle.ccsu.edu/vectorlessons/vectorindex.html ) Tomará algo de tiempo pero ayudará mucho a la larga.

El problema básico que enfrenta es que la multiplicación de matrices no es conmutativa. A * B! = B * A para matrices. Dependiendo de la matriz que establezca, incluye muchas transformaciones donde el orden importa: (A) Mueve el objeto a su origen (B) Gira el objeto alrededor de su origen (C) Mueve el objeto a una posición en el mundo (D) Mueva el objeto al lugar donde está la cámara en el origen (E) Gírelo alrededor de la cámara. La matriz que ves es solo A * B * C * D * E. Ahora, dependiendo de lo que quieras hacer, es mejor que tengas un buen plan. En la mayoría de los casos, o bien desea rotar el objeto o la cámara y puede multiplicar en el lado izquierdo o derecho. Tu código se ve un poco como si estuvieras multiplicando en el lado equivocado y tratando de saltar a través de aros para compensar lo que de alguna manera funciona porque muchas de las matrices son identidad.

Entonces, aún más práctico: obtenga su matriz de cubos, haga una matriz de rotación independiente de ella (no-ángulo!), Y restaure la rotación * cubematrix como su nueva transformación.

Answer 2

Sylvester también puede generar matrices de rotación . Mirando el ejemplo del violín - la función del webkit que parece hacer la rotación:

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

Parece que está más en la línea de la función Matrix.Rotation(angle [, axis]) , creo que proporcionaría axis como un objeto Sylvester Vector, en lugar de los argumentos webkit x, y, z - http://sylvester.jcoglan.com/api/matrix.html#rotation

Multiplicar las matrices x, y, z no funciona demasiado bien porque las transformaciones adicionales se aplicarán en el nuevo contexto. Acabo de caer en esta trampa con esta página js / canvas: http://benjaminbenben.com/projects/twittny_test/