これはBabylon.js アドベントカレンダー2022の記事です。
Babylon.jsではいろいろな方法で3D空間の中を移動する方法が提供されています。今回はその中でも比較的簡単に移動できる方法を紹介します。
1. Babylon.jsで作った空間を移動する方法
Babylon.js DocumentationのInputというセクションに移動に使える方法が紹介されています。
Input | Babylon.js Documentation
(1) Gamepad
ゲームパッドが使えます。あらゆるゲームパッドが使えるのかはわかりませんが、7,8年くらい前に1500円程度で買ったUSB接続タイプのゲームパッドをPCに接続して、以下のサンプルコードを実行したところ、ほとんどのボタン入力を取ることができました。
https://playground.babylonjs.com/#U3XJTB#38
また、XBox ControllerのAPIサポートが書かれておりXBox コントローラの入力も取ることができます。
Xbox360Pad | Babylon.js Documentation
かなり前の動画ですが、Xboxコントローラを動かしています。
あとは、私は試せていませんが、DeviceSourceManagerのセクションでは、任天堂SwitchのJoy-Conにも対応していることが書かれています。
Switch Gamepad, L+R JoyCon Grip or Pro Controller (DeviceType: BABYLON.DeviceType.Switch, Inputs: BABYLON.SwitchInput)
引用元:Device Source Manager | Babylon.js Documentation
(2) Virtual Joystick
こちらで紹介されています。
Virtual Joysticks | Babylon.js Documentation
これは、画面上に丸い図形が常に表示され、ここをマウスでドラッグする、またはiPadなどでは画面タッチすることで十字キーのような操作ができるものです。
2つのVirtual JoyStickの使い方がサンプルコードとして紹介されています。
https://playground.babylonjs.com/#PRQU53#7
https://playground.babylonjs.com/#C6V6UY#5
(3) カメラを移動させる
これが最も簡単かもしれません。
Babylon.jsで準備されている様々なカメラのうち「FreeCamera」か「UniversalCamera」を使います。
最初にカメラを宣言した後で、attachControlというメソッドを追加します。これだけです。
これにより、十字キーで前進、後退、左右移動ができます。
setTargetがついていると、ターゲットに指定したオブジェクトを向いて移動しようとします。直感的な移動を実現するにはsetTargetは入れない方が良いと思います。
なお、この2つのカメラの違いがあまりわかってないのですが、UniversalCameraの方がゲームパッドのサポートまで入っているようです。
Please consider using the new UniversalCamera instead as it adds more functionality like the gamepad.
引用元:FreeCamera | Babylon.js Documentation
今回の確認範囲ではどちらでもよかったのでFreeCameraで試しました。
2. おわりに
今回紹介した方法以外にも、JavaScriptの標準機能であるAddEventListenerを使う、DeviceSourceManagerのdeviceSource.onInputChangedObservable.addでtype=keyboardを指定するなどがあります。Babylon.js Documentationを調べていただくと、さらに詳しい情報が得られるのでぜひお試しください。