Newer
Older
VirtualSchool / VR / Panorama.html
<!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>

<p>表示するオブジェクトの形を指定してください。</p>
<form id="form1" action="#">
<p>形:<select id="shape">
  <option value="a-sphere">球体</option>
  <option value="a-tetrahedron">四面体</option>
  <option value="a-box">立方体</option>
  <option value="a-icosahederon">正二十面体</option>
</select> 
<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="changeObject"><a-icosahederon id="sample-obj1" position="6 -3 8" color="tomato"></a-icosahederon><a-entity> <!-- オブジェクトの位置 -->
<a-icosahederon position="10 2 -8" color="red"></a-icosahederon>
<a-icosahederon position="-25 2 -8" color="yellow"></a-icosahederon>
</a-scene>

 <script type="text/javascript" src="Panorama.js"></script>
</body>

</html>