（同人作家のための）A-Frame入門

OculusGo買ってからVRが楽しくて。
でもクリエイター？気質人間としては、自分で作ったものをこのＶＲで動かしてみたくて、いろいろやってました。
その際の記録を兼ねて、記事を残しておきます。
この記事は

VRに興味ある
自分の作品（2D/3D）を気軽にVRにしてみたい。公開してみたい。
どこぞの企業の審査とか面倒。ていうか通らない。

という層を想定して書いています。別に同人作家に限らないんだけどね！大体同人作家かなって。。

A-Frameとはなんぞ

A-Frameとは、aframe.ioで開発されているWebでVRを実現するためのフレームワークです。
aframe.io

右下をみるとSupported by Mozillaとあるように、Mozilla Fundationに支援をうけて進められているプロジェクトのようです。

Aframeの特徴は

パソコン、スマホ、専用ゴーグル（OculusやVive）多種多様な機種で表示できる。（気軽に楽しめる。他人に見せやすい。）
公開するのに審査は不要
テキストエディタで開発できる。その際パソコンで気軽にプレビューできる。
パフォーマンスが良い（比較的複雑なモデルも軽快に動く）

辺りだと思います。専用ストアを通さないためマネタイズ等は難しいとか、複雑なゲームを作るには向かないと思うのですが、とにかく気軽にVR作品を作ってみたい人向きのソフトです。

何はともあれ最初の一歩

御託は良い。まず試してみてほしい。テキストエディタを用意して、以下のようにHTMLを作成して保存、Webブラウザで開いてみてください。ブラウザは割と何でもいいですが、FirefoxやChromeが良いようです。（Edgeでも動く）

<!doctype html>
<html>
  <head>
    <script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
      <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
      <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
      <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
      <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
      <a-sky color="#ECECEC"></a-sky>
    </a-scene>
  </body>
</html>

ようこそＶＲワールドへ！
四角と球と円柱とが表示されたかと思います。
パソコンのブラウザならドラッグ、スマホなら画面の向きを変えてみる、専用ゴーグルとか、スマホ＋ハコスコが用意できる人は右下のゴーグル…私には”にわかせんぺい”のマークに見えるのですがそこはどうでもいい、アイマスクボタンを押してみてください。

これだけ、これだけなんです。

画像を表示してみる。

PNGファイルが良いようです。~~ただ、0.8.0はローカルではうまくいかないっぽくて。。~~
追記２：タグが間違ってました。。画像を指定するタグは<a-asset-item>ではなく<img>です。（修正済）
Webサーバーにアップロードしてから試した方が良いかもしれません。
追記：コンソール見たら、ローカルは正しく動かないからサーバー上でやって（ローカルサーバーとか使ってください）って警告が出てますね。サーバー無くても動作はするんですけどサーバーを使う方が無難だと思います。

<!doctype html>
<html>
  <head>
    <script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
  </head>
  <body>
<a-scene>
  <a-assets>
    <img id="sample" src="sample.png"></img>
  </a-assets>

  <a-image src="#sample" width="3" height="2" position="0 1 -2"></a-image>
  <a-sky color="#888888"></a-sky>
</a-scene>
  </body>
</html>

モデルを表示してみる

A-Frameは標準で、

GLTFファイル
COLLADAファイル
OBJ/MTLファイル

を読み込むことができます。公式にはGLTFファイルを推奨しているのですが、
現状下の二つが候補になると思います。

サンプルにOBJ/MTLファイルを用意してみました。（スケールを間違えたので巨大な椅子。。）
http://angel.s234.xrea.com/pureplus/vr/chair.obj
http://angel.s234.xrea.com/pureplus/vr/chair.mtl

<!doctype html>
<html>
  <head>
    <script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
  </head>
  <body>
<a-scene>
  <a-assets>
    <a-asset-item id="chair-obj" src="chair.obj"></a-asset-item>
    <a-asset-item id="chair-mtl" src="chair.mtl"></a-asset-item>
  </a-assets>

  <a-entity obj-model="obj: #chair-obj; mtl:#chair-mtl"></a-entity>
  <a-sky color="#888888"></a-sky>
</a-scene>
  </body>
</html>

細かい解説等は次回としたいと思います。
待てない方は、英語になりますが公式サイトのドキュメントが一番良いです。
日本語の情報もいくつかあるんだけど、古い情報が多いので、その場合はバージョンも合わせてみた方が良いかもしれません。