Newer
Older
AegisforEcosystem / next / AR.js-3.4.0 / aframe / examples / location-based / avoid-shaking / index.html
@KAOKA Daisuke KAOKA Daisuke on 31 May 2022 1 KB into AR.js
<!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>