【THREE.js】Quaternionでローカル座標の回転を取り扱う

アジェンダ & ソースコード

// 1. 回転させたいObjectのQuaternionを取得する
var quaternion = ANY_OBJECT.quaternion;

// 2. 回転を加えるためのQuaternionを作成する
var target = new THREE.Quaternion();
var axis = new THREE.Vector3(ANY_X, ANY_Y, ANY_Z).normalize();
target.setFromAxisAngle(axis, ANY_ANGLERAD);

// 3. 回転させる
quaternion.multiply(target);

1. 回転させたいObjectのQuaternionを取得する

var quaternion = ANY_OBJECT.quaternion;

とすることで、ANY_OBJECTのQuaternionを取得できます。

2. 回転を加えるためのQuaternionを作成する

var target = new THREE.Quaternion();
var axis = new THREE.Vector3(ANY_X, ANY_Y, ANY_Z).normalize();
target.setFromAxisAngle(axis, ANY_ANGLERAD);

とすることで、(ANY_X, ANY_Y, ANY_Z)なるベクトルを中心軸として、右周りにANY_ANGLERAD回転を加えるためのQuaternionが作成されます。ANY_ANGLERADにはラジアンで角度を指定します。

// 例：ローカル座標のy軸を中心に、90°回転を加えるQuaternionの作成
var target = new THREE.Quaternion();
var axis = new THREE.Vector3(0, 1, 0).normalize(); // 絶対値が1なので、normalize()はなくてもOK
target.setFromAxisAngle(axis, Math.PI / 2);

3. 回転させる

quaternion.multiply(target);

とすることで、回転が適用されます。

4. まとめ

Quaternionを用いる利点は、ジンバルロックという回転がうまく適用できない状態が発生しないことです。

Quaternionの数学的な構造を簡潔に知りたい方は、以下の資料がオススメです。
→ http://www.slideshare.net/yoshihiromizoguchi/ss-28541012