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