HOME > natural science Laboratory > physics.js

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

文責:遠藤 理平 (2015年1月24日) カテゴリ:physics.js(22)

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

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

3-1. 実行結果

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

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


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

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

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

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

})

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

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

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

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

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

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

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

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

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

プロパティ名データ型デフォルト値説明
boundingBox <object> {
visible : false,
color : null,
opacity : 0.2,
transparent : true,
draggFlag : false
}
バウンディングボックスの可視化関連パラメータ
visible : 表示・非表示の指定
color : 発光色
opacity : 不透明度
transparent : 透過処理
draggFlag : マウスドラック状態かを判定するフラグ(内部)

関連ページ

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



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

関連記事

physics.js







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




Warning: mysqli_connect(): (28000/1045): Access denied for user 'xsvx1015071_ri'@'sv102.xserver.jp' (using password: YES) in /home/xsvx1015071/include/natural-science/include_counter-d.php on line 8
MySQL DBとの接続に失敗しました