<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>
body{
margin: 0;
padding: 0;
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
justify-content: space-around;
}
li{
height: 100%;
list-style: none;
position: absolute;
z-index: 1;
}
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: 50px;
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 style="margin:0px; overflow:hidden;">
<li class="list1"><button class="MainButton" id="test0">a</button></li>
<li class="list2"><button class="MainButton" id="test1">i</button></li>
<li class="list3"><button class="MainButton" id="test2">u</button></li>
<li class="list4"><button class="MainButton" id="test3">e</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-Frame の VR空間に AR.js を紐づける（デバッグUIを非表示） -->
<a-scene embedded arjs="debugUIEnabled:false;">
<a-assets>
<a-asset-item id="mi" src="../material/map-icon.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 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>
<a-entity camera id="cameraRig">
<a-gui-cursor id="cursor"
fuse="true" fuse-timeout="1000"
design="ring"
>
</a-gui-cursor>
</a-entity>
</a-scene>
<script>
const boxEl = document.querySelector('a-box');
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[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