GEO location tracking

In bovenstaand beeld is locatie van de gps camera gesimuleerd AR in fullscreen met simulatie van camerapositie

Met muis en pijltjestoets kan je de gps camera draaien en verplaatsen

Augmented reality met GEO location tracking. terug naar de inleiding

De schets maakt naast de aframe lib ook gebruik van "aframe-ar-nft.min" lib (regel 9) van

Nicolò Carpignoli en 10 deelnemers zie het github kanaal Ga ook naar de website van Nicolò

Ik maak hier gebruik van aframe-ar-nft.js (nft = natural feature tracking) ipv aframe-ar.min omdat je dan

mbv de NFT marker creator markers van gebouwen kan maken

Bovendien worden bij gebruik van aframe-ar-nft.js de storende alerts niet getoond

In A Frame kan je ook 3d gltf bestanden, net als in Three.js laden

Door het gebruik van de animation component (regel 29) roteren de bogen in y richting rond de alien

De coordinaten invullen

dit kan met Google Maps of Open streetmap zie de website LatLong

De latitude en longitude staan voor Google Maps in de URL

 
<!doctype html>
<html>
    <head>
        <meta charset="utf-8"/>
        <meta name="AR op GEO locatie" content="afbeeldingen"/>
        <script src="../lib/aframe-v1.2.0.min.js"></script>
        <script src="../lib/aframe-look-at-component.min.js"></script>
        <script src="../lib/aframe-ar-nft.js"></script>
    </head>
 
    <body style="margin: 0; overflow: hidden;">
        <a-scene
            embedded
            loading-screen="enabled: false;" vr-mode-ui="enabled: false;"
            arjs="sourceType: webcam; debugUIEnabled: false;">
                <a-image
                    src="../assets/alien.png"
                    look-at="[gps-camera]"
                    scale="10.5 10.5 1.5"
                    gps-entity-place="latitude: 52.333650; longitude: 5.240020;"
                ></a-image>
                <a-image
                    src="../assets/bogen.png"
                    look-at="[gps-camera]"
                    scale="10.5 10.5 2.5"
                    position="0 0 0"
                    rotation="0 0 0"
                    animation="property: rotation; to: 0 360 0; loop: true; dur: 10000"
                    gps-entity-place="latitude: 52.333650; longitude: 5.240020;"
                ></a-image>
                <a-image
                    src="../assets/abox.png"
                    look-at="[gps-camera]"
                    scale="15.5 15.5 2.5"
                    gps-entity-place="latitude: 52.333650; longitude: 5.240620;"
                ></a-image>
                <a-image
                    src="../assets/bezier.png"
                    look-at="[gps-camera]"
                    scale="20.5 20.5 2.5"
                    gps-entity-place="latitude: 52.333850; longitude: 5.241220;"
                ></a-image>
                  <a-camera gps-camera rotation-reader></a-camera>
        </a-scene>
    </body>
</html>

Flevopink