<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.2.0/aframe.min.js"></script>
<script src="https://rawgit.com/rdub80/aframe-gui/master/dist/aframe-gui.min.js"></script>
<script src="https://rawgit.com/rdub80/aframe-gui/master/dist/aframe-gui.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>
<img id="earth" src="../material/Earth.jpeg">
<a-asset-item id="char" src="../material/ましろ軽量版.gltf"></a-asset-item>
</a-assets>
<!-- マーカーの場所に箱を置く（見やすいようにワイヤーフレーム表示） -->
<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 id="object" preset="custom" type='pattern' url='../material/pattern-AR-marker.patt'>
<a-box
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-cursor></a-cursor> -->
</a-entity>
<!-- <a-entity camera id="cameraRig">
<a-gui-cursor id="cursor"
fuse="true" fuse-timeout="1000"
design="ring"
> -->
</a-gui-cursor> <!-- /cursor -->
</a-entity>
<!-- <a-sky src="../material/Earth.jpeg"></a-sky> -->
<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" src="#earth" radios="1.25" animation="property:rotation; dur:10000; from : -90 0 0; to : -90 360 0;loop : -1 ; easing:linear;" shadow></a-sphere>';
x = 1;
console.log(x);
} else if (x === 1) {
object.innerHTML='<a-entity gltf-model="#char" radius"0.5" animation="property:rotation; dur:10000; from : -90 0 0; to : -90 360 0;loop : -1 ; easing:linear;"></a-entity>'
x = 2;
console.log(x);
} 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;
console.log(x);
}
})
let boxEl = document.querySelector('a-box');
// カーソルがぶつかったら拡大
boxEl.addEventListener('click', function () {
boxEl.setAttribute('scale', {x: 1.5, y: 1.5, z: 1.5});
});
// カーソルが離れたら元にもどす
boxEl.addEventListener('mouseleave', function () {
boxEl.setAttribute('scale', {x: 1, y: 1, z: 1});
});
</script>
</body>
</html>
Satou Fumiya