AR.jsで犬と遊んでみた！

日高聖子

AR.jsとは？

AR（拡張現実、Agumented Reality）を利用した有名なサービスがポケモンGO！スマホのカメラで撮影した映像に画像やテキストなどを表示することができるので、リアル×バーチャルの不思議体験をすることができます。

ARはスマホアプリでしか使えない…と思っていたアプリ開発出来ない私。
その悲しさを解決するのがAR.jsです！

AR.jsはアプリインストール不要。スマホのカメラとブラウザでARを楽しむことが出来ます。

サンプルを動かしてみる

まずは、サンプルコードをそのまま動かしてみます。

<!DOCTYPE html>
<head>
  <script src="https://aframe.io/releases/0.6.1/aframe.min.js"></script>
  <script src="https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js"></script>
</head>
<body style='margin: 0; overflow: hidden;'>
  <a-scene embedded arjs>
    <a-marker preset="hiro">
      <a-sphere scale=".25 .25 .25" position="0 .5 0" color="#111">
      </a-sphere>
    </a-marker>
    <a-entity camera></a-entity>
  </a-scene>
</body>
</html>

aframe.min.jsとaframe-aj.jsを読み込む以外、JSの記載は不要です。
楽ちんだなぁ…ありがたい…

ARはa-sceneタグで囲われた部分です。
a-markerでARを表示させる位置（マーカー）を定義します。
present="hiro"はar.jsでデフォルト設定されているマーカーです。

a-shapeがマーカー上に表示させるオブジェクトです。
この部分はa-frameの範囲内なので割愛しますが、a-shapeでは球体が表示されます。

動作確認するのに、httpsが設定されたサーバーにアップする必要があります。今回はGitHubでリポジトリを作ってNetlifyにデプロイしました。
つまりタダ！ありがたい…（2回目）

オリジナルマーカーを作る

デフォルトのHIROマーカーでは味気ないな…
ということでオリジナルのマーカーを作りました。
画像をアップロードすることでマーカー（patt）と画像（img）が作成できます。

マーカーが作成できたら、a-markerタグにマーカー（patt）を読み込ませます。

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

表示させるモデルを変更する

デフォルトだと球体、よくあるサンプルだとボックスワイヤーが使われています。Google Polyで3Dモデルを拾ってきてもいいようですが…あんまり可愛くないのでこのモデルも変更します。
ここからはar.jsというよりかはa-frameの知識が必要です。

<a-assets>
    <img id="siba" src="siba.png">
</a-assets>
<a-scene embedded arjs="debugUIEnabled:false;">
    <a-marker preset='custom' type='pattern' url="pattern-marker.patt">
        <a-image id="siba" src="#siba" position="0 0 0" rotation="-90 0 0">
        </a-image>
    </a-marker>
    <a-entity camera></a-entity>
</a-scene>

a-assetsで使う画像を設定しておきます。
実際表示させる画像はa-imageタグで設定します。srcでa-assetsに設定した画像を指定して、positionとrotationで位置と調整します。

カメラでマーカーを撮影すると画像が表示されるようになりました！

モデルにアニメーションを追加する

次に表示された画像を上下にぴょこぴょこ動かしてみます。

<a-image id="siba" src="#siba" position="0 0 0" rotation="-90 0 0">
    <a-animation attribute="position" to="0 0 -0.5" direction="alternate" dur="1000" repeat="indefinite" easing="linear">
    </a-animation>
</a-image>

a-imageにa-animationを足していきます。
上下移動なので"attribute"は"position"を、toはz軸方向に0.5移動させます。


色々遊んでみた

テキストを入れてみたり、表示する犬を増やしてみたり。
positionのコツが難しいですが楽しめました。

<a-assets>
  <img id="chiwawa" src="chiwawa.png">
  <img id="husky" src="husky.png">
  <img id="pome" src="pome.png">
  <img id="toypoo" src="toypoo.png">
</a-assets>
<a-scene embedded arjs="debugUIEnabled:false;">
  <a-marker preset='custom' type='pattern' url="shiba-marker.patt">
    <a-image id="chiwawa" src="#chiwawa" position="0.5 0 -0.5" rotation="-90 0 0">
      <a-animation attribute="position" to="0.5 0 -1" direction="alternate" dur="1000" repeat="indefinite" easing="linear">
      </a-animation>
    </a-image>
    <a-image id="toypoo" src="#toypoo" position="-0.5 0 -0.5" rotation="-90 0 0">
      <a-animation attribute="position" to="-0.5 0 -1" direction="alternate" dur="1000" repeat="indefinite" easing="linear">
      </a-animation>
    </a-image>
    <a-image id="husky" src="#husky" position="0.5 0 0.5" rotation="-90 0 0">
      <a-animation attribute="position" to="0.5 0 0" direction="alternate" dur="1000" repeat="indefinite" easing="linear">
      </a-animation>
    </a-image>
    <a-image id="pome" src="#pome" position="-0.5 0 0.5" rotation="-90 0 0">
      <a-animation attribute="position" to="-0.5 0 0" direction="alternate" dur="1000" repeat="indefinite" easing="linear">
      </a-animation>
    </a-image>
  </a-marker>
  <a-entity camera></a-entity>
</a-scene>


もう少しお勉強が必要なこと

マーカーの黒枠が大きすぎるな…と思って枠サイズを最小にしてみるとなかなか反応されませんでした。

今回はマーカーとして犬のイラストを使ったのですが、試しに会社のロゴ（文字）を使ってみたのですがこれも反応されず。

マーカーについては特に注意事項などもないので、もう少し調べてみる必要がありそうです。

何に使おうかな

例えば名刺や年賀状にマーカーを印刷して、Webサイトへのリンクを配置すると、動く名刺・動く年賀状を作ることができるかも？
アプリをインストールする必要がないので、気軽に使うことができます

今回は表示モデルに画像を使いましたが、3Dモデルを準備するとアニメーションなどを工夫してよりARを楽しむこともできそうです。

この記事が気に入ったらサポートをしてみませんか？