ARは画面の中だけのモノ？現実にあるモデルとの繋がりが持てるWebARアプリを作った。

14147 ワード
WebAR AR A-Frame AR テキストリンク

現実が主役であるとすれば、画面の中だけでARモデルが活躍するのではなく、現実にあるモデルとの繋がりが重要であると思い、ARモデルに画面の外でも、実際に会えるようなWebアプリケーションをA-Frameで作りました。

■画面内のARモデル

■画面外のARモデル

A-Frame サンプルソース

A-FRAMEはwebブラウザ上で動作する3Dとバーチャルリアリティ開発のためのオープンソースフレームワークであり、HTMLのタグとしてシーンを記述できるため、Javascriptを知らない人でもHTMLの知識さえあればARやVRのコンテンツが作れてしまう、とても便利なフレームワークです。
公式サイト: https://aframe.io/
ドキュメント: https://aframe.io/docs/guide/
利用参考記事：https://qiita.com/rootx/items/cba61f1f725bd0090307

test.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>penguin</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover, shrink-to-fit=no" />
  <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
  <script src="https://raw.githack.com/AR-js-org/AR.js/3.3.1/aframe/build/aframe-ar-nft.js"></script>
  <style>
    * {
      margin: 0; padding: 0;
    }

    body {
      overflow: hidden;
      cursor: none;
    }

    #banner {
      position: fixed;
      bottom: 0;
      left: 0; right: 0;
      height: 88px;
      background: url(https://i.gyazo.com/360ab22552ba9106a4a241ae2784e6ee.png) center bottom no-repeat;
      background-size: contain;
    }

    #mask {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0; bottom: 0;
    left: 0; right: 0;
    color: #fff;
    background: url(https://i.gyazo.com/f06b2b3bc28fa93d15210c74223c1732.png) center no-repeat;
    background-size: contain;
    }

    .a-loader-title {
      display: none !important;
    }
  </style>
</head>
<body>
  <script>
    let timer;
    let audio;

    AFRAME.registerComponent('marker', {
      init: function () {
        const marker = this.el;

        marker.addEventListener('markerFound', function () {
          if (!audio) {
            return;
          }

          clearTimeout(timer);
          timer = setTimeout(() => {
            audio.currentTime = 0;
            audio.play();

          }, 0);

        });

        marker.addEventListener('markerLost', function () {
          if (!audio) {
            return;
          }

          clearTimeout(timer);
          audio.pause();
        });
      }
    });

    window.onload = () => {
      audio = document.getElementById('audio');

      document.getElementById('mask').addEventListener('click', () => {
        audio.play();
        audio.pause();
        document.body.removeChild(document.getElementById('mask'));
      });
    };
  </script>

  <a-scene embedded arjs="debugUIEnabled: false" vr-mode-ui="enabled: false">
    <a-assets>
      <audio id="audio" src="audio.mp3"></audio>
      <!--https://poly.google.com/view/fBXvsC6pe_V-->
      <a-asset-item id="obj" src="Elephant_01.gltf"></a-asset-item>
    </a-assets>
    <a-marker marker type='pattern' url='./pattern.patt'>
      <a-text position="0 2 0" color="blue" value="Demo!"></a-text>
      <a-entity
       gltf-model="#obj"
       scale=".01 .01 .01"
       position="0 0 0"
       animation="property: position;
       to: -15 0 0;
       dir: alternate;
       dur: 130000;
       loop: false">
      </a-entity>
    </a-marker>
    <a-entity camera></a-entity>
  </a-scene>
  <a id="banner" href="https://camp-fire.jp/projects/344677/preview?token=1ojwjqbf" target="_blank"></a>
  <div id="mask"></div>
</body>
</html>

ARモデルに画面の外で実際に会えるとしたら・・私の場合。

皆さんはARモデルに画面の外でつながれるとしたら、何に使ってみたいと思いますか？
私の場合は、子育てをサポートするためのWebARアプリケーションに応用してみました。
ざっくり言うと、お風呂場に実際にあるおもちゃの動物をARの世界に登場させて、ごはんを食べることやお風呂に入ることを嫌がる子供をARコンテンツで解決しようとしています。

■利用シナリオ
１．こどもがごはんを食べ終わると、空いたお皿の上にARの動物が現れます。大好きな動物さんに会うために、ごはんで「イヤイヤ」することなく最後までごはんを食べてくれます。
２．現れた動物さんが『一緒にお風呂に入ろう』と、こどもの次の行動である「お風呂」に誘ってくれるので、お風呂に入りたくない「イヤイヤ」も忘れ、進んでお風呂に入ってくれます。
３．現れるARのキャラクターは、お風呂場に”実際”にあるおもちゃの動物たちなので、お風呂場にいけば動物たちに直接会うことができます。

WebARアプリケーションデモ

A-Frameはブラウザ上で動くのでコンテンツの公開も非常に手軽なのがいいところです。
子育て支援WebARアプリケーションのデモを、私が現在挑戦しているクラウドファンディングの下記サイトから体験することが可能ですので、ご興味ある方はチェックしてみてください！
https://camp-fire.jp/projects/view/344677