Newer
Older
VirtualSchool / VR / Panorama.html
@sakurai fuga sakurai fuga on 11 Dec 2021 1 KB Add VR
<!DOCTYPE html>
<html lang="ja">

<head>
  <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>
  <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/R0010010.JPG">
    </a-assets>
    <a-sky src="360picture/R0010010.JPG" rotation="0 -130 0"></a-sky>
    
    <a-camera look-controls wasd-controls position="0 0 0">
<a-entity
  cursor="fuse: true; timeout:500;"
  scale="0.2 0.2 0.2"
  position="0 0 -3"
  geometry="primitive: ring"
  material="color: red;">
</a-entity>
</a-camera>
<a-sphere
id="sample-obj1"
position="-12 -5 -7"
color="red">
  </a-sphere> <!-- 看板の位置にあるオブジェクト -->
    <a-sphere position="5 1 15" color="skyblue" id="sample-obj2"></a-sphere> <!-- 建物の位置にあるオブジェクト -->
    <a-sphere position="-15 0 15" color="yellow" id="sample-obj3"></a-sphere> <!-- 向こうの道の位置にあるオブジェクト -->
  </a-scene>


  <script src="Panorama.js"></script>
</body>
</html>