physics.jsの使い方１：
「physics.js」のはじめかた／物理シミュレーション環境構築用HTML5フレームワーク「physics.js」
文責：遠藤理平
公開日：2015年01月21日
最終更新日：2015年01月21日
準備
「physics.js.zip」からzipファイルをダウンロードして解凍します。 仮想物理実験室の構築に最低限必要なJavascriptファイルは以下の３つです。
- ■ physics.js
- ■ three_r◯.js
- ■ TrackballControls_r◯.js
「physics.js」はフレームワークの本体となるJavascriptのライブラリファイル、「three_r◯.js」は仮想物理実験室の３次元グラフィックスを担当するthree.jsの本体となるライブラリファイル、「TrackballControls_r◯.js」は仮想３次元空間中のカメラをマウス操作で移動することのできるライブラリで、three.jsと一緒に公開されています。 「◯」はリビジョンを表す整数が入ります（2015年01月21日時点で「70」）。この２つの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」に依存するため、最後に読み込む必要があります。
仮想物理実験オブジェクトの生成
仮想物理実験室オブジェクトは、ウェブブラウザ内に仮想物理実験室を構築し、物理シミュレーション（数値計算＋３次元グラフィックス＋２次元グラフ）を実行するための根幹となるオブジェクトです。 PhysLabクラスのコンストラクタで生成することができます。 コンストラクタの引数にオブジェクトリテラルとして様々なプロパティを指定することで、仮想物理実験としての各種機能を利用することができます。
プログラムソース：仮想物理実験室オブジェクトの生成
//仮想物理実験室オブジェクトの生成
PHYSICS.physLab = new PHYSICS.PhysLab({
//必須パラメータ
frameID : "canvas-frame" //額縁を表す要素のid名
});
仮想物理実験室オブジェクトの生成に不可欠なプロパティは、three.jsが自動生成するWebGLを描画用canvas要素を配置するHTML要素のid名を指定する「frameID」のみです。 本項では、空のdiv要素に「id=""canvas-frame""」の属性を与えています。
軸オブジェクトの生成
仮想物理実験室に登場する物体は「３次元オブジェクト」と総称します。本項では、３次元オブジェクトのそのひとつである「軸オブジェクト」の生成を行います。軸オブジェクトはAxisクラスのコンストラクタを用いて生成します。 ３次元オブジェクトは生成しただけでは仮想物理実験室内に登場せず、実験室オブジェクトの「objects」プロパティ（配列）に格納することで登場します。
// 軸オブジェクトの準備 PHYSICS.physLab.objects[ 0 ] = new PHYSICS.Axis( );
上記のように配列の要素番号を指定して代入するほかに、配列のpushメソッドを用いて代入することもできます。
PHYSICS.physLab.objects.push( new PHYSICS.Axis( ) )
軸オブジェクトの生成
仮想物理実験室の準備が整った後に実行するのが、PhysLabクラスのstartLabメソッドです。 このメソッドが実行された後は、PhysLabクラスのloopメソッドによる無限プールの状態となります。
//仮想物理実験室のスタートメソッドの実行 PHYSICS.physLab.startLab();
HTML文書の全文
ブラウザ内に仮想物理実験室を生成するには
１．ライブラリ関連ファイルの読み込み
２．仮想物理実験室オブジェクトの生成
３．３次元オブジェクトの登録
に加えて
４．３次元グラフィックスを描画するcanvas要素を配置するid属性を与えたdiv要素の用意する
５．div要素の縦横サイズをCSSにて指定する
ことが必要となります。そして、最後に
６．PhysLabクラスのstartLabメソッドの実行することで仮想物理実験室のスタート
します。
初めての仮想物理実験室の生成なのでHTML文書全文を記述します。
プログラムソース HTML文書
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>physics.jsの使い方１：実験室オブジェクトの宣言</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>
実行結果
マウス操作はデフォルトでは利用不可となっています。
