<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!-- <meta name="viewport" content="width=device-width"> -->
<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>
<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: 100px;
width: 100px;
list-style: none;
position: absolute;
}
li.list1{
position: absolute;
top:5%
}
li.list2{
position: absolute;
top:25%;
}
li.list3{
position: absolute;
top:45%;
}
li.list4{
position: absolute;
top: 65%;
}
button.MainButton{
-webkit-appearance: none;
margin-top: 20px;
margin-left: 20px;
width: 100px;
height: 50px;
position: absolute;
z-index: 1;
opacity: 0;
display: block;
animation-duration: 2s;
background-color: white;
}
div.content{
padding: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 90%;
width: 400px;
border: black solid 3px;
background-color: white;
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>
</head>
<body>
<li class="list1"><button class="MainButton" id="test0">施設紹介</button></li>
<li class="list2"><button class="MainButton" id="test1">PV</button></li>
<li class="list3"><button class="MainButton" id="test2">クイズ</button></li>
<li class="list4"><button class="MainButton" id="test3">戻る</button></li>
<div class="content" id="test">
<img src="../stamp/img/1540-1024.jpg" alt="仮の画像" style="height: 150px;width: 100%; object-fit: cover;">
<hr style="width: 90%;">
<h1>松ヶ岡開墾場</h1>
<button class="backbtn" id="back">閉じる</button>
</div>
<a-scene
vr-mode-ui="enabled: false"
embedded
gps-camera-debug
arjs="sourceType: webcam; debugUIEnabled: false;"
>
<!-- オリジナルオブジェクトの読み込みとID付与 -->
<a-assets>
<a-asset-item id="mi" src="../material/map-icon.gltf"></a-asset-item>
</a-assets>
<!-- オブジェクトの設定（どこに置くか、どんな動きをつけるかなど） -->
<!-- gps-entity-place="latitude:38.89407664214214; longitude:139.8191280322508;" -->
<a-entity
gps-entity-place="latitude:38.89284370397445; longitude:139.81938850113664;"
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 camera position="0 0 0">
<a-camera gps-camera="minDistance:5; maxDistance:1000;" rotation-reader>
<a-gui-cursor id="cursor"
fuse="true" fuse-timeout="1000"
design="ring"
>
</a-gui-cursor>
</a-camera>
</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);
console.log($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++;
}
console.log($test);
});
$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[2].addEventListener('click', function () {
window.open('https://www.yatex.org/gitbucket/SKIP/reroad-test/pages/2020-Silk-Reroad/samplepage.html');
});
$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