こんにちは、はっちゃんです。
今回は、Three.jsで作成した物体を、Cannon.jsで動かしてみます。
Cannon.jsとは
Cannon.jsは、物理演算用のJavaScriptライブラリです。
Three.jsをインスパイアして作られたため、Three.jsと相性がよく、構文も非常に似ています。
まずは動かしてみる
どんなものかイメージをつかむため、とにかく動かしてみましょう。まずは空間に球体をつくり、適当な高さから落としてみます。
See the Pen cannon.js by k_hatsushi (@hatsushi_kazuya) on CodePen.
ただ落ちるだけですが、重力や位置の設定に基づいて自動で物体が動いているのが分かると思います。
跳ね方を変えてみる
球体の大きさと距離を変えたものを用意して、跳ね方の違いを見てみましょう。
See the Pen August blog cannon.js demo2 by k_hatsushi (@hatsushi_kazuya) on CodePen.
簡単に説明すると、剛体とマテリアルを1対1で生成し、マテリアル同士の衝突用マテリアルを生成し、それをworldに追加する、という感じです。
ContactMaterialは、衝突したマテリアル同士の性質によって応答が変わることを表現しやすくするためだと思います。普段はとても跳ねるマテリアルですが、特定のマテリアルを持った剛体の場合は逆に吸着する、みたいなこともできるはずです。
まとめ
マテリアルをうまく設定できるとだいぶリアルな感じにできるので、ぜひ使いこなしたいですね。
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
