３次元グラフィックスの姿勢指定方法（three.js）

３次元グラフィックスに登場する物体（オブジェクト）の姿勢は３×３の正方行列である回転行列やクォータニオンと呼ばれる複素数に似た量を用いて指定することができます。 本項では、WebGLのラッパーライブラリであるthree.jsにてクォータニオンを用いて任意の姿勢を指定する方法を解説します。 具体的な手順は以下のとおりです。

姿勢を指定する３ステップ

（１）上方向ベクトルを生成
（２）物体のローカル座標系の上方向（z軸方向）を上方向ベクトルに一致させる
（３）物体のローカル座標系の上方向（z軸方向）を回転軸とした回転に対応するクォータニオンを生成
（４）生成したクォータニオンを物体のクォータニオンに積算

//上向きベクトルを生成
var axis = new THREE.Vector3(); //←---------------------------------（１）
axis.z = Math.cos(theta);
axis.x = Math.sin(theta) * Math.cos(phi);
axis.y = Math.sin(theta) * Math.sin(phi);

//箱オブジェクトの上向きを指定
box.lookAt( axis );//←----------回転行列とクォータニオンが更新される（２）
//上向きベクトルを回転軸としてangle[rad]回転するクォータニオンを生成
q = new THREE.Quaternion().setFromAxisAngle( new THREE.Vector3(0,0,1), angle ); //←（３）
//箱オブジェクトを回転軸周りで回転
box.quaternion.multiply( q ); //←-----------------------------------（４）

実行結果

上方向ベクトルはグローバル座標系におけるz軸からの偏角とx軸からの偏角で指定することができます。また、は物体のローカル座標系のz軸回りの回転角です。

参考図書

３次元グラフィックス関連

・three.jsによるHTML5グラフィックス上　【改定版】
・three.jsによるHTML5グラフィックス下　【改定版】
・three.jsによるHTML5 3Dグラフィックス 【新機能と応用】