A-frameでAR名刺を作ろう

実現を最優先にした記事構成にしています。
細かい内容は参考記事から参照してください。

A-Frameとは

Web上でVR・ARが実現できるJavascriptのライブラリ。
HTMLベースで書けるため、比較的気軽に扱えて便利。

読み込み

<head>
    <!-- A-Frame本体 -->
    <script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script>
    <!-- AR.js -->
    <script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.6.2/aframe/build/aframe-ar.js"></script>
    <!-- A-Frame内でリンクをつけるのに必要 -->
    <script src="https://rawgit.com/gasolin/aframe-href-component/master/dist/aframe-href-component.min.js"></script>
</head>

3D空間にする

a-scene: body直下に<a-scene>タグでくくる
a-marker: マーカー指定のタグ
デフォルトで良い場合はこちらのタグにする<a-marker preset="hiro">
カスタムマーカー作り方は下記に記載
a-entity: エンティティー要素

<a-scene embedded arjs="debugUIEnabled:false;">
    <a-marker type='pattern' url='./marker/pattern-profile.patt'>
        <a-entity
            link="href: https://dais-official-site.web.app/; title: Official Site;"
            position="0 .5 0"
        ></a-entity>
    </a-marker>
</a-scene>

カスタムマーカージェネレーター

カスタムマーカージェネレーターHow To Use

UPROADボタンから好きな画像アップ
DOWNROAD IMAGEからマーカー画像をダウンロードしておく（アプリでかざす対象になります）
DOWNROAD MARKERでダウンロードしたファイル名で指定する
url='./marker/<fileName>.patt'
※url指定しているのでローカルにデータを置く必要はありません。

カメラ指定

<a-entity camera look-controls wasd-controls>
    <a-entity cursor="fuse: true;"
    position="0 0 -1"
    geometry="primitive: ring; radiusInner: 0.02; radiusOuter: 0.03"
    material="color: blue; shader: flat">
    <a-animation begin="click" easing="ease-in" attribute="scale" dur="150"
        fill="forwards" from="0.1 0.1 0.1" to="1 1 1"></a-animation>
    <a-animation begin="cursor-fusing" easing="ease-in" attribute="scale" dur="1500"
        fill="backwards" from="1 1 1" to="0.1 0.1 0.1"></a-animation>
    </a-entity>
</a-entity>

全体

<!DOCTYPE html>
<head>
  <script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script>
  <script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.6.2/aframe/build/aframe-ar.js"></script>
  <script src="https://rawgit.com/gasolin/aframe-href-component/master/dist/aframe-href-component.min.js"></script>
</head>
<body style='margin: 0; overflow: hidden;'>

  <a-scene embedded arjs="debugUIEnabled:false;">
    <a-marker type='pattern' url='./marker/pattern-profile.patt'>
      <a-entity
        link="href: https://dais-official-site.web.app/; title: Official Site;"
        position="0 .5 0"
      ></a-entity>
    </a-marker>

    <a-marker type='pattern' url='./marker/pattern-tw.patt'>
      <a-entity
        link="href: https://twitter.com/dai_designing; title: Twitter;"
        position="0 .5 0"
      ></a-entity>
    </a-marker>

    <a-marker type='pattern' url='./marker/pattern-fb.patt'>
      <a-entity
        link="href: https://www.facebook.com/daisuke.mori.374; title: Facebook;"
        position="0 .5 0"
      ></a-entity>
    </a-marker>

    <a-marker type='pattern' url='./marker/pattern-qiita.patt'>
      <a-entity
        link="href: https://qiita.com/dai_designing; title: Qiita;"
        position="0 .5 0"
      ></a-entity>
    </a-marker>

    <a-marker type='pattern' url='./marker/pattern-git.patt'>
      <a-entity
        link="href: https://github.com/dai-570415; title: Git Hub;"
        position="0 .5 0"
      ></a-entity>
    </a-marker>

    <a-entity camera look-controls wasd-controls>
      <a-entity cursor="fuse: true;"
        position="0 0 -1"
        geometry="primitive: ring; radiusInner: 0.02; radiusOuter: 0.03"
        material="color: blue; shader: flat">
        <a-animation begin="click" easing="ease-in" attribute="scale" dur="150"
            fill="forwards" from="0.1 0.1 0.1" to="1 1 1"></a-animation>
        <a-animation begin="cursor-fusing" easing="ease-in" attribute="scale" dur="1500"
            fill="backwards" from="1 1 1" to="0.1 0.1 0.1"></a-animation>
      </a-entity>
    </a-entity>

    <p>更新2020.10.7 18:20</p>
  </a-scene>

</body>
</html>

ここまでできたらGithub PagesやFirebaseなどでデプロイすると動くのでやってみてください。

参考