HOME > natural science Laboratory > physics.js

physics.jsの使い方1:
「physics.js」のはじめかた/物理シミュレーション環境構築用HTML5フレームワーク「physics.js」

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

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

準備

physics.js.zip」からzipファイルをダウンロードして解凍します。 仮想物理実験室の構築に最低限必要なJavascriptファイルは以下の3つです。

  • ■ physics.js
  • ■ three_r◯.js
  • ■ TrackballControls_r◯.js

「physics.js」はフレームワークの本体となるJavascriptのライブラリファイル、「three_r◯.js」は仮想物理実験室の3次元グラフィックスを担当するthree.jsの本体となるライブラリファイル、「TrackballControls_r◯.js」は仮想3次元空間中のカメラをマウス操作で移動することのできるライブラリで、three.jsと一緒に公開されています。 「◯」はリビジョンを表す整数が入ります(2015年01月21日時点で「70」)。この2つのJavaScriptファイルをHTML文書のhead要素内で次のとおり読み込みます。

プログラムソース:HTML文書のhead要素

<!-- three.js用ライブラリ -->
<script src="../javascript/three_r68.js"></script>
<!-- トラックボールコントロール用ライブラリ -->
<script src="../javascript/TrackballControls_r68.js"></script> 
<!-- 本ライブラリ -->
<script src="../javascript/physics.js"></script>

なお、「physics.js」は「three.js」と「TrackballControls_r68.js」に依存するため、最後に読み込む必要があります。

仮想物理実験オブジェクトの生成

仮想物理実験室オブジェクトは、ウェブブラウザ内に仮想物理実験室を構築し、物理シミュレーション(数値計算+3次元グラフィックス+2次元グラフ)を実行するための根幹となるオブジェクトです。 PhysLabクラスのコンストラクタで生成することができます。 コンストラクタの引数にオブジェクトリテラルとして様々なプロパティを指定することで、仮想物理実験としての各種機能を利用することができます。

プログラムソース:仮想物理実験室オブジェクトの生成

//仮想物理実験室オブジェクトの生成
PHYSICS.physLab = new PHYSICS.PhysLab({
	//必須パラメータ
	frameID : "canvas-frame" //額縁を表す要素のid名
});

仮想物理実験室オブジェクトの生成に不可欠なプロパティは、three.jsが自動生成するWebGLを描画用canvas要素を配置するHTML要素のid名を指定する「frameID」のみです。 本項では、空のdiv要素に「id=""canvas-frame""」の属性を与えています。

軸オブジェクトの生成

仮想物理実験室に登場する物体は「3次元オブジェクト」と総称します。本項では、3次元オブジェクトのそのひとつである「軸オブジェクト」の生成を行います。軸オブジェクトはAxisクラスのコンストラクタを用いて生成します。 3次元オブジェクトは生成しただけでは仮想物理実験室内に登場せず、実験室オブジェクトの「objects」プロパティ(配列)に格納することで登場します。

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

上記のように配列の要素番号を指定して代入するほかに、配列のpushメソッドを用いて代入することもできます。

PHYSICS.physLab.objects.push(
	new PHYSICS.Axis( )
)

軸オブジェクトの生成

仮想物理実験室の準備が整った後に実行するのが、PhysLabクラスのstartLabメソッドです。 このメソッドが実行された後は、PhysLabクラスのloopメソッドによる無限プールの状態となります。

//仮想物理実験室のスタートメソッドの実行
PHYSICS.physLab.startLab();

HTML文書の全文

ブラウザ内に仮想物理実験室を生成するには
1.ライブラリ関連ファイルの読み込み
2.仮想物理実験室オブジェクトの生成
3.3次元オブジェクトの登録
に加えて
4.3次元グラフィックスを描画するcanvas要素を配置するid属性を与えたdiv要素の用意する
5.div要素の縦横サイズをCSSにて指定する
ことが必要となります。そして、最後に
6.PhysLabクラスのstartLabメソッドの実行することで仮想物理実験室のスタート
します。

初めての仮想物理実験室の生成なのでHTML文書全文を記述します。

プログラムソース HTML文書

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>physics.jsの使い方1:実験室オブジェクトの宣言</title>
<style>
#canvas-frame {
	width : 500px;
	height: 500px;
}
</style>
<!-- 外部JavaScriptファイルの読み込み -->
<script src="../javascript/three_r68.js"></script>             <!-- three.js用ライブラリ -->
<script src="../javascript/TrackballControls_r68.js"></script> <!-- トラックボールコントロール用ライブラリ -->
<script src="../javascript/physics.js"></script>               <!-- 本ライブラリ -->
<script>
////////////////////////////////////////////////////////////////////
// windowイベントの定義
////////////////////////////////////////////////////////////////////
window.addEventListener("load", function () {

	//仮想物理実験室オブジェクトの生成
	PHYSICS.physLab = new PHYSICS.PhysLab({
		//必須パラメータ
		frameID : "canvas-frame", //額縁を表す要素のid名
	});

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

	//仮想物理実験室のスタートメソッドの実行
	PHYSICS.physLab.startLab();
});

</script>
</head>
<body>
<div id="canvas-frame"></div>
</body>
</html>

実行結果

マウス操作はデフォルトでは利用不可となっています。

関連ページ

「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との接続に失敗しました