2つの3Dオブジェクトを衝突させる（Cannon.js + Three.js + React.js） 💥

前回は、worldにaddBodyしたCannon.BodyとaddBodyしていないCannon.Bodyに対してPointToPointConstraintを使いました。

blog.kimizuka.org

今回はPointToPointConstraintの引数に、worldにaddBodyしたCannon.Bodyを2つ渡してみます。
結論としては同じ座標（中間地点）に引き寄せられ、力を解除すると弾き飛ばされるので、力を掛けるタイミングによっては衝突しているように見えます。

DEMO

kimizuka.org

f:id:kimizuka:20220306232504g:plain

※ 画面をクリックすると衝突します

ソースコード（抜粋）

  function handlePointerDownCanvas() {
    pointToPointConstraintRef.current = new CANNON.PointToPointConstraint(
      leftBody,
      new CANNON.Vec3(0, 0, 0),
      rightBody,
      new CANNON.Vec3(0, 0, 0)
    );
    world.addConstraint(pointToPointConstraintRef.current);
  }

  function handlePointerUpCanvas() {
    world.removeConstraint(pointToPointConstraintRef.current);
  }