<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;
width: 400px;
height: 90%;
border: black solid 3px;
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="../stamp/img/1540-1024.jpg" alt="test" style="height: 150px;width: 100%; object-fit: cover;">
<hr style="width: 90%;">
<p>
これはサンプルの文章です。これはサンプルの文章です。これはサンプルの文章です。これはサンプルの文章です。これはサンプルの文章です。<br>
これはサンプルの文章です。これはサンプルの文章です。これはサンプルの文章です。これはサンプルの文章です。これはサンプルの文章です。<br>
これはサンプルの文章です。これはサンプルの文章です。これはサンプルの文章です。これはサンプルの文章です。これはサンプルの文章です。<br>
</p>
<button id="back">閉じる</button>
</div>
<a-scene>
<a-assets>
<a-asset-item id="char" src="../material/ましろ軽量版.gltf"></a-asset-item>
<a-asset-item id="charmoove" src="../material/ましろ動1.gltf"></a-asset-item>
</a-assets>
<!--<a-sphere position="0 0 -10" radius="1.25" color="blue"></a-sphere>-->
<a-sky color="#ECECEC"></a-sky>
<a-entity scale="1 1 1" position="5 0 -10"
animation="property:rotation; dur:10000; from : 0 0 0; to : 0 360 0;loop : -1 ; easing:linear;"
gltf-model="#char">
</a-entity>
<a-entity scale="1 1 1" position="-5 0 -10" gltf-model="#charmoove">
</a-entity>
<!-- <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 mashiro = document.querySelector('a-entity');
const $test = document.getElementById('test');
const $back = document.getElementById('back');
mashiro.addEventListener('click', function () {
$test.style.animeationName = "fadein"
$test.style.display = "block"
});
mashiro.addEventListener('mouseleave', function () {
$test.style.display = "none"
$test.style.animeationName = "fadeout"
});
$back.addEventListener('click', function () {
$test.style.display = "none"
})
</script>
</body>
</html>
Satou Fumiya