Quaternion.JavaScript

THREE.Quaternion

クォータニオン。四元数。

「回転とか扱う時にはクォータニオンを使うとすごく良いかんじ」くらいに知っておけば、あとは関数の使い方だけ覚えればオッケー！

座標を加工するのに行列の掛け算をすると、掛ける順番によって結果が変わってしまう。クォータニオンを使うとそれを防ぐことができる。

また、ジンバルロックという現象をクォータニオンで回避できる。でもまあ、ちょろっと回すだけみたいな場合はオイラー角で扱うと楽ちんだったりするので、使い分けがだいじ。やりたいことに対してクォータニオンだと実装が煩雑になる…みたいな時にはちょっと立ち止まって考えると吉。

THREE.jsでのクォータニオンのつかいかた

code:quaternion.javascript

let quaternion = box.quaternion; // object's quaternion

// setup rotator Quaternion

let rotator = new THREE.Quaternion();

let axis = new THREE.Vector3(anyX, anyY, anyZ).normalize(); // anyX,anyY,anyZに「回転軸」を決めるためのxyzの値をセットする

rotator.setFromAxisAngle(axis, anyAngleRad); // anyAngleRadに回転させる数字を与える

quaternion.multiply(rotator); // apply rotator