<!DOCTYPE html>
<html>
  <head>
    <title>360ยบ VR - 03 - Multiple</title>
    <script src="https://aframe.io/releases/1.4.1/aframe.min.js"></script>
    <script src="https://unpkg.com/aframe-webcentric-component/dist/aframe-webcentric-component.min.js"></script>
  </head>
  <body>
    <a-scene webcentric >
      <a-assets>
        <img
          id="classroomPhoto"
          src="https://cdn.glitch.com/80978ab7-9db6-45ae-bc43-4fab16bdbb6e%2FR0010059.JPG?v=1525432731662"
        />
        <img
          id="outsidePhoto-1"
          src="https://cdn.glitch.com/80978ab7-9db6-45ae-bc43-4fab16bdbb6e%2FR0010060.JPG?v=1589484405070"
        />
        <img
          id="outsidePhoto-2"
          src="https://cdn.glitch.com/80978ab7-9db6-45ae-bc43-4fab16bdbb6e%2FR0010085.JPG?v=1589484383929"
        />
      </a-assets>


      <!-- Classroom -->
      <a-entity id="classroom" position="0 0 0">
        <a-sky src="#classroomPhoto"> </a-sky>
      </a-entity>


      <!-- Corridor outside classroom -->
      <a-entity id="outside1" position="1000 0 0">
        <a-sky src="#outsidePhoto-1"> </a-sky>
      </a-entity>

      <!-- Corridor  further away -->
      <a-entity id="outside2" position="2000 0 0">
        <a-sky src="#outsidePhoto-2"> </a-sky>
      </a-entity>

      <a-entity id="cameraRig">
        <a-camera id="camera" wasd-controls-enabled="false">
          <a-cursor></a-cursor
        ></a-camera>
      </a-entity>
    </a-scene>
  </body>
</html>