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

3次元グラフィックスのローカル座標系における回転(three.js)

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

前項(3次元グラフィックスの姿勢指定方法)に引き続いて、 本項では、物体に固定せれたローカル座標系の回転軸における回転アニメーションの実現方法を解説します。3次元グラフィックスにおける回転アニメーションは、描画ステップごとに回転を表す回転行列やクォータニオンを積算することで実現できます。

omega = new THREE.Vector3(◯, ◯, ◯); //角速度ベクトル
//1フレームあたりの回転を表すクォータニオンを生成(60[fps]を想定)
q = new THREE.Quaternion().setFromAxisAngle( omega.clone(), omega.length()/60 ); 
box.quaternion.multiply( q ); //回転の演算

実行結果

上段で指定した前項(3次元グラフィックスの姿勢指定方法)で解説した初期姿勢に対して、 下段で指定したローカル座標系における角速度ベクトル(向きと大きさ)に対する回転アニメーションを実装した結果です。


参考図書

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

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



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

関連記事

TIPS 集

WebGL

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