前回、PCのような2Dスクリーンで、Babylon.jsのVRモードと通常表示をキーボードで切り替える方法を紹介しました。
Babylon.jsのWebVRモードと通常モードを切り替える方法 - CrossRoad
これだとVRヘッドセットを使うときもキーボード接続が必要になります。それではやりづらいので、今回はVRヘッドセットのコントローラ操作で切り替える方法を紹介します。
動作環境です。
Chrome : 71.0.3578.98 Babylon.js : 3.3 Oculus Go
- 1. コントローラを表示させる方法
- 2. Oculus Goのコントローラを使って没入型と通常VRモードを切り替える方法
- 3. (補足)Babylon.jsの公式 Documentationにpull requestが反映されました
- 4. 終わりに
1. コントローラを表示させる方法
下記のメソッドを使います。
var vrHelper = scene.createDefaultVRExperience(); vrHelper.onControllerMeshLoaded.add((webVRController)=>{ });
ここで宣言したwebVRControllerがコントローラのクラスです。あるいは下記の方法でもできます。WebVRControllerというクラスが関係していればよいので、いくつかの書き方があります。
camera = new BABYLON.WebVRFreeCamera("WebVRCamera", new BABYLON.Vector3(0, 2, 0), scene); camera.onControllersAttachedObservable.add(() => );
var vrHelper = scene.createDefaultVRExperience(); vrHelper.oncontrollermeshloadedobservable.add((controller)=>{
これでコントローラが表示されます。
なお、下記に書かれたVRヘッドセットのコントローラは自動で認識され、コントローラの形の3Dモデルも表示されます。
引用元：WebVRController - Babylon.js Documentation
Oculus Goは対応していないので、Generic Controllerとして割り当てられたようです。よくみると、Oculus Goのコントローラとは形状が異なっています。
2. Oculus Goのコントローラを使って没入型と通常VRモードを切り替える方法
Babylon.jsにはActionManagerというクラスがあります。これを使うことでイベント制御ができます。今回は「ボタンが押されたら」をOnPickDownTriggerで表現し、押されたあとの処理をfunction()の中に書いています。
今回の処理に関係するコードの記述です。
gist372319a5108093fd69dd8c9d0cdae583
実行するのに必要なソース一式はこちらに置きました。
動かすとこのようになります。
まず、OculusGoのブラウザからBabylon.jsのサンプルにアクセスします。右下のVRヘッドセットアイコンをコントローラのトリガーボタン(裏側)で選択すると没入型のVRモードになります。
sphereをトリガーボタンで選択すると、元のブラウザ表記に戻ります。簡単なようですが、Babylon.jsのサンプルコードやドキュメントにはなかったので解説しました。
3. (補足)Babylon.jsの公式 Documentationにpull requestが反映されました
"How To 360 Photo with WebVR"というセクションを新規追加させていただきました。
How to do 360 Photo - Babylon.js Documentation
小さいことですが、これからもBabylon.jsに貢献できればと思います。
4. 終わりに
Oculus Goのコントローラは、Androidの「戻る」に相当するボタンがあります。そのため、今回の実装を使わなくても没入型と通常VRモードを行き来することは可能です。 しかし、HTC VIVE、Oculus Touch、Windows Mixed Realityなど他のVR機器では、「戻る」がありません。そのため、この機能は必要になると思います。
次回は、Oculus Goそれぞれのボタンの割り当てや基本操作について解説しようと思います。
