<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>AR-location_based</title>
<!-- A-Frameと、AR.jsのA-FrameバージョンのJavaScriptを読み込みます。 -->
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://unpkg.com/aframe-look-at-component@0.8.0/dist/aframe-look-at-component.min.js"></script>
<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar-nft.js"></script>
<script src="https://cdn.rawgit.com/donmccurdy/aframe-extras/v4.2.0/dist/aframe-extras.min.js"></script>
<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.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>
<!-- <script type="text/javascript" src = "AR-location_based.js" defer="defer"></script> -->
<!-- <link rel="stylesheet" href="AR-location_based.css"> -->
</head>
<style>
html{
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
body{
margin: 0;
padding: 0;
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
div.test{
padding: 0;
position: absolute;
height: 90%;
width: 90%;
border: black solid 3px;
background: rgb(red, green, blue, 0.7);
z-index: 1;
display: none;
animation-name:fadein ;
animation-duration: 1s;
}
img{
height: 150px;
width: 100%;
object-fit: cover;
}
@keyframes fadein{
from{
opacity: 0;
}
to{
opacity: 1;
}
}
/*
#guide{
width:80%;
border: solid black 3px;
background:rgb(255, 255, 255, 0.5);
display: none;
position: fixed;
bottom: 20%;
left: 50%;
transform: translate(-50%, -20%);
}
#btn{
color: white;
text-align: center;
position: fixed;
display:block;
left: 45%;
bottom: 5%;
transform: translate(-5%, -50%);
background: rgb(0, 0, 0, 0.2);
border: solid white 2px;
border-radius: 50%;
width: 50px;
height: 50px;
font-size: large;
}
#btn:hover{
color: black;
background: rgb(255, 255, 255, 0.8);
border: black;
transition: .4s;
} */
</style>
<body>
<a-scene
vr-mode-ui="enabled: false"
embedded
gps-camera-debug
arjs="sourceType: webcam; debugUIEnabled: false;"
embedded arjs="debugUIEnabled:false;"
>
<!-- look-at属性に[gps-camera]を指定することで、ARコンテンツが常にカメラの方を向きます。-->
<!-- <a-entity id="myCursor" cursor="fuse: true; fuseTimeout: 1000" position="0 0 -1" geometry="primitive: ring" scale="0.03 0.03 0.03" material="color: blue; shader: flat">
<a-animation begin="cursor-fusing" easing="ease-in" attribute="scale" fill="none" from="0.03 0.03 0.03" to="0.001 0.001 0.001"></a-animation>
</a-entity> -->
<a-assets>
<a-asset-item id="mi" src="../material/map-icon.gltf"></a-asset-item>
</a-assets>
<!-- gps-entity-place="latitude:38.889536; longitude:139.854075;" -->
<!-- gps-entity-place="latitude:38.892830794824704; longitude:139.8192693775776;" -->
<a-entity
gps-entity-place="latitude:38.88797919175386; longitude:139.86019761777922;"
look-at="[gps-camera]"
scale = "1 1 1"
potion="0 3 0"
animation="property:rotation; dur:10000; from : 0 0 0; to : 0 360 0;loop : -1 ; easing:linear;"
gltf-model="#mi">
</a-entity>
<!-- GPS情報を利用するためa-cameraにgps-cameraを追加します。
加えて、回転イベントを処理するためにrotation-readerも追加します。 -->
<!-- <a-entity camera>
<a-camera gps-camera="minDistance:5; maxDistance:100;" rotation-reader>
<a-cursor></a-cursor>
</a-camera>
</a-entity> -->
<a-entity camera>
<a-camera gps-camera="minDistance:5; maxDistance:100;" rotation-reader>
<a-gui-cursor id="cursor"
fuse="true" fuse-timeout="1000"
design="ring"
>
</a-gui-cursor>
</a-camera>
</a-entity>
</a-scene>
<div class="test" id="test">
<img src="大山公園.jpg" alt="test" style="height: 150px;width: 100%; object-fit: cover;">
<hr style="width: 90%;">
<p>おはよう</p>
<button id="back">閉じる</button>
</div>
<!-- <div id="guide">
<img src="" alt="">
テキストテキストテキストテキストテキストテキスト<br/>
テキストテキストテキストテキストテキストテキスト
</div>
<button type="button" id="btn">?</button> -->
<script>
// const btn = document.getElementById('btn');
// const guide = document.getElementById('guide');
// let flag = true;
// btn.addEventListener('click', (e) =>{
// document.querySelector("#guide").style.display = flag ? "block" : "none";
// flag = !flag;
// });
// window.addEventListener('load', () => {
// const el = document.querySelector('[gps-entity-place]');
// console.log(el);
// el.addEventListener('gps-entity-place-update-positon', (event) => {
// if(event.detail.distance < 10) {
// el.setAttribute('material','color: red');
// guide.setAttribute('display:block');
// } else {
// el.setAttribute('material','color: white');
// guide.setAttribute('display:none');
// }
// });
// });
const boxEl = document.querySelector('a-entity');
const $test = document.getElementById('test');
const $back = document.getElementById('back');
boxEl.addEventListener('click', function () {
$test.style.animeationName = "fadein"
$test.style.display = "block"
});
$back.addEventListener('click', function() {
$test.style.display = "none"
})
</script>
</body>
</html>
Satou Fumiya