<!DOCTYPE html> <html> <head> <meta charset='utf-8'> <meta http-equiv='X-UA-Compatible' content='IE=edge'> <title>GeoAR.js demo</title> <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script> <script type='text/javascript' src='../../../build/aframe-ar-nft.js'></script> </head> <body style='margin: 0; overflow: hidden;'> <a-scene vr-mode-ui="enabled: false" arjs='sourceType: webcam; videoTexture: true; debugUIEnabled: false;'> <!-- ~ 400m far --> <a-box material="color: red;" scale="5 5 5" gps-entity-place="latitude: 44.506477; longitude: 11.301524;"></a-box> <!-- ~ 20m far --> <a-image src="place.png" gps-entity-place="latitude: 44.504417; longitude: 11.301317;" ></a-image> <!-- ~ 0m far --> <a-image src="place.png" gps-entity-place="latitude: 44.504348; longitude: 11.301027;" ></a-image> <!-- 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="simulateLatitude: 44.50437; simulateLongitude: 11.30106; gpsMinDistance: 10;" > </a-camera> </a-scene> </body>