<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>AR-marker_based</A-marker_based></title>
<!-- 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>
<style>
#btn{
color: white;
text-align: center;
position: fixed;
left: 45%;
bottom: 5%;
transform: translate(-5%, -50%);
background: rgba(0, 0, 0, 0.2);
border: solid white 2px;
/* border-bottom: black; */
border-radius: 50%;
width: 50px;
height: 50px;
font-size: large;
}
#btn:active{
color: black;
background: rgba(255, 255, 255, 0.8);
border: black;
}
.guide{
/* display: none; */
text-align: center ;
z-index: 1000;
font-size: 40px;
color: white;
/* animation-name: fadeIn; */
animation: fadeIn 1s ease 1s 1 normal ;
@keyframes fadeIn {
0%{
opacity: 0;
}
100%{
opacity: 1;
}
}
}
</style>
</head>
<body style="margin:0px; overflow:hidden;">
<!-- A-Frame の VR空間に AR.js を紐づける（デバッグUIを非表示） -->
<a-scene embedded arjs="debugUIEnabled:false;">
<a-assets>
<a-asset-item id="mi" src="map-icon.gltf"></a-asset-item>
<a-asset-item id="osaru" src="osaru.gltf"></a-asset-item>
</a-assets>
<!-- マーカーを登録（プリセットされている「hiro」マーカー） -->
<a-marker preset="hiro">
<!-- マーカーの場所に箱を置く（見やすいようにワイヤーフレーム表示） -->
<a-entity
position="0 0.5 0"
animation="property:rotation; dur:10000; from : 0 0 0; to : 0 360 0;loop : -1 ; easing:linear;"
gltf-model="#mi">
</a-entity>
</a-marker>
<a-marker preset="custom" type='pattern' url='./pattern-QR_691451.patt'>
<a-box
id="object"
position="0 0.5 0"
wireframe="true"
animation="property:rotation; dur:10000; from : 0 0 0; to : 0 360 0;loop : -1 ; easing:linear;">
</a-box>
</a-marker>
<!-- AR用のカメラを置く -->
<a-entity camera></a-entity>
<p class="guide">QRコードを写してね</p>
</a-scene>
<button type="button" id="btn">?</button>
<script>
const object = document.getElementById('object');
const btn = document.getElementById('btn');
let x=0;
btn.addEventListener('click',(e) => {
if (x === 0 ){
object.innerHTML = '<a-sphere id="object" radios="1.25" color="#EF2D5E"></a-sphere>';
x = 1;
} else if (x === 1) {
object.innerHTML='<a-entity id="objcet" animation="property:rotation; dur:10000; from : 0 0 0; to : 0 360 0;loop : -1 ; easing:linear;"gltf-model="osaru"></a-entity>'
x = 2;
} else if(x === 2){
object.innerHTML = '<a-box id="object"position="0 0.5 0" wireframe="true" animation="property:rotation; dur:10000; from : 0 0 0; to : 0 360 0;loop : -1 ; easing:linear;"></a-box>'
x = 0;
}
})
</script>
</body>
</html>
