Three.jsを使って、作ってみた

プログラミング関連の事を色々書いています(^^) 週末はレストランやコンビニのお菓子のことを書いています。

Three.js クォータニオン(Quaternion)による回転

今回は、Three.jsの「クォータニオン(Quaternion)」について書きます。


クォータニオン(Quaternion)は、簡単に言いますと、物体を回転させる方法です。
以前にも、物体を回転させる方法について書きましたが、それとは別のやり方です。
以前のやり方は、オイラー角による回転で、今回は、クォータニオン(Quaternion)による回転です。
クォータニオンについて、専門的に知りたい人は、コチラを見てください。


まずは、コードから~
クォータニオンオイラー角より、複雑なコードを書きます。
実際のコードはコチラです。

//cubeは直方体(CubeGeometry)のジオメトリです。
//クォータニオン利用の宣言(必須)
cube.useQuaternion = true;
//回転軸ベクトルの宣言・規格化
var axis = new THREE.Vector3(1,1,1).normalize();
//回転角度の指定(ラジアン)
var angle = Math.PI / 4;
//クォータニオンオブジェクトの宣言
var q = new THREE.Quaternion();
//回転軸と角度からクォータニオンを計算
q.setFromAxisAngle(axis,angle);
//直方体オブジェクトのquaternionプロパティに代入
cube.quaternion.copy(q);

オイラー角(rotation)だと、これくらいで済むのに・・・

オブジェクト名.rotation.set( x軸の回転角, y軸の回転角, z軸の回転角 );

クォータニオンは、書く量が多いです(笑)

で、注意が必要なのは、「useQuaternion = true」を宣言すると、「rotation(オイラー角)」は使えなくなります!
あと、「useQuaternion = true」は書き忘れないでください。これがないと、クォータニオンは適応されません。


このコードは、軸ベクトルを規格化しています。長さは1です。

var axis = new THREE.Vector3(1,1,1).normalize();

「normalize()」をつけないと、ベクトルの長さ(THREE.Vector3(x,y,z))に応じて拡大・縮小が行われます。


こちらの部分は、回転角度の指定をしています。ラジアンで指定します。

var angle = Math.PI / 4;


クォータニオンを使って、立方体を回転させると、こうなります。
f:id:gupuru:20131213201626p:plain
ワイヤーフレームで表示したものは、コチラです。
f:id:gupuru:20131213201702p:plain

上の写真のコードはコチラです。

//立方体の宣言と生成
//マテリアル:MeshPhongMaterial,color: 0x0000ff,wireframe:true
//幅:80,高さ:80,奥行き:80
var cube = new THREE.Mesh(                                          
     new THREE.CubeGeometry(80,80,80),                         
     new THREE.MeshPhongMaterial({                           
         color: 0x0000ff,
         wireframe:true   
      }));

//影の有効化      
cube.castShadow = true;
//シーンオブジェクトに追加
scene.add(cube);                                           

//クォータニオン利用の宣言
cube.useQuaternion = true;
cube.quaternion =  new THREE.Quaternion().setFromAxisAngle(
         new THREE.Vector3(1,1,1).normalize(),Math.PI / 4);

クォータニオンのコードは、まとめました。最初に紹介したコードでは、長いので(笑)


複雑な制御をしたい場合は、クォータニオンをつかうと良いと思います。
簡単な制御なら、rotation(オイラー角)を使えば良いと思います。


これで終わりです。
ご不明な点などがありましたら、遠慮なくご質問ください。
ありがとうございました!

広告を非表示にする