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

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

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

その10 クォータニオンを学んでみよう！

四元数 - Wikipedia

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

//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」は書き忘れないでください。これがないと、クォータニオンは適応されません。

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

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);