<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;
flex-direction: column;
justify-content: space-around;
}
li{
height: 100%;
list-style: none;
}
button.MainButton{
-webkit-appearance: none;
margin-top: 20px;
margin-left: 20px;
width: 50px;
height: 50px;
position: relative;
z-index: 1000;
opacity: 0;
display: block;
animation-duration: 2s;
}
div.content{
padding: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 90%;
width: 90%;
border: black solid 3px;
background: rgb(red, green, blue, 0.7);
z-index: 1;
display: none;
animation-name: fade;
animation-duration: 2s;
}
h1{
font-size: 20px;
text-align: center;
}
img{
height: 150px;
width: 100%;
object-fit: cover;
}
button.backbtn{
position: absolute;
bottom: 10%;
left: 50%;
transform: translate(-50%, -10%);
width: 100px;
height: 50px;
}
@keyframes fadein {
from {
opacity: 0;
transform: translateX(-100px);
}to {
opacity: 1;
transform: translateX(0);
}}
@keyframes fadeout {
from {
opacity: 1;
transform: translateX(0);
}to {
opacity: 0;
transform: translateX(-100px);
}}
@keyframes fade{
from{
opacity: 0;
}
to{
opacity: 1;
}}
</style>
<body>
<li><button class="MainButton" id="test0">a</button></li>
<li><button class="MainButton" id="test1">i</button></li>
<li><button class="MainButton" id="test2">u</button></li>
<li><button class="MainButton" id="test3">e</button></li>
<div class="content" id="test">
<img src="../material/大山公園.jpg" alt=" style="height: 150px;width: 100%; object-fit: cover;">
<hr style="width: 90%;">
<h1>大山公園</h1>
<button id="backbtn">閉じる</button>
</div>
<a-scene
vr-mode-ui="enabled: false"
embedded
gps-camera-debug
arjs="sourceType: webcam; debugUIEnabled: false;"
embedded arjs="debugUIEnabled:false;"
>
<a-assets>
<a-asset-item id="mi" src="../material/map-icon.gltf"></a-asset-item>
</a-assets>
<a-entity
gps-entity-place="latitude:38.88771269144013; longitude:139.86037427557187;"
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>
<a-entity position="0 30 0">
<a-entity camera>
<a-camera gps-camera="minDistance:5; maxDistance:100;" rotation-reader look-controls wasd-controls position="0 0 0">
<a-gui-cursor id="cursor"
fuse="true" fuse-timeout="1000"
design="ring"
>
</a-gui-cursor>
</a-camera>
</a-entity>
</a-entity>
</a-scene>
<script type="text/javascript">
const boxEl = document.querySelector('a-entity');
const $content = document.getElementById('test');
const $back = document.getElementById('back');
let $test = [], i=0;
while (i < 4) {
$test[i]= document.getElementById('test'+ i);
i++;
}
boxEl.addEventListener('click', function () {
let x=0;
while (x < 4){
$test[x].style.animationName = "fadein";
$test[x].style.opacity="1";
$test[x].style.display="block";
x++;
}
});
$back.addEventListener('click',function () {
let x=0;
while (x < 4){
$content.style.display = "none"
$test[x].style.animationName = "fadein";
$test[x].style.opacity="1";
// $test[x].style.display="block";
x++;
}
})
$test[0].addEventListener('click',function () {
$content.style.animeationName = "fade";
$content.style.display = "block";
let x=0;
while (x < 4) {
$test[x].style.animationName = "fadeout";
$test[x].style.opacity="0";
x++;
}
});
$test[3].addEventListener('click', function () {
let x = 0;
while (x < 4) {
$test[x].style.animationName = "fadeout";
$test[x].style.opacity="0";
x++;
}
});
</script>
</body>
</html>
Satou Fumiya