CrossRoadスマートフォン用の表示で見るCrossRoadAR、MR、VR、Babylon.jsを中心とした技術ブログ。2018の12日目です。TapでCubeを落とすHoloLensアプリを作ってみた』でした。Headsetで使う方法を紹介します。以下の環境で検証しています。Babylon.jsとは?下記の記事で書きましたが、Babylon.jsとはブラウザで3DCGを描画するためのフレームワークです。CrossRoadそのときは書いてませんが、VRヘッドセットのアプリも作ることができます。公式ドキュメントの引用ですが、このように各種コントローラにも対応しています。controller.引用元:https://doc.babylonjs.com/how_to/webvr_camera今回はBabylon.jsの使い方の詳細は省略します。ソースコードは公開しますのでそちらをご参考ください。Unityとの違いを含めた基本的な使い方は過去記事をご覧ください。VRのアプリを作るための必須メソッドシーンをVR化するには、createDefaultVRExperienceというメソッドを使います。scene.createDefaultVRExperience();ここで定義したvrHelperを使って、コントローラの設定をします。サンプルシーンの動作確認Babylon.jsの公式HPには多数の解説があります。断片的な記述が多いので、サンプルコードで動きを見ながらの方が理解しやすいと思います。いうことで、まずはサンプルを動かします。Example"のリンクにあります。このリンクは時々ロードに時間がかかるので、同じものを下記に貼りました。scene;};引用元:https://www.babylonjs-playground.com/#VIGXA3#7このようにコントローラが表示されますが、豆腐に覆われた形になります。先ほどのような豆腐だと使いづらいので修正します。leftHandは何かのメッシュオブジェクトで実体化する必要がありますが、豆腐の形が見える必要はないので、アルファを0にします。scene);CreateBoxはいくつかのプロパティを持っています。今回はfaceColorsを使いました。Babylon.jsでは、プロパティをjson形式で指定します。詳しくはこちらをご確認ください。Documentation修正すると、このようになります。みづらいですが、ボタンを押したこと、ジョイスティックを動かしたことが検出できています。ソースコードはこちらです。Realityヘッドセットとコントローラが動く状態にしてから、EdgeブラウザまたはChromeブラウザでindex.htmlを起動するだけです。終わりに整理するとすごく単純なのですが、Babylon.jsのドキュメントにはこのような細かい調整方法が書いてなかったので整理しました。Serviceと連携したサンプルについて」です。»ProfileAR、MR、VR、Babylon.jsを中心とした技術ブログです。広く色々な技術を勉強するのが好きで、あれこれ書いています。詳細なプロフィールはこちらをご確認ください。2020)■プライバシーポリシー■こちらに記載しておりますのでご確認ください。■お問い合わせ■こちらよりお願いいたします。月別アーカイブスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。