HOME > natural science Laboratory > コンピュータ・シミュレーション講座 > WebGL

3次元グラフィックスの姿勢指定方法(three.js)

文責:遠藤 理平 (2017年2月19日) カテゴリ:TIPS 集(103)WebGL(46)

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

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

(1)上方向ベクトルを生成
(2)物体のローカル座標系の上方向(z軸方向)を上方向ベクトルに一致させる
(3)物体のローカル座標系の上方向(z軸方向)を回転軸とした回転に対応するクォータニオンを生成
(4)生成したクォータニオンを物体のクォータニオンに積算

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

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

実行結果

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


参考図書

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

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



▲このページのトップNPO法人 natural science トップ

関連記事

TIPS 集

WebGL

▲このページのトップNPO法人 natural science トップ