physics.jsの使い方３：
３次元オブジェクトの位置座標の指定とマウスドラック／物理シミュレーション環境構築用HTML5フレームワーク「physics.js」

文責：遠藤理平
公開日：2015年01月24日
最終更新日：2015年01月24日

前項「physics.jsの使い方２：カメラの設定とマウス操作」では、 仮想物理実験室オブジェクトにプロパティを指定することで、背景色の指定とマウス操作によるカメラパラメータの操作の実装を行いました。 本項では仮想物理実験室に登場する３次元オブジェクトの位置座標の指定と、マウスドラックによる移動の実装方法を解説します。

3-1. 実行結果

軸オブジェクトの上にマウスポインタを置くと、軸オブジェクトのバウンディングボックスが表示されます。 この状態でマウスドラックすると、軸オブジェクトを平行移動することができます。

なお、軸オブジェクト上にマウスポインタがない状態でマウスドラックを行うと、 「physics.jsの使い方２：カメラの設定とマウス操作」で解説した通りのカメラパラメーのを変更を行うことができます。

3-2. ３次元オブジェクトの位置座標の指定方法

仮想物理実験室に登場する３次元オブジェクトの位置座標は「rプロパティ」で指定することができます。 ３次元オブジェクトを生成するクラス（今回は軸オブジェクトなのでAxisクラス）のコンストラクタの引数に「rプロパティ」に ３次元座標x,y,zをプロパティとするオブジェクトリテラルを与えます。

// 軸オブジェクトの準備
PHYSICS.physLab.objects[ 0 ] = new PHYSICS.Axis({

	r: {x: 0, y: 0, z: 0},   //位置ベクトル

})

3-3. ３次元オブジェクトのマウスドラックによる平行移動の実装方法

３次元オブジェクトのマウスドラックによる平行移動は、仮想物理実験室オブジェクトとマウスドラックを行いたい３次元オブジェクトごとに２つのプロパティ「draggableプロパティ」と「allowDragプロパティ」を設定する必要があります。この２つのプロパティの意味は次のとおりです。「draggableプロパティ」はマウスドラックによる３次元オブジェクトの平行移動を実現するために必要な各種準備を行うためのフラグであるのに対して、「allowDragプロパティ」はその時点でのマウスドラックの可否を指定するフラグとなります。そのため、マウスドラックを利用する可能性がある場合には、必ず仮想物理実験室オブジェクトと３次元オブジェクトの生成時に「draggableプロパティ」をtrueとする必要があり、その後、状況に応じて実際のマウスドラックの可否を「allowDragプロパティ」で指定するという流れになります。

//仮想物理実験室オブジェクトの生成
PHYSICS.physLab = new PHYSICS.PhysLab({
	（省略）
		//マウスドラック関連
		draggable: true,   //マウスドラック利用の有無
		allowDrag : true,  //マウスドラックの可否
	（省略）
});

//軸オブジェクトの準備
PHYSICS.physLab.objects[ 0 ] = new PHYSICS.Axis({
	（省略）
	//マウスドラック関連
	draggable: true,        //マウスドラックの有無
	allowDrag : true,       //マウスドラックの可否
	（省略）
})

仮想物理実験室オブジェクトの「allowDragプロパティ」は、実験室に登場する３次元オブジェクト全体でマウスドラックによる平行移動の可否を与えます。 そのため、３次元オブジェクトの「allowDragプロパティ」がtrueであっても、仮想物理実験室オブジェクトのそれがfalseならば、マウスドラックは有効になりません。

3-4. バウンディングボックスの表示

本実験室では、マウスドラックが有効な３次元オブジェクトをマウスポインタが指した時に、バウンディングボックスを表示することができます。 デフォルトでは非表示ですが、「boundingBoxプロパティ」を設定することで、バウンディングボックスの表示の有無だけでなく、色、透過の有無、透明度を指定することができます。

// 軸オブジェクトの準備
PHYSICS.physLab.objects[ 0 ] = new PHYSICS.Axis({
	（省略）
	boundingBox : {
		visible : true,     //バウンディングボックスの可視化
		color : 0xFF0000,   //バウンディングボックスの色
	},
	（省略）
})

boundingBoxプロパティで指定可能なパラメータ

関連ページ

■「physics.jsの使い方」目次
■「physics.js」関連ページのアーカイブ