<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>VR a-frame</title>
<script src="js/aframe.min.js"></script>
<script src="js/aframe-html-shader.min.js"></script>
<script src="js/html2canvas.min.js"></script>
<link rel="stylesheet" href="style/style.css">
</head>
<body>
<div id="loader">
<p>loading...</p>
</div>
<div id="target1" class="target">
<img src="img/piza.JPG" alt="A-Frame">
<div class="cf"><h3>シーフードピザ</h3>
<p>
シーフードピザは魚介とピザ生地がベストマッチしています！
</p>
</div>
<p class="detail">値段：</p>
</div>
<div id="target2" class="target2">
<div class="cf">
<p>おすすめニューの表示</p>
</div>
</div>
<a-scene>
<a-sky src="img/cafeteria360.jpg" rotation="0 -30 0"></a-sky>
<a-entity camera wasd-controls look-controls position="0 0 20"></a-entity>
</a-scene>
</body>
<script>
var scene = document.querySelector('a-scene');
var run = function () {
document.getElementById("loader").classList.add("hidden");
}
if (scene.hasLoaded) {
run();
} else {
scene.addEventListener('loaded', run);
}
</script>
</html>
