23

ユーザーに見えるように、左/右/上/下にまっすぐ回転させようとしているCSS 3Dキューブがあります。cssrotation関数を使用する場合は、立方体ではなく軸を回転させます。

Web 上には X、Y、Z 行列の回転計算に関する記事がたくさんありますが、私はこれを設定するために何日も費やしましたが、この情報はどれも本当に役に立ちません。

私の問題の回避策はWebKitCSSMatrix、魔法のように機能する独自の回転機能を持つオブジェクトです。Fiddle の例: 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キューブに新しい変換マトリックスを設定しています。問題は、回転しないことです。現在、Sylvesterプラグインを使用してすべての行列計算を行っています。

それで、適切なマトリックス回転のために新しいベクトルを使用する方法を教えてください。

4

2 に答える 2

4

私はあなたのコードに従うのに非常に苦労しています。しかし、私がそれを正しく理解していれば、あなたは基本的な問題を本当に逆行しています。

出発点は、マトリックス変換を持つオブジェクトです。その変換を変更したい。この時点で、何かを試してみて、何がうまくいくか見てみたいという誘惑にかられます。問題はありませんが、それがあなたのコードが行っているように見えることです。本当に必要なのは、行列がどのように機能するかを理解することです。良いチュートリアルがたくさんあります。(最初の Google ヒット: 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);

関数の行に沿っているように見えます.Webkitのx、y、z引数ではなく、Sylvester VectorオブジェクトとしてMatrix.Rotation(angle [, axis])提供すると思います- http://sylvester.jcoglan.com/api/matrix.html#回転axis

追加の変換が新しいコンテキストに適用されるため、x、y、z 行列の乗算はうまく機能しません。私はこの js/canvas ページでこのトラップに陥りました: http://benjaminbenben.com/projects/twittny_test/

于 2013-01-07T16:23:37.233 に答える