<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>A-Frame</title>
<link rel="stylesheet" type="text/css" href="./Panorama.css">
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
</head>
<body id="background">
<p>表示するオブジェクトの形と背景色を指定してください。</p>
<p>背景色は#〇〇〇〇〇〇の英数字六桁(カラーコード)、英文字に対応してます</p>
<form id="form1" action="#">
<p>形：<select id="shape">
<option value="a-sphere">球体 sphere</option>
<option value="a-cylinder">円柱 cylinder</option>
<option value="a-tetrahedron">四面体 tetrahedron</option>
<option value="a-box">立方体 box</option>
<option value="a-icosahedron">ポリゴン polygon</option>
</select>
色：<input type="text" id="color" placeholder="入力">
<p><input type="button" value="送信" onclick="Click()"/></p>
</form>
<a-scene id="vr" embedded>
<a-assets>
<a-asset-item id="char" src="ましろ軽量版.gltf"></a-asset-item>
</a-assets>
<a-entity
scale="1 1 1"
position="1 0 -5"
animation="property:rotation; dur:10000; from : 0 0 0; to : 0 360 0;loop : -1 ; easing:linear;"
gltf-model="#char">
</a-entity>
<a-assets>
<img id="360" src="360picture/nakamachi-360p.png">
</a-assets>
<a-sky src="360picture/nakamachi-360p.png" rotation="0 -130 0"></a-sky>
<a-camera look-controls wasd-controls position="0 0 0">
<a-entity
cursor="fuse: true; timeout:100;"
scale="0.2 0.2 0.2"
position="0 0 -1.5"
geometry="primitive: ring"
material="color: red;">
</a-entity>
</a-camera>
<a-entity id="changeObject1"><a-icosahedron id="sample-obj1" position="6 -3 8" color="tomato"></a-icosahedron></a-entity> <!-- オブジェクトの位置 -->
<a-entity id="changeObject2"><a-icosahedron position="10 2 -8" color="red"></a-icosahedron></a-entity>
<a-entity id="changeObject3"><a-icosahedron position="-25 2 -8" color="yellow"></a-icosahedron></a-entity>
<a-entity id="changeObject4"><a-sphere id="sample-obj2" position="5 1 15" color="red"></a-sphere></a-entity>
</a-scene>
<script type="text/javascript" src="Panorama.js"></script>
</body>
</html>
