Windows11の教科書

ウィンドウズ11やスマホで困ったことを調べたブログ

ウィンドウズ11やアプリで困ったことを調べたブログ

スポンサーリンク


【VR】お手軽VR入門 JS編

お手軽にVRを試したい場合の手順のメモです。今回はJS編。

お手軽VR入門 JS編

Firefoxなどでおなじみモジラが提供しているVR用のライブラリ「A-Frame」を使います。

 

こちらの記事で大体紹介されていますので簡単に確認していきます。

HTMLタグで本格VRコンテンツが作れる! Mozillaが開発した3Dライブラリ「A-Frame」がすごい - ICS MEDIA

 

A-Frameをセットアップ

GitHubからファイルを入手します。

github.com

 

箱を表示する

distフォルダに「aframe-v1.2.0.js」があるのでそれを利用します。

使い方は簡単で

シーンのタグ「<a-scene>」でシーンを挟みます。

あとはボックスで「<a-box position="0 0 -3" rotation="0 45 0" width="1" height="1" depth="1" color="#ff0000"></a-box>」のように指定します。

<body>
<script src="aframe-master/dist/aframe-v1.2.0.js"></script>
<a-scene>
<a-box position="1 1 -3" rotation="0 45 0" width="1" height="1" depth="1" color="#ff0000"></a-box>
</a-scene>
</body>

 

これで表示すると以下のようになります。

オキュラスクエストなどでブラウザから見ているときには、VRボタンでVRモードにできます。

f:id:apicode:20210324200900p:plain

 

ちなみに箱の位置では「position="1 1 -3"」のうに3つの数字を指定しています。これは、X,Y,Zの3軸の数値を表します。

3次元では縦横高の3つの座標を使います。

A-Frameでは、Xは右がプラス、Yは上がプラス、Zが手前がプラスとなります。

Zをマイナスにしてないと手前に来すぎてボックスが見えないということになります。

f:id:apicode:20210324201244p:plain


このページは以下から確認できます。

http://akyip.com/vr/box.html

 

写真を360度張り付ける

VRは360度覆われるとイマーシブ感が強くなります。

写真をまずAssetとして定義しておきます。

あとは背景「a-sky」で読み込んだ画像アセットを指定します。

 

<body>

<script src="aframe-master/dist/aframe-v1.2.0.js"></script>

 

<a-scene>

<a-assets> <img id="photo" src="dish.jpg"> </a-assets> 

<a-sky src="#photo" rotation="0 -130 0"></a-sky>

</a-scene>

</body>

 

実行するとこんな感じ。

f:id:apicode:20210324202151p:plain

 

サンプルリンクはこちら。

https://akyip.com/vr/bg.html

 

オキュラスクエスト2で見るには?

オキュラスクエスト2ではブラウザからアクセスします。

右下のVRボタンを押すとVRモードとなります。 

f:id:apicode:20210326130116p:plain

 

フル画面になると一気に没入感アップです。

f:id:apicode:20210326130136p:plain


 

左コントローラの「メニュー」ボタンを押すと、VRモードが解除され、通常のブラウザでの表示戻ります。

このブログは、ネットや書籍上の情報、個人の体験や感想を中心にまとめたものです。 正確性を期していはいますが、間違い・誤訳等あるかもしれません。 当サイトの情報によって生じたいかなる損失について一切の責任を負わないものとします. あらかじめご了承ください。

利用規約・プライバシーポリシー |〇問い合わせ