【A-Frame】VRコンテンツの作り方

2818 ワード
HTML A-Frame JavaScript CSS VR HTML テキストリンク

はじめに

社内制作でVRコンテンツを作成しました。
細かいコンテンツ作成などは置いておき、VRっぽいものを作るまでの流れが簡単だったので紹介します。

環境

OS : Windows 10 Pro
エディター : VSCode

実装

1.　A-Frameの読み込み

<html>
  <head>
    <script src="https://aframe.io/releases/1.0.3/aframe.min.js"></script>
  </head>
  <body>
  </body>
</html>

2.　オブジェクトの配置

<html>
  <head>
    <script src="https://aframe.io/releases/1.0.3/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
      <a-box position="0 1.17 -3.9" rotation="0 0 0" color="#ff0000"></a-box>
    </a-scene>
  </body>
</html>

この時点で下記のように出力されます。
※PCで確認しているので、スマホなどで確認するとすでにジャイロセンサーなど取得して、空間上にオブジェを配置します。

画像にテクスチャーを張ったり、3Dオブジェクトを配置したりできるので、試してみてください。
詳細は↓↓公式サイト↓↓
https://aframe.io/

3.　A-Frame Inspector
値を変更して毎度、確認するのが面倒なので、A-Frame Inspectorを開いて（win:ctrl + alt + i）直接オブジェクトの配置やサイズ感を決めるとやりやすいかと思います。

※端末のOSのバージョンによって、センサーの取得状況が違うため、要実機検証が必要です。

実際にA-Frameで作ったサイトは↓こちら↓
http://www.hol-on.co.jp/greetingsite/newyear/2020/?utm_source=qiita

以上