physics.jsの使い方２：
カメラの設定とマウス操作／物理シミュレーション環境構築用HTML5フレームワーク「physics.js」

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

前項「physics.jsの使い方１：「physics.js」のはじめかた」では、ウェブブラウザ内に仮想物理実験室を構築するための最小構成について解説しました。 前項では真っ白の３次元空間中に軸オブジェクトが表示されただけの味気ない実装でしたが、 本項では背景色の指定とマウス操作によるカメラパラメータの操作を実装します。

2-1. 実行結果

マウス操作によりカメラパラメータの操作が可能となります。

マウス操作によるカメラパラメータの操作

2-2. 背景色の指定方法

仮想物理実験室の３次元グラフィックスの背景色は、レンダリングする際のパラメータが格納されている「rendererプロパティ」を指定します。 背景色はPhysLabクラスのコンストラクタの引数に「rendererプロパティ」を次のように指定します。

//仮想物理実験室オブジェクトの生成
PHYSICS.physLab = new PHYSICS.PhysLab({
	（省略）
	//レンダラー関連パラメータ
	renderer : {
		clearColor : 0xE1FCFF,       //クリアーカラー（背景色）
	},
	（省略）
});

「rendererプロパティ」は背景色の他、背景透明度、アンチエイリアス処理の有無、ステンシルバッファ利用の有無を指定することができます。 「rendererプロパティ」で指定可能なパラメータは次のとおりです。

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

カメラの各種パラメータの指定

仮想物理実験室内の３次元空間を２次元平面であるディスプレイに射影するのがカメラの役割となります。 その射影方法を決めるのがカメラの特徴を表すパラメータで、「cameraプロパティ」に与えます。 本仮想物理実験室では、three.jsで指定可能な２種類のカメラ（透視投影カメラと正投影カメラ）を選択することができます。

//仮想物理実験室オブジェクトの生成
PHYSICS.physLab = new PHYSICS.PhysLab({
	（省略）
	//カメラ関連パラメータ
	camera: {                        
		type : "Perspective",      //カメラの種類 （ Perspective | Orthographic）
		position: {x:5, y:5, z:5}, //カメラの位置
		target: {x:0, y:0, z:0.5}, //カメラの視野中心座標
	},
	（省略）
});

なお、「cameraプロパティ」には透視投影カメラと正投影カメラで指定可能な全てのパラメータを全て指定することができます。 「cameraプロパティに」指定可能なパラメータは次のとおりです。

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

2-3. マウス操作によるカメラ関連パラメータの操作

PhysLabクラスのコンストラクタの引数に「trackballプロパティ」を指定することで、 仮想物理実験室の３次元空間中のカメラをマウスで操作することが可能となります。

//仮想物理実験室オブジェクトの生成
PHYSICS.physLab = new PHYSICS.PhysLab({
	（省略）
	//トラックボール関連パラメータ
	trackball : {
		enabled : true,   //トラックボール利用の有無
	},
	（省略）
});

なお、マウス操作によるカメラパラメータの変化量は、「trackballプロパティ」で詳細に指定することができます。

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

関連ページ

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