05_location/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
    <script src="../assets/aframe/aframe-v1.2.0.min.js"></script>
    <script src="../assets/arjs/aframe-ar-nft.js"></script>
    <!-- <script src="https://raw.githack.com/donmccurdy/aframe-extras/master/dist/aframe-extras.loaders.min.js"></script> -->
</head>
<body>
    <a-scene
        vr-mode-ui="enabled: false"
		embedded
		arjs='sourceType: webcam; debugUIEnabled: false;'>
    <a-assets timeout="3000">
        <img id="marker-image" src="../assets/images/marker.png">
      </a-assets>

        <!-- ~ 400m far -->
        <a-image src="#marker-image" gps-entity-place="latitude: 44.506477; longitude: 11.301524;"></a-image>

        <!-- ~ 20m far -->
        <a-image src="#marker-image" gps-entity-place="latitude: 44.504417; longitude: 11.301317;"></a-image>

        <!-- ~ 0m far -->
        <a-box material="color: green;" scale="0.2 0.2 0.2" gps-entity-place="latitude: 52.41370414414457; longitude: 13.05037016153857;"></a-box>
        
        <a-box
          color="red"
          depth="0.25"
          height="0.25"
          width="0.25"
          position="0 1 0"
          rotation="45 0 0"
          gps-entity-place="latitude: 44.504348; longitude: 11.301027;"
          ></a-box>

        <!-- look-at="[gps-camera]" -->

        <!-- using gpsMinDistance: 5 => update GPS only if user moves by 5 meters or more => avoid shaking for near objects -->
        <!-- using accelerationToMove: 1.0 => 'smooth' inertial sensors precision precision in order to avoid distant places shaking -->
        
        <a-camera
            rotation-reader
            gps-camera="gpsMinDistance: 10;"
        >
		</a-camera>
	</a-scene>
</body>
</html>