Javascriptでカンタン３D物理シミュレーション

Javascriptで３次元空間の中での物体の運動をシミュレーションするプログラムは、Three.jsとCannon-es.jsというライブラリを組み合わせて使うと、比較的簡単につくれます。

 Three.js とは、３次元グラフィクス(3D-CG)を簡単に書くことができるライブラリで、Cannon-es.jsは、３次元空間での物体の落下や衝突など、物体の物理的な動きをシミュレーションできる「物理エンジン」のひとつです。

 いずれのライブラリも、Javascript言語でプログラムを書き、Webブラウザ上で動作させることができます。

 ただし、Three.jsとCannon-es.jsはそれぞれ独立したライブラリなので、連携させると、かなり複雑なコードになってしまいます。

 そこで、３次元空間の中での物体の運動をシミュレーションするプログラムを書きやすくするために、Three.jsとCannon-es.jsを意識せずに使えるクラスCannonWorld.jsを作成しました。

 このCannonWorldクラスを使うと、球が落ちていくプログラムは、次のように簡単に書けます。

  const SimWorld = new CannonWorld(); // 3次元シミュレーション空間を生成

  const Sphere = SimWorld.addSphere({radius:0.5, mass: 1.0, position: new CANNON.Vec3(0, 8, 0)}); // シミュレーション空間に球を追加する

続きは、解説データをダウンロードしてご覧ください。

クリックしてダウンロード (解説データHTML版) (解説データMarkdown版) 　(CannonWorldクラスなどサンプルコード)

※ダウンロードしたら、ZIPファイルを展開してください。