CrossRoad

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

Babylon.jsで作った空間の中を自由に移動してみよう

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

qiita.com

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コントローラを動かしています。

www.youtube.com

あとは、私は試せていませんが、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というメソッドを追加します。これだけです。

gist.github.com

これにより、十字キーで前進、後退、左右移動ができます。

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を調べていただくと、さらに詳しい情報が得られるのでぜひお試しください。