CANNON.jsでContactMaterialを使う

CANNON.jsでは剛体同士の衝突時の反応を、CANNON.MaterialとCANNON.ContactMaterialというマテリアルを使って設定することが出来ます。（例えばつるつるすべる氷の上、みたいなことも表現できます）

Three.jsでは3Dオブジェクトの質感などを表現するマテリアル。
物理エンジンでは衝突時の質感を表す、と考えるといいでしょう。
（例えば氷だったらつるつるの質感、ざらざらな質感は摩擦が大きい、とか）

マテリアルを使った設定は以下の手順で行います。

---

1. CANNON.Materialを生成
2. 生成したマテリアルを、そのマテリアルを持たせたい剛体を生成する際に引数に指定する
3. 別のCANNON.Materialを生成
4. 別のマテリアルを設定したい剛体に設定する（2と同じ）
5. 生成したふたつのマテリアルが接触した際にどう反応するかをCANNON.ContactMaterialを用いて設定
6. world.addContactMaterial()メソッドで、生成したContactMaterialをworldに追加

---

これの実際のプログラムサンプルは以下になります。
（地面とキューブのふたつの剛体を生成するサンプルです）

ContactMaterialSample.js

//地面用マテリアル
var groundMat = new CANNON.Material('groundMat');

//地面用の剛体を質量0で生成する
var ground= new CANNON.RigidBody(0, plane, groundMat);

//物理世界に追加
world.add(ground);

//Cube用マテリアル
var cubeMat = new CANNON.Material('cubeMat');

//地面用マテリアルとCube用マテリアルが接触した際のContactMaterialを生成
var cubeGroundCM = new CANNON.ContactMaterial(
    groundMat, //ひとつ目のマテリアル
    cubeMat,   //ふたつ目のマテリアル
    0.8,       //friction（摩擦係数）
    0.05       //restitution（反発係数）
);

//生成したContactMaterialをworldに追加
world.addContactMaterial(cubeGroundCM);

//Cube形状の剛体を生成
var rigidbody = new CANNON.RigidBody(mass, cube, cubeMat);
world.add(rigidbody);

若干はしょっている部分がありますが、基本的には剛体とマテリアルを1対1で生成し、さらにマテリアル同士の衝突用マテリアルを生成し、それをworldに追加する、という感じです。

ContactMaterialは、衝突したマテリアル同士の性質によって応答が変わることを表現しやすくするためだと思います。
普段はとても跳ねるマテリアルだけど、特定のマテリアルを持った剛体の場合は逆に吸着する、みたいなこともできると思います。

マテリアルをうまく設定できるとだいぶリアルな感じにできるのでぜひ使いこなしたいですね。