環境メモ
⭐️Mac OS Mojave バージョン10.14
⭐️iPhone7(IOS 12.1)
⭐️Blender v2.79.6
⭐️Mac Book
⭐️ブラウザ safari
実際に動かした動画↓↓↓↓
🌸WebAR🌸やってみたよぉ🤩
— non (@nonnonkapibara) 2019年3月25日
（●＾o＾●）ｖ
WebブラウザでARマーカーを読み込んでみました🏖️
（マーカー式）
くるくるしてるハートは☀️Blender☀️のアニメーション を表示。
❤️ハート❤️をTapすると🎁Qiitaページへ🌈ジャンプ‼️作ってみたよぉ#WebAR #XRMTG #XRMTG pic.twitter.com/WxJlDZckKm
基本の実装は、下記を参照する
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>