CrossRoad

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

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

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

qiita.com

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

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

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

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

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

2. WASDキーでの移動方法

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

www.crossroad-tech.com

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

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

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

gist.github.com

3. 動作確認

このようになります。

A simple sphere locomotion example on Babylon.js

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

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

https://playground.babylonjs.com/#89ZJLL

4. おわりに

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