Babylon.jsで指定したオブジェクトをキーボード操作で移動させてみよう

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

今回はWASDキーで、平面上のsphereオブジェクトを動かす処理を紹介します。

1. オブジェクトの移動にはtranslateが便利

キーボードやゲームパッド操作でオブジェクトを移動させる場合、translateというメソッドを使うのが便利です。

sphere.translate(BABYLON.Axis.X, distance, BABYLON.Space.LOCAL);

このように記述すると、translateが呼ばれたとき、distanceで指定した距離だけ移動します。distance=0.01のように小さい値にして連続して呼び続けると自然な移動を再現できます。

先日の記事ではゲームパッド、virtual joy stickの移動、およびカメラ操作による自分視点の移動方法を紹介しました。

今回は、カメラは固定でsphereオブジェクトをキーボード操作だけで移動する方法です。

Babylon.js Documentationの"Making a Simple Car"で紹介されているPlaygroundを元に、簡単化してみました。

参考ドキュメント
doc.babylonjs.com

このようになります。

以下のURLにアクセスして、右側の画面でマウスカーソルを押した後でWASDキーのどれかを押しっぱなしにすると、球体 (Sphere) が移動します。

W (前進) と A (左) を同時に押すと、斜め左方向に前進などもできます。

今日紹介したActionManagerとregisterAfterRendererを使うと、いろいろなキー入力制御を作ることもできます。
機会あればそういう内容も紹介したいと思います。