物理シミュレーション環境構築用HTML5フレームワーク「physics.js」を用いて、 ウェブブラウザ内に仮想物理実験室を生成するクラスです。本クラスを利用して生成したオブジェクトは「仮想物理実験室オブジェクト」と呼びます。ほとんどのプロパティとメソッドは 「【書籍】HTML5による物理シミュレーション【剛体編２】（発売日：2015年春）」「【書籍】HTML5による物理シミュレーション【剛体編】（2014年8月24日）」で定義したものと同じですが、異なる場合もあります。
| プロパティ | データ型 | デフォルト | 説明 |
|---|---|---|---|
| id | <int> | 0 | 生成する仮想物理実験室オブジェクトの識別番号を与えるための番号。実験室オブジェクトが生成されるごとにインクリメントされる。生成した実験室オブジェクトの数と一致する。 |
| プロパティ | データ型 | デフォルト | 説明 |
|---|---|---|---|
| frameID | <string> | null | 仮想３次元空間を描画するcanvas要素を出力する要素のid名。 |
| playButtonID | <string> | null | 時間発展を開始するスタートボタンを表す要素のid名。本プロパティを指定しない場合、実行と同時に時間発展が開始される（pauseFlagにfalseが与えられる）。 |
| resetButtonID | <string> | null | 仮想物理実験室の状態を初期状態へ遷移させるためのボタンを表す要素のid 名。 |
| pictureID | <string> | null | 画面キャプチャボタンを表す要素のid名。 |
| timeID | <string> | null | 仮想物理実験室の時刻を表示する要素のid 名。 |
| useJQuery | <bool> | false | jQueryの利用の有無を指定するブール値。 |
| g | <float> | 9.8 | 重力加速度。重力加速度の向きはz軸のマイナス方向。 |
| dt | <float> | 0.001 | 時間発展時の１ステップあたりの時間間隔。小さいほど計算精度が高くなる。 |
| step | <int> | 0 | 実験室内のステップ数。 |
| skipRendering | <int> | 40 | １回描画する間に間引回数。 |
| displayFPS | <bool> | true | FPS計測結果の表示の有無を指定するブール値。 |
| draggable | <bool> | false | 本実験室に登場する３次元オブジェクトをマウスドラックで移動するための初期化を行うブール値。 |
| allowDrag | <bool> | false | 本実験室に登場する３次元オブジェクトをマウスドラックにて移動することの可否を表すブール値。 |
| locusFlag | <bool>|"pause" | true | 3 次元オブジェクトの軌跡の表示の有無をブール値あるいは文字列で指定。"pause" と指定すると、実験室の状態が停止状態の時のみ軌跡が表示される。 |
| velocityVectorFlag | <bool>|"pause" | "pause" | 3次元オブジェクトの速度ベクトルの表示の有無をブール値あるいは文字列で指定。"pause" と指定すると、実験室の状態が停止状態の時のみ速度ベクトルが表示される。 |
| boundingBoxFlag | <bool>|"dragg" | "dragg" | 3 次元オブジェクトのバウンディングボックスの表示の有無をブール値あるいは文字列で指定。"dragg" と指定すると、マウスドラック時のみ軌が表示される。 |
| strobeFlag | <bool>|"pause" | true | 3 次元オブジェクトのストロボ表示の有無をブール値あるいは文字列で指定。"pause" と指定すると、実験室の状態が停止状態の時のみストロボが表示される。 |
| locusButtonID | <string> | null | 3 次元オブジェクトの軌跡の表示の有無を切り替えるラジオボタン要素のid 名。 |
| velocityVectorButtonID | <string> | null | 3 次元オブジェクトの速度ベクトルの表示の有無を切り替えるラジオボタン要素のid 名。 |
| strobeButtonID | <string> | null | 3 次元オブジェクトのストロボ表示の有無を切り替えるラジオボタン要素のid 名。 |
| loadFilePath | <strign> | null | 読み込みを行う保存データのファイルパス。 |
| saveDataDownloadButtonID | <string> | null | 保存した実験室データをダウンロードを開始するボタンのid名。HTML文書のbody要素に本プロパティに与えたid名のa要素を配置する必要がある。 |
| pauseStepList | [<int>] | [] | 時間発展を一時停止させる時間の配列。この配列に格納した時間ステップで、仮想物理実験の時間発展を一時停止にする。 |
| renderer | <object> |
{ clearColor : 0xFFFFFF, clearAlpha : 1.0, parameters : { antialias: false, stencil: true, } |
３次元グラフィックスのレンダラーのパラメータを指定するオブジェクト。プロパティの意味は次のとおり。 clearColor : クリアーカラー（背景色） clearAlpha : クリアーアルファ（背景透明度） parameters : WebGLRendererクラスのコンストラクタに渡すパラメータ |
| camera | <object> |
{ type : "Perspective", position: { x:15, y:0, z:15 }, up : { x:0, y:0, z:1 }, target: { x:0, y:0, z:0 }, fov : 45, near : 0.1, far : 100, left : -10, right: 10, top: 10, bottom: -10, } |
３次元グラフィックスのカメラの種類とパラメータを指定するオブジェクト。カメラとして透視投影（デフォルト）、正投影が用意されている。プロパティの意味は次のとおり。 type: カメラの種類（ Perspective | Orthographic） position: カメラの位置座標 up: カメラの上ベクトル target: カメラの向き中心座標 fov: 視野角 near: 視体積手前までの距離 far: 視体積の奥までの距離 left: 視体積の左までの距離（正投影） right: 視体積の右までの距離（正投影） top: 視体積の上までの距離（正投影） bottom: 視体積の下までの距離（正投影） |
| light | <object> |
{ type : "Directional", position: { x:0, y:0, z:10 }, target :{ x:0, y:0, z:0}, color: 0xFFFFFF, intensity: 1, distance: 0, angle: Math.PI/4, exponent: 20, ambient: null } |
３次元グラフィックスの光源の種類とパラメータを指定するオブジェクト。光源として平行光源（デフォルト）、スポットライト光源、点光源が用意されている。プロパティの意味は次のとおり。 type: 光源の種類（ Directional | Spot | Point） position: 光源位置 target: 光源の向き（平行光源, スポットライト光源） color: 光源色 intensity: 光源強度 distance: 距離減衰指数（スポットライト光源, 点光源） angle: 角度（スポットライト光源） exponent: 光軸からの減衰指数（スポットライト） ambient: 環境光源色 |
| shadow | <object> |
{ shadowMapEnabled: false, shadowMapWidth: 512, shadowMapHeight: 512, shadowCameraVisible: false, shadowCameraNear: 0.1, shadowCameraFar: 50, shadowCameraFov: 120, shadowCameraRight: 10, shadowCameraLeft: -10, shadowCameraTop: 10, shadowCameraBottom: -10, shadowDarkness: 0.5 } |
３次元グラフィックスの影描画関連のパラメータを指定するオブジェクト。プロパティの意味は次のとおり。 shadowMapEnabled: シャドーマップの利用 shadowMapWidth:シャドーマップの横幅 shadowMapHeight:シャドーマップの高さ shadowCameraVisible:シャドーマップの可視化 shadowCameraNear:シャドーカメラのnear shadowCameraFar: シャドーカメラのfar shadowCameraFov: シャドーカメラのfov shadowCameraRight: シャドーカメラのright shadowCameraLeft: シャドーカメラのleft shadowCameraTop: シャドーカメラのtop shadowCameraBottom: シャドーカメラのbottom shadowDarkness: 影の黒さ |
| trackball | <object> |
{ enabled : false, noRotate : false, rotateSpeed : 2.0, noZoom : false, zoomSpeed : 1.0, noPan : false, panSpeed : 1.0, staticMoving : true, dynamicDampingFactor : 0.3, } |
カメラパラメータをマウス操作で変更するための仕組みであるトラックボール関連パラメータ。プロパティの意味は次のとおり。 enabled :トラックボール利用の有無 noRotate : トラックボールの回転無効化 rotateSpeed : トラックボールの回転速度の設定 noZoom : トラックボールの拡大無効化 zoomSpeed : トラックボールの拡大速度の設定 noPan : トラックボールのカメラ中心移動の無効化と中心速度の設定 panSpeed : 中心速度の設定 staticMoving : トラックボールのスタティックムーブの有効化 dynamicDampingFactor : トラックボールのダイナミックムーブ時の減衰定数 |
| timeslider | <object> |
{ enabled: false, skipRecord: 50, domID: null, save: { flag: false, objects: [] } } |
時間制御スライダーを実装するために必要なプロパティなどを格納するオブジェクト。 enabled：時間制御スライダー利用の有無 skipRecord：運動記録の間引回数 domID：時間制御スライダーの要素のID 名 save：制御前の最新データを保持するためのオブジェクト（内部） save.flag：最新データの保持フラグ（内部） save.objects：3 次元オブジェクトの最新情報が格納された配列（内部） |
| playback | <object> |
{ enabled : false, checkID : null, locusVisible : true, velocityVectorVisible : false, strobeVisible : false } |
再生モードを実装するために必要なプロパティなどを格納するオブジェクト。 enabled : 再生モード利用の有無 checkID : checkボックスのID locusVisible : 軌跡の表示 velocityVectorVisible : 速度ベクトルの表示 strobeVisible : ストロボの表示 |
| video | <object> |
{ enabled : false, downloadButtonID : null, makeButtonID : null, speed : 30, quality :0.8, fileName : "video.webm", makeStartFlag : false, makingFlag : false, finishedFlag : false, readyFlag : false } |
動画生成を実装するために必要なプロパティなどを格納するオブジェクト。 enabled : 動画生成利用の有無 downloadButtonID : 動画ダウンロードボタンID makeButtonID : 動画生成ボタンID speed : 動画のフレームレート quality : 動画の画質 fileName : 動画のファイル名 makeStartFlag : 動画生成開始フラグ（内部） makingFlag : 動画生成中フラグ（内部） finishedFlag : 動画生成完了フラグ（内部） readyFlag : 動画生成完了フラグ（内部） |
| skybox | <object> |
{ enabled : false, cubeMapTexture : null, size: 400, r:{ x:0, y:0, z:0 } } |
スカイボックスを実装するために必要なプロパティなどを格納するオブジェクト。 enabled : スカイボックス利用の有無 cubeMapTexture : テクスチャ size : スカイボックスのサイズ r: スカイボックスの位置 |
| skydome | <object> |
{ enabled : false, radius : 200, topColor : 0x2E52FF, bottomColor : 0xFFFFFF, exp : 0.8, offset : 5 } |
スカイドームを実装するために必要なプロパティなどを格納するオブジェクト。 enabled : スカイドーム利用の有無 radius : スカイドームの半径 topColor : ドーム天頂色 bottomColor : ドーム底面色 exp : 混合指数 offset : 高さ基準点 |
| fog | <object> |
{ enabled : false, type: "linear", color: null, near: 0.1, far: 30, density : 1/20 } |
フォグを実装するために必要なプロパティなどを格納するオブジェクト。 enabled : フォグ利用の有無 type : フォグの種類（ "linear" | "exp" ） color : フォグ色 near : フォグ開始距離（線形フォグ） far : フォグ終了距離（線形フォグ） density : フォグの濃度（指数フォグ） |
| lensFlare | <object> |
{ enabled: false, flareColor: 0xFFFFFF, flareSize: 300, flareTexture: null, ghostTexture: null, ghostList : [ { size: 60, distance:0.6 }, { size: 70, distance:0.7 }, { size: 120, distance:0.9 }, { size: 70, distance:1.0 }, ] } |
レンズフレアを実装するために必要なプロパティなどを格納するオブジェクト。 enabled : レンズフレア利用の有無 flareColor : フレアテクスチャの発光色 flareSize : フレアのサイズ flareTexture : フレアテクスチャ ghostTexture : ゴーストテクスチャ ghostList : レンズフレアのリスト（サイズと距離をオブジェクトリテラルで指定） |
| objects | <array> | [] | 本実験室にて物理演算の対象とするオブジェクト。 |
| プロパティ名 | データ型 | デフォルト | 説明 |
|---|---|---|---|
| id | <int> | — | 生成された仮想物理実験室オブジェクトの識別番号。 |
| initFlag | <bool> | true | 仮想物理実験室が初期状態であることを示すフラグ。 |
| pauseFlag | <bool> | true | 仮想物理実験室が一時停止状態であることを示すフラグ。 |
| resetFlag | <bool> | false | 仮想物理実験室を初期状態へ戻すフラグ。 |
| makePictureFlag | <bool> | true | 画面キャプチャの生成フラグ。 |
| makeSaveDataFlag | <bool> | true | セーブデータ生成フラグ。 |
| stats | <Stats> | new Stats() | FPS計測・表示用のオブジェクト。 |
| draggableObjects | <array> | [<Mesh>] | draggableフラグが立てられているマウスドラックにて移動を行うことのできる３次元オブジェクトの、概形を表すバウンディングボックスオブジェクト（three.jsのMeshクラスのオブジェクト）が格納される配列。 |
| CG | <object> | {} | 仮想物理実験室のコンピュータ・グラフィックス関連の各種プロパティが格納されるプロパティ。 |
| collisionDetectionObjects | [<PhysObject>] | [] | 衝突判定を行う３次元オブジェクトが格納される。 |
| copyPropertyList | [<string>] | [] | コピー対象プロパティリスト。 |
| loadData | <object> | null | 保存データ読み込み後のオブジェクトを格納するプロパティ。 |
| メソッド名 | 引数 | 戻値 | 説明 |
|---|---|---|---|
| setParameter ( parameter ) | <object> | なし | コンストラクタの引数で指定されたパラメータを実際に各プロパティに与えるメソッド。 |
| getProperty ( object ) | <PhysObject> | <object> | 実験室オブジェクトや３次元オブジェクトの完全コピーを生成するために必要なプロパティを取得するためのメソッド。 |
| clone ( object ) | <PhysObject> | <PhysObject> | 引数で与えられた実験室オブジェクトあるいは３次元オブジェクトの完全コピーを生成するメソッド。 |
| getSaveData ( ) | なし | { physLab:<PhysLabObject>,objects:[ <PhyObjectObject>]} | 実験室オブジェクト並びに３次元オブジェクトのコピーに必要な全プロパティを格納したオブジェクトを生成して返す。 |
| makeJSONSaveData() | なし | なし | makeSaveDataFlagフラグが立てられた時に、JSON形式の保存データをダウンロードできるように、BlobURLをa要素に与える。 |
| loadJSONSaveData( filePath) | <string> | なし | loadFilePathプロパティに指定されたファイルパスに存在する実験室データが保存されたファイルを読み込んで、JSON形式からオブジェクトに変換後、結果をloadDataプロパティに与える。 |
| restorePhysObjectsFromLoadData () | なし | なし | loadDataプロパティに与えられた３次元オブジェクトのプロパティから改めて３次元オブジェクトを生成して、実験室オブジェクトに登録する。 |
| startLab ( ) | なし | なし | 仮想物理実験室を開始する。全ての準備が完了した後に実行する必要がある。 |
| createPhysObject( physObject ) | <PhysObject> | なし | 引数で与えられた３次元オブジェクトを仮想物理実験室に生成するためのメソッド。 |
| initEvent ( ) | なし | なし | JavaScriptにおけるイベント登録をおこなう。r1では、FPS計測結果を表示するHTML要素を追加と、スタートボタンのクリック時イベントの宣言のみが実装。時間発展の制御を行うボタンの設定、初期値を設定するスライダー関連のイベントが定義されている。 |
| switchButton | なし | なし | 実験室の状態に応じてボタンの表示内容を変更するためメソッド。 |
| init3DCG ( ) | なし | なし | 仮想物理実験室による３次元グラフィックス関連の初期化を行う。具体的には、initThree、initCamera、initLightが実行される。 |
| initThree ( ) | なし | なし | three.jsの初期化を行う。 |
| initCamera ( ) | なし | なし | three.jsにおけるカメラオブジェクトの初期化を行う。 |
| initLight ( ) | なし | なし | three.jsにおける光源オブジェクトの初期化を行う。 |
| initDragg ( ) | なし | なし | 仮想物理実験室内に配置された３次元オブジェクトをマウスドラックで移動させるために必要な初期化を行う。 |
|
mouseDownEvent(physObject) mouseDraggEvent(physObject) mouseUpEvent(physObject) |
<PhysObject> | — | 3 次元オブジェクトがマウスダウンされた時、マウスドラックされた時、マウスアップされた時に実行するメソッド。引数にはマウスドラックされている３次元オブジェクトが格納される。実験室の実装時にオーバーライドで利用できるように空のメソッドが定義されている。 |
| loop ( ) | なし | なし | 仮想物理実験室における無限ループ。時間発展が停止中でも本関数による無限ループは停止しない。 |
| timeControl ( ) | なし | なし | 仮想物理実験室内の時間を制御するメソッド。loopメソッドの中で呼び出される。 |
| makeVideo ( ) | なし | なし | 仮想物理実験室の状態に応じて動画各フレームの取得、動画のコンパイル、動画オブジェクトの初期化 |
| checkFlags ( ) | なし | なし | 仮想物理実験室の状態をチェックして時間発展を制御するためのメソッド。 |
| timeEvolution ( ) | なし | なし | 仮想物理実験室の時間発展を実行するメッド。loopメソッド内で実行されることを想定している。 |
| makePicture ( ) | なし | なし | canvas 要素に描画された仮想物理実験室の３次元グラフィックスをPNG 形式の画像データとして生成するメソッド。 |
| makeDownloadData ( ) | なし | なし | ３次元オブジェクトの任意の運動データを格納したダウンロードデータを作成するメソッド。 |
|
beforeInitEvent() afterInitEvent() beforeInit3DCG() afterInit3DCG() afterStartLab() beforeTimeControl() afterTimeControl() beforeCheckFlags() afterCheckFlags() breforeTimeEvolution() centerTimeEvolution() afterTimeEvolution() breforeMakePicture() afterMakePicture() breforeMakeJSONSaveData() afterMakeJSONSaveData() beforeLoop() afterLoop() |
なし | — | 仮想物理実験室内の外部との情報のやりとりを行うメソッド（通信メソッドと呼ぶ）。主要なメソッドの最初と最後に配置され、目的に応じてオーバーライドすることで実験室の柔軟な制御に利用することができる。 |
| checkCollision( contact ) | <bool> | なし | collisionDetectionObjects プロパティに格納された衝突判定対象となる全ての3 次元オブジェクト同士の衝突判定を行うメソッド。接触判定を行う場合、引数をtrueとする。 |
| checkContact ( ) | なし | なし | collisionDetectionObjects プロパティに格納された衝突判定対象となる全ての3 次元オブジェクト同士の接触判定を行うメソッド。 |
|
checkPossibilityOfCollision( object1,object2) |
< PhysObject > < PhysObject > |
<bool> | 引数で指定した２つの３次元オブジェクトのバウンディング球同士の衝突を判定する。 |
| checkCollisionSphereVsPlane ( sphere , object , noSide) |
< Sphere> < Plane > <bool> |
<bool> | 第１引数で指定した球オブジェクトと第２引数で指定した３次元オブジェクトを構成する平面との衝突を判定する。衝突が検知された場合には、球オブジェクトのcollisionObjectsプロパティに衝突力計算に必要な情報が格納される。平面の端での衝突判定を行わない場合には第３引数にtrueを与える。 |
| getCollisionPlane ( sphere, object, i ) |
<Sphere> <Plane> <int> |
<Vector3> | 球オブジェクトと平面領域を持つ3 次元オブジェクトとの衝突判定を行うメソッド。衝突が検知された場合には、球オブジェクトへの力の加わる方向を返す。第1 引数に球オブジェクト（sphere）、第2 引数に衝突判定用３次元オブジェクト（object）、第3 引数に３次元オブジェクトの衝突判定を行う面の番号を指定する。 |
| getCollisionSide ( sphere, object, i ) |
<Sphere> <Plane> <int> |
<Vector3> | 球オブジェクトと平面領域の辺との衝突判定を行うメソッド。衝突が検知された場合には、球オブジェクトへの力の加わる方向を返す。第1 引数に球オブジェクト（sphere）、第2 引数に衝突判定用３次元オブジェクト（object）、第3 引数に3 次元オブジェクトの衝突判定を行う面の番号を指定する。 |
| getCollisionEdge ( sphere, object, i ) |
<Sphere> <Plane> <int> |
<Vector3> | 球オブジェクトと平面領域の角との衝突判定を行うメソッド。衝突が検知された場合には、球オブジェクトへの力の加わる方向を返す。第1 引数に球オブジェクト（sphere）、第2 引数に衝突判定用３次元オブジェクト（object）、第3 引数に3 次元オブジェクトの衝突判定を行う面の番号を指定する。 |
| checkCollisionSphereVsLine( sphere , object |
< Sphere> <Line> |
<bool> | 第１引数で指定した球オブジェクトと第２引数で指定した線オブジェクトの衝突判定・衝突計算を行うメソッド。 |
| getCollisionSphere( positon1, radius1, positon2, radius2 ) |
<Vector3> <Vector3> |
<Vector3> | 引数に与えた２つの球体の位置（positon1, positon2）と半径（radius1, radius2）から衝突判定を行い、衝突を検知した場合には衝突力の方向ベクトルを返すメソッド。 |
| checkCollisionSphereVsSphere ( sphere1 , sphere2 ) |
< Sphere> <float> < Sphere> <float> |
<bool> | 第１引数と第２引数で指定した球オブジェクト同士の衝突を判定する。衝突が検知された場合には、球オブジェクトのcollisionObjectsプロパティに衝突力計算に必要な情報が格納される。 |
|
getCollisionSphere ( positon1, radius1, positon2, radius2 ) |
<Vector3> <float> <Vector3> <float> |
<Vector3> | 第１引数と第２引数で指定した球オブジェクトの位置と半径、第３引数と第４引数で指定した球オブジェクトの位置と半径から衝突を判定する。衝突が検知された場合には、球オブジェクトのcollisionObjectsプロパティに衝突力計算に必要な情報が格納される。 |
| getCollisionCircle ( sphere, circle, i , noSide ) |
<Sphere> <Circle> <int> <bool> |
<Vector3> | 第１引数と第２引数で与えた球オブジェクト（sphere）と円オブジェクト（circle）との衝突判定を行い、衝突を検知した場合には衝突力の方向ベクトルを返すメソッド。第３引数は円オブジェクトを構成する円の衝突判定を行う番号、円端での衝突判定を行わない場合には第３引数にtrueを与える。 |
| checkCollisionSphereVsCylinder ( sphere , object ) |
< Sphere> <Cylinder> |
<bool> |
第１引数と第２引数で指定した球オブジェクト同士の衝突を判定する。衝突が検知された場合には、球オブジェクトのcollisionObjectsプロパティに衝突力計算に必要な情報が格納される。 |
| getCollisionCylinderSide( sphere, object ) |
< Sphere> <Cylinder> |
<Vector3> | 第１引数と第２引数で指定した球オブジェクトの位置と半径、第３引数と第４引数で指定した球オブジェクトの位置と半径から衝突を判定する。衝突が検知された場合には、球オブジェクトのcollisionObjectsプロパティに衝突力計算に必要な情報が格納される。 |
| removeCollisionDetectionObjects( physObject ) | <PhysObject> | <bool> | 衝突計算の対象となるcollisionDetectionObjectsプロパティ（配列）から引数でしてした３次元オブジェクトを削除するメソッド。 |