3Dオブジェクトに上向きの力を掛ける（Cannon.js + Three.js + React.js） 🐭

f:id:kimizuka:20220305165644g:plain

前回、Cannon.jsを使ってオブジェクトをマウスで掴んで放り投げるモックをつくりました。

blog.kimizuka.org

つくりました。が。いきなり盛り盛りすぎたので、要素を分解して検証していきたいと思います。

今回は、ものすごくシンプルに、

マウスダウン 👉 自分のY座標 + 1 の力を掛ける
マウスアップ 👉 解除

というモックをつくってみました。

DEMO

kimizuka.org

前述の通り、

マウスダウンで自分のY座標 + 1 の力を掛ける
マウスアップで力の解除

というシンプルなモックです。
マウスを長く押し込んだ際の挙動は想定通りなのですが、マウスを一瞬だけ押し込むと、高飛び跳ねます。

これは電磁石と鉄球をイメージすると想像しやすくて、

電磁石をONにして鉄球が止まってから電磁石をOFFにする → その場に止まる
電磁石をONにして鉄球が向かってくる最中に電磁石をOFFにする → 電磁石を超えて転がっていく

ということなのだと思います。

ソースコード（抜粋）

function handlePointerDownCanvas() {
  currsor.position.set(
    body.position.x,
    body.position.y + 1,
    body.position.z
  );

  pointToPointConstraintRef.current = new CANNON.PointToPointConstraint(
    body,
    new CANNON.Vec3(0, 0, 0),
    currsor,
    new CANNON.Vec3(0, 0, 0)
  );
  world.addConstraint(pointToPointConstraintRef.current);
}

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