three.jsとcannon.jsの連携メモ

three.js(r87)でcannon.js(v0.6.2)を使う時の流れメモ．

cannon.jsの読み込み

公式サイトからスクリプトをダウンロードしてきて読み込む．

cannon.jsでワールド作成

物理演算を行うためのワールドを作成する．

cannon.jsで箱と床作成

箱と床を作成してワールドに追加する．

three.jsの設定

シーンやカメラ，ライト，レンダラーなどを設定する．three.jsのみの場合と同様のため省略．

three.jsで箱と床作成

cannon.jsで作成したものと対応するオブジェクトを作成する．

レンダリング

最後にワールドの時間を進め，cannon.jsの値をthree.jsにコピーする．これで物理演算が適用されるようになる．

参考

・ Cannon.js

・ Three.jsでCannon.jsを使う - Qiita

・ CANNON.jsを使って3Dに物理演算を持ち込む | CSS-EBLOG