<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>A-Frame で超簡単 AR</title>
</head>
<body style="margin: 0px; overflow:hidden;">
<!-- A-Frame ライブラリの読み込み -->
<script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
<!-- AR.js ライブラリの読み込み -->
<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>
<!-- A-Frame の VR空間に AR.js を紐づける(デバッグUIを非表示) -->
<a-scene embedded arjs="debugUIEnabled:false;">
<!-- マーカーを登録(プリセットされている「hiro」マーカー) -->
<a-marker preset="custom" type="pattern" url='pattern-koryo.patt' id="koryomark">
<!-- マーカーの場所に箱を置く(見やすいようにワイヤーフレーム表示) -->
<a-box position="0 0.10 -0.50" wireframe="true"></a-box>
</a-marker>
<!-- AR用のカメラを置く -->
<a-entity camera></a-entity>
</a-scene>
<script type="text/javascript" src="event.js" charset="utf-8">
document.addEventListener("DOMContentLoaded", (e) => {
document.getElementById("koryomark").addEventListener("markerFound",
(e) => {
alert("光陵高校だぜわーいわーい!!!");
});
});
</script>
</body>
</html>
