<html>
<head>
<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>
<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: 2s;
}
img{
height: 150px;
width: 100%;
object-fit: cover;
}
@keyframes fadein{
from{
opacity: 0;
}
to{
opacity: 1;
}
}
</style>
</head>
<body>
<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>
<a-scene>
<a-sphere position="0 0 -10" radius="1.25" color="blue"></a-sphere>
<a-sky color="#ECECEC"></a-sky>
<a-entity position="0 1.6 0">
<a-camera look-controls wasd-controls position="0 0 0">
<a-gui-cursor id="cursor"
fuse="true" fuse-timeout="1000"
debusign="ring"
>
</a-camera>
</a-gui-cursor>
</a-entity>
</a-scene>
<script type="text/javascript">
const boxEl = document.querySelector('a-sphere');
const $test = document.getElementById('test');
const $back = document.getElementById('back');
boxEl.addEventListener('click', function () {
$test.style.animeationName = "fadein"
$test.style.display = "block"
});
boxEl.addEventListener('mouseleave', function () {
$test.style.display = "none"
$test.style.animeationName = "fadeout"
});
$back.addEventListener('click', function() {
$test.style.display = "none"
})
</script>
</body>
</html>
Satou Fumiya