<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="ましろ軽量版.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>