CrossRoad

XRを中心とした技術ブログ。 Check also "English" category.

Babylon.jsで壁にぶつかる処理を書いてみよう

これはBabylon.js アドベントカレンダー2022の記事です。

qiita.com

前回作ったキーボード移動は、移動処理しか入れてないので、床があってもなくてもずっと移動できてしまいます。

An example of ball locomotion on Babylon.js

今回は、ステージに壁を追加して、壁にぶつかったら進まないという処理を追加してみます。

1. ぶつかったら進まないを実現するために物理エンジンを入れる

Babylon.jsは物理エンジンを持っていませんが、js製の物理エンジンを追加することができます。

Physics | Babylon.js Documentation

物理エンジンを有効にするには、scene.enablePhysics(); を1行追加します。

2. 物理エンジンを適用させたいオブジェクトにImposterを指定する

これはUnityでいうRigidBodyです。Imposterの設定をして、どんなcolliderを指定するかなども決めることができます。

今回は壁と障害物を追加してみました。

A simple stage on Babylon.js

追加した壁と障害物、および動かす球にImposterを追加します。

gist.github.com

3. 球の動く方向の座標系をLOCALからWORLDにする

LOCALのままだと、壁に跳ね返ったときに別の方向が指定されておかしな方向に移動するため、変更します。

gist.github.com

4. 動作確認する

これで移動しつつ、壁にぶつかったら跳ね返る、が実現できます。

A moving sphere with physics engine

こちらで動作確認できます。前回同様、WASDキーで球を動かせます。壁にぶつかるとそれ以上は移動できません。
https://playground.babylonjs.com/#89ZJLL#1

5. おわりに

物理エンジンはけっこう色々とできることがあるので、機会があれば紹介します。