21 votos

CSS3 Matriz de rotación

Tengo un CSS cubo 3D que estoy tratando de girar a la izquierda/derecha/arriba/abajo directamente, ya que aparece para el usuario. Si puedo usar css rotation funciones, entonces me gire el eje, no el cubo.

Hay un montón de artículos en la web sobre X,Y,Z de la matriz de rotación de cálculo, pero he de pasar días tratando de establecer esta cosa y ninguna de esta información me ayuda mucho.

El trabajo en torno a mi sería un problema WebKitCSSMatrix objeto, que tiene sus propias funciones de rotación que funcionan como magia. Un ejemplo en el Violín: http://jsfiddle.net/joecritch/tZBDW/. Pero, de nuevo, que se basa sólo en Webkit, pero necesito estar crossbrowsy aquí.

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

1) necesito para obtener la matriz actual, set vector direccional (1,0,0 para arriba/abajo y 0,1,0 a la derecha/izquierda rotaciones) y ajustar el ángulo. HECHO.

2) necesito calcular la nueva rotación del vector basado en la matriz actual. HECHO.

3) tengo que rotan mi matriz actual por el nuevo vector y el á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

De lo que estoy configuración de la nueva matriz de transformación para mi CSS Cubo. El problema es, que no gira como debe. Ahora estoy usando Sylvester plugin para hacer todo el cálculo matricial.

Así que, por favor, ayúdame sobre cómo usar mi nuevo vector para una adecuada matriz de rotación.

4voto

starmole Puntos 2160

Estoy teniendo un momento muy duro después de su código. Pero si entiendo correctamente, usted va alrededor de un problema básico que realmente hacia atrás.

Su punto de partida es un objeto que tiene una matriz de transformación. Usted desea cambiar esa transformación. En este punto es muy tentador probar cosas y ver qué se pega. Sin ánimo de ofender, pero eso es lo que el código parece que lo está haciendo. Lo que realmente se necesita es entender cómo las matrices de trabajo. Hay un montón de buenos tutoriales. (primera de google éxito: http://chortle.ccsu.edu/vectorlessons/vectorindex.html) va a tomar algún tiempo, pero de gran ayuda en el largo plazo.

La cuestión básica que se enfrenta es que la multiplicación de matrices no es conmutativa. A * B != B * para matrices. Dependiendo de lo que la matriz que se ajuste incluye una gran cantidad de transformaciones donde el orden de la materia: (A) el objeto se Mueve a su origen (B) Rotar el objeto alrededor de su origen (C) Mover el objeto a una posición en el mundo (D) el objeto se Mueve a donde la cámara está en el origen (E) Girar alrededor de la cámara. La matriz que se ve es sólo Una * * * * B * C * D * E. Ahora, dependiendo de lo que quieres ¿que mejor que tener un buen plan. En la mayoría de los casos usted desea rotar el objeto o la cámara y sólo se puede multiplicar a la izquierda o a la derecha. El código se ve un poco como que se están multiplicando en el lado equivocado y tratando de saltar a través de aros para compensar que el que algo funciona porque muchas de las matrices de identidad.

Así que incluso más práctico: Obtener el cubo de la matriz, hacer una matriz de rotación independiente de ella (sin ángulo!), y rotación*cubematrix como su nueva transformación.

2voto

benjaminbenben Puntos 926

Sylvester puede generar matrices de rotación así. Mirando el violín ejemplo - el webkit función 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 es más a lo largo de las líneas de la Matrix.Rotation(angle [, axis]) función, creo que iba a proporcionar a axis como Sylvester Vector de objetos, en lugar de la webkit x,y,z argumentos - http://sylvester.jcoglan.com/api/matrix.html#rotation

Multiplicando a la x,y,z matrices no funciona demasiado bien porque el adicional transforma será aplicado en el nuevo contexto. He caído en esta trampa con este js/lienzo página: http://benjaminbenben.com/projects/twittny_test/

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by:

X