AR.jsでブラウザ上でクイズ作ってみた

CPPXのP1です。

AR.jsというJavaScriptのライブラリを使用して、ブラウザ上でAR(拡張現実)クイズを作成してみます。
割と簡単なコーディングで任意のマーカー上に任意の物体を表示出来るので、是非試してみてください！
今回作成したコードはこちら、最終的なクイズはこちらから試してみることができます！！

AR.jsについて
任意の画像(問題文)を表示させよう
任意のマーカー上に表示させよう
クイズっぽくしよう

AR.jsについて

まずはAR.jsについて。リポジトリに解説があるので、詳しい説明はそちらに任せます。
とりあえず好きなマーカー上に好きな画像や物体を表示できる！くらいの認識で大丈夫です。
リポジトリに最も単純な例が載っています。以下のようなコードです。

<!DOCTYPE HTML>
<html>
<script src="https://aframe.io/releases/0.6.1/aframe.min.js"></script>
<script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.5.0/aframe/build/aframe-ar.js"> </script>
  <body style='margin : 0px; overflow: hidden;'>
    <a-scene embedded arjs>
    <a-marker preset="hiro">
            <a-box position='0 0.5 0' material='color: black;'></a-box>
    </a-marker>
    <a-entity camera></a-entity>
    </a-scene>
  </body>
</html>

こちらで試すことが出来ます。スマホのブラウザ(Chrome/Safari)で大体動くはずです。

f:id:cppx:20180710020657p:plain このマーカーをPC等で表示するか印刷するかして、その上に黒い立方体が表示されたらOKです。

任意の画像(問題文)を表示させよう

ただの黒い箱が表示されるだけだとなんだかつまらないですよね。なので次はこれを任意の画像にしてみます。
画像の表示はA-Frameというフレームワークを使って行われています。

<a-marker preset="hiro">
    <a-box position='0 0.5 0' material='color: black;'></a-box>
</a-marker>

この辺りのコードでmarker"hiro"上にcolor: blackなa-boxを表示している、というような感じです。

今回はこのbox上に
f:id:cppx:20180710014703j:plain
上のような感じの問題文を表示してみます。ただsrcに画像のパスを指定するだけで大丈夫です。

<a-marker preset="hiro">
    <a-box src="./img/question.jpg" position='0 0.5 0'></a-box>
</a-marker>

こちらで試すことができます。

任意のマーカー上に表示させよう

次に、先ほどの問題文を任意のマーカーから表示出来るようにしてみます。

<a-marker preset="hiro">

このようなマーカーの指定を

<a-marker preset='custom' type='pattern' url="img/question-marker.patt">

のような感じにすれば大丈夫です。patt形式のファイルはWeb上のジェネレーターで作成することが出来ます。
また、AR.js自体を少し変更しなければならないのですが、詳しくは作成したリポジトリを参照してください。js/aframe-ar.jsをそのまま使用すれば大丈夫です。

f:id:cppx:20180710025343p:plain
このマーカーから表示されれば成功です、こちらで試すことができます。
細かいHTMLの作法が変更されていますが、あんまり気にしないでください。

クイズっぽくしよう

以上までで、任意のマーカーに任意の画像を表示することが出来るようになりました。
せっかくなのでさらにいくつか仕組みを追加してクイズっぽくしてみましょう！
f:id:cppx:20180710100034p:plain
このマーカーをこちらでうつしてみましょう！
f:id:cppx:20180710100623j:plain
上の画像のように、クイズの問題文と回答の選択肢、その結果が表示されたでしょうか？ボタンの位置が凄まじいことになっていたらごめんなさい。