Location based AR testing

PrettyHeatToast · Apr 1, 2024 · a44bbb2 · a44bbb2
1 parent 8effc0f
commit a44bbb2
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 1 deletion.
diff --git a/index.html b/index.html
@@ -14,8 +14,11 @@ <h1>XR-Tools</h1>
         <p>AR Toepassing om reliëfvormen in te oefenen. Werkt met trackers 0 tot en met 11, toont op elke tracker een ander landschap.</p>
         <li><a href="interactievekaart.html">AR: Interactieve kaart</a></li>
         <p>AR Toepassing om verschillende kaartlagen te combineren. Werkt met tracker 0 om de basiskaart te tonen, tracker 1 om gemeentes te tonen en tracker 2 om Gent te tonen.</p>
-        <li><a href="https://www.thinglink.com/scene/1828459471664317093">VR: Excursie Dok Noord</a></li>
+        <li><a href="https://www.thinglink.com/card/1829802914579743588">VR: Excursie Dok Noord</a></li>
         <p>VR-Excursie rond Dok Noord</p>
+        <li><a href="locatieAR.html">AR: Locatie gebaseerde AR</a></li>
+        <p>Eerste poging om locatiegebaseerde AR te doen.</p>
+
     </ul>
 </body>
 

diff --git a/locatieAR.html b/locatieAR.html
@@ -0,0 +1,28 @@
+<!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/0.9.2/aframe.min.js'></script>
+    <script src="https://raw.githack.com/jeromeetienne/AR.js/master/aframe/build/aframe-ar.min.js"></script>
+    <script src="https://raw.githack.com/donmccurdy/aframe-extras/master/dist/aframe-extras.loaders.min.js"></script>
+    <script>
+        THREEx.ArToolkitContext.baseURL = 'https://raw.githack.com/jeromeetienne/ar.js/master/three.js/'
+    </script>
+</head>
+
+<body style='margin: 0; overflow: hidden;'>
+    <a-scene vr-mode-ui="enabled: false" embedded
+        arjs='sourceType: webcam; sourceWidth:1280; sourceHeight:960; displayWidth: 1280; displayHeight: 960; debugUIEnabled: false;'>
+
+        <a-assets>
+            <a-asset-item id="hoogtekaart1" src="models/hoogtekaarten/hoogtekaart-namen.gltf"></a-asset-item>
+        </a-assets>
+
+        <a-entity gltf-model=#hoogtekaart1 rotation="0 0 0" scale="0.015 0.015 0.015"
+            gps-entity-place="longitude: 3.708050; latitude: 51.041960;" animation-mixer />
+        <a-camera gps-camera rotation-reader></a-camera>
+    </a-scene>
+</body>