<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,
maximum-scale=1.0, minimum-scale=1.0, user-scalable=no,
target-densityDpi=device-dpi" />
<!--
patternRatio: https://liginc.co.jp/457071
-->
<title>A-Frame+AR.js で複数マーカーsample</title>
<style type="text/css">
<!--
.btnlist {position: fixed; top: 30vh; left: 2em; width: 99vw;
text-align: center;}
.btnlist button {border: 1px solid black; background: white; font-size: 300%;}
.notfound {display: none;} //button用 最初は隠しておく
-->
</style>
</head>
<body style="margin: 0px; overflow:hidden;">
<!-- A-Frame ライブラリの読み込み -->
<script src="https://aframe.io/releases/1.6.0/aframe.min.js"></script>
<!-- AR.js ライブラリの読み込み -->
<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>
<script type="text/javascript" src="link-all.js?v=6"></script>
<!-- A-Frame の VR空間に AR.js を紐づける(デバッグUIを非表示) -->
<a-scene embedded arjs="debugUIEnabled:false;" vr-mode-ui="enabled: false">
<a-entity camera cursor="fuse: false; rayOrigin: mouse;"></a-entity>
<!-- ここに var markers で設定したマーカ+画像が入る -->
</a-scene>
<p class="btnlist">
<!-- ここに画像に対応するリンクボタンが入る.
canvas内の座標は想定通り取れないため重ねたbutton要素でリンクに飛ばす.
-->
</p>
<p id="log"></p>
</body>
</html>
HIROSE Yuuji