<!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/fukunoya.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-plane click visible="true" id="menu" position="0 6 0" width="16" height="10" material="shader:html;target: #target1;"></a-plane>
<a-plane click id="button" @click="getdog" position="0 -2 0" width="6" height="3" material="shader:html;target: #target2;"></a-plane>
<a-sky src="img/ike.jpg" rotation="0 45 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>
