WebAR(AR.js)特定のページへジャンプする方法 #WebAR

環境メモ
⭐️Mac OS Mojave バージョン10.14
⭐️iPhone7(IOS 12.1)
⭐️Blender v2.79.6
⭐️Mac Book
⭐️ブラウザ　safari

実際に動かした動画↓↓↓↓

🌸WebAR🌸やってみたよぉ🤩
（●＾o＾●）ｖ
WebブラウザでARマーカーを読み込んでみました🏖️
（マーカー式）
くるくるしてるハートは☀️Blender☀️のアニメーションを表示。
❤️ハート❤️をTapすると🎁Qiitaページへ🌈ジャンプ‼️作ってみたよぉ#WebAR #XRMTG #XRMTG pic.twitter.com/WxJlDZckKm
— non (@nonnonkapibara) 2019年3月25日

基本の実装は、下記を参照する
WebAR(AR.js)を実装してみた
https://qiita.com/nonkapibara/items/fd70842c59059f0dfd97

１.イベントのライブラリを入れる

<script src="https://rawgit.com/nicolocarpignoli/nicolocarpignoli.github.io/master/ar-click-events/events.js"></script>

2.BOXにリンク（href）を入れてみた（Qiitaページに飛ばしてみた）

<a-box position="0 0.5 0" wireframe="true" link="href: https://qiita.com/nonkapibara; title: nonkapibara; image: #heart"></a-box>

3.クルクル回るハートに、リンク（href）を入れてみた（Qiitaページに飛ばしてみた）

      <a-entity gltf-model="#heart" scale="0.5 0.5 0.5" position="0 1.8 0" rotation="0 0 0"
         link="href: https://qiita.com/nonkapibara; title: nonkapibara; image: #heart"
         animation-mixer="loop:repeat">
      </a-entity>

リンクのプロパティが載っています
https://aframe.io/docs/0.9.0/components/link.html

index.htmlの内容

<!doctype HTML>
<html>
<!-- A-Frame ライブラリの読み込み -->
<script src="https://aframe.io/releases/0.9.0/aframe.min.js"></script>
<!-- AR.js ライブラリの読み込み -->
<script src="https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js"></script>
<!-- glTFに含まれたアニメーションを再生するためにaframe-extrasをロード -->
<script src="https://cdn.rawgit.com/donmccurdy/aframe-extras/v6.0.0/dist/aframe-extras.min.js"></script>
<!-- events.js ライブラリの読み込み -->
<script src="https://rawgit.com/nicolocarpignoli/nicolocarpignoli.github.io/master/ar-click-events/events.js"></script>
<body style='margin : 0px; overflow: hidden;'>
<a-scene embedded arjs="debugUIEnabled:false;" renderer="gammaOutput: true;" vr-mode-ui="enabled: false">
      <a-assets>
          <a-asset-item id="heart" src="non/MaruHert.glb"></a-asset-item>
      </a-assets>
    <!-- a-markerのtypeにpatternを設定, 作ったpattファイルをurlにを指定 -->
    <a-marker preset="custom" type="pattern" url="non/pattern-marker.patt">
      <!-- マーカーの場所にCubeをセットする(ワイヤーフレーム表示） -->
      <a-box position="0 0.5 0" wireframe="true" link="href: https://qiita.com/nonkapibara; title: nonkapibara; image: #heart"></a-box>
      <a-entity gltf-model="#heart" scale="0.5 0.5 0.5" position="0 1.8 0" rotation="0 0 0"
         link="href: https://qiita.com/nonkapibara; title: nonkapibara; image: #heart"
         animation-mixer="loop:repeat">
      </a-entity>
    </a-marker>
    <a-light type="ambient" color="#ffffff"></a-light>
    <a-light type="point" intensity="2" position="0 0 0"></a-light>
   <a-entity camera>
     <!-- cursor: trueにすると時間になったら自動でリンク先に飛ぶ-->
     <a-entity cursor="fuse: false; fuseTimeout: 500">
   </a-entity>
</a-scene>
</body>
</html>