完成図
部屋が狭いので分かりづらいかもしれませんが、VR空間を6DoF（顔の向きだけでなく、体の移動や高さもトラッキング）で動き回れているのが分かるかと思います。
必要なもの
- PC（OS問わず）
- Webブラウザ
- Googleアカウント
- VR機器
- スマホでもOK。できればOculus Questのように、6DoF対応機器推奨
以上！
3分ステップ
- PC
- A-Frameのサンプルをコピーしてsample1.html（ファイル名適当でOK）として保存
- Googleドライブにsample1.htmlをアップロード
- アップロードしたsample1.htmlを右クリックし、アプリで開く→HTML Viewerを選択
- HTML Viewerを使ったことがない場合、アクセス許可が出るので許可を選択
- これでGoogleドライブにアップしたhtmlファイルが、テキストファイルではなくhtmlとして再生できます
- Oculus Quest
- ブラウザを開く
- Googleに移動し、Googleアカウントにログインする
- 左メニューを開き、「パソコン版」を選ぶ
-
- ※Oculus Questのブラウザだと右クリックができず「HTML Viewer」で開くことができないため
- sample1.htmlをダブルクリックで開き、アプリでHTML Viewerを選択
- 右下のVRマークをクリック
- 終わり！
それ以外の方法
herokuやAWS S3にアップする方法でも当然ながらOKです。
今回の方法だとOculusの開発者登録やミラーリング設定等をせず、自分でコーディングしたWebVRアプリを完全無料で使うことができます。
終わりに
数年前にthree.jsでWebVRアプリを作ったのですが、その際はVR用のライブラリを別途読み込んだ上でシーン設定・カメラ設定・コントロール設定等を手動でゴリゴリ書いていく必要があり、かなり時間がかかるのでハードルが高く感じました。
A-Frameはthree.jsを元に作られたWebVRフレームワークですが、シーンを宣言するだけでVR対応・非対応機器問わずコントロールできる機能が付いてくるので非常に便利です。
A-Frameに関してあまり詳しくないので、いろいろ触って知見が溜まったらまたQiitaに投稿するかもしれません。