Patrick192
/
ar-navigation


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960
							<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
    <title>GeoAR.js demo</title>
    <link rel="stylesheet" href="./css/style.css">
    <script src="./js/aframe.min.js"></script>
    <script src="./js/aframe-look-at-component.min.js"></script>
    <script src="./js/aframe-curve-component.js"></script>
    <script src="./js/aframe-ar-nft.js"></script>
    <!-- <script src="./js/aframe-route-component.js"></script> -->
    <script src="./js/axios.min.js"></script>
    <script src="./js/coordtransform.js"></script>
  </head>

  <body style="margin: 0; overflow: hidden;">

    
    <!-- Camera select -->
    <div class="controls">
      <ul>
        <li>
          <button id="button">Use camera</button>
          <select id="select">
            <option></option>
          </select>
        </li>
        <li>
          Latitude: <span id="latitude"></span><br/>
          Longitude: <span id="longitude"></span><br/>
          Y-Rotation: <span id="y-rotation"></span>
        </li>
        
      </ul>
      <div id="output"></div>
    </div>

    <a-scene
      id="scene"
      vr-mode-ui="enabled: false"
      embedded
      arjs="sourceType: webcam; debugUIEnabled: false;"
    >

      <!-- <a-curve id="track1">
        <a-curve-point position="0 0 -3"></a-curve-point>
        <a-curve-point position="1 1 -3"></a-curve-point>
      </a-curve>
    
      <a-draw-curve curveref="#track1" material="shader: line; color: blue;"></a-draw-curve> -->

      <a-camera gps-camera rotation-reader> </a-camera>
    </a-scene>

    <script src="./js/app.js"></script>
    <script src="./js/camera-select.js"></script>
  </body>
</html>