LoginSignup
32

More than 3 years have passed since last update.

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

Last updated at Posted at 2015-06-17

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

// 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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
32