Testing Examples

MascheroniNatan · Oct 25, 2024 · 4dbdcfc · 4dbdcfc
1 parent 7797ef8
commit 4dbdcfc
Show file tree

Hide file tree

Showing 2 changed files with 79 additions and 38 deletions.
diff --git a/index.html b/index.html
@@ -1,39 +1,19 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
-    <script src="https://cdn.rawgit.com/jeromeetienne/ar.js/2.0.0/aframe/build/aframe-ar.js"></script>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
-  </head>
-  <body style="margin: 0; overflow: hidden;">
-    <a-scene embedded arjs="sourceType: webcam;">
-      <a-entity gps-new-entity-place></a-entity>
-      <a-box material="color: green;" scale="25 25 25" gps-entity-place="latitude: 45.601038; longitude: 	8.8473955;"></a-box>
-      <a-camera gps-new-camera="simulateAltitude: false; positionMinAccuracy: 600; alert: true"></a-camera>
-    </a-scene>
-
-    <script>
-      // Forza l'aggiornamento della posizione GPS
-      const camera = document.querySelector('a-camera');
-
-      // Quando la posizione GPS viene aggiornata, mostra l'alert
-      camera.addEventListener('gps-camera-update-position', function (event) {
-        console.log("Evento rilevato:", event);
-        const { latitude, longitude } = event.detail.position;
-        alert(`La tua posizione è:\nLatitudine: ${latitude}\nLongitudine: ${longitude}`);
-      });
 
-      camera.addEventListener('gps-camera-origin-coord-set', function (event) {
-        console.log("Evento rilevato:", event);
-        const { latitude, longitude } = event.detail.position;
-        alert(`La tua posizione è:\nLatitudine: ${latitude}\nLongitudine: ${longitude}`);
-      });
-
-      // Gestione degli errori
-      camera.addEventListener('gps-camera-error', function (error) {
-        console.error("Errore GPS:", error);
-      });
-
-    </script>
-  </body>
-</html>
+<html>
+    <head>
+        <title>AR.js Peakfinder (2D - no elevation)</title>
+        <script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
+        <script src="https://unpkg.com/[email protected]/dist/aframe-look-at-component.min.js"></script>
+        <script type='text/javascript' src='../../../build/aframe-ar-nft.js'></script>
+        <script type='text/javascript' src='index.js'></script>
+    </head>
+    <body>
+    <a-scene
+        vr-mode-ui="enabled: false"
+        arjs='sourceType: webcam; videoTexture: true; debugUIEnabled: false;'
+        renderer='antialias: true; alpha: true'>
+            <a-camera gps-projected-camera='simulateLatitude: 51.049; simulateLongitude: -0.723' rotation-reader></a-camera>
+            <a-entity peakfinder></a-entity>
+    </a-scene>
+    </body>
+</html>
diff --git a/index.js b/index.js
@@ -0,0 +1,61 @@
+
+AFRAME.registerComponent('peakfinder', {
+    schema: {
+        scale: {
+            type: 'number',
+            default: 10
+        }
+    },
+
+    init: function() {
+        const longitude = -0.72, latitude = 51.05, textScale = this.data.scale * 100;
+
+        // Call the Hikar API (OpenStreetMap-based) to get local POIs.
+        // Note that data is only available for Europe and Turkey.
+        fetch(`https://www.hikar.org/webapp/map?bbox=${longitude-0.1},${latitude-0.1},${longitude+0.1},${latitude+0.1}&layers=poi&outProj=4326`
+            )
+        .then(response => response.json())
+        .then(json => {
+            json.features.filter( f => f.properties.natural == 'peak')
+            .forEach( peak => {
+                    const entity = document.createElement('a-entity');
+                    entity.setAttribute('look-at', '[gps-projected-camera]');
+                    const text = document.createElement('a-text');
+                    text.setAttribute('value', peak.properties.name);
+                    text.setAttribute('scale', {
+                        x: textScale,
+                        y: textScale, 
+                        z: textScale
+                    });
+                    text.setAttribute('align', 'center');
+                    text.setAttribute('position', {
+                        x: 0,
+                        y: this.data.scale * 20, 
+                        z: 0
+                    });
+                    entity.setAttribute('gps-projected-entity-place', {
+                        latitude: peak.geometry.coordinates[1],
+                        longitude: peak.geometry.coordinates[0]
+                    });
+                    entity.appendChild(text);
+                    const cone = document.createElement('a-cone');
+                    cone.setAttribute('radiusTop', 0.1);
+                    cone.setAttribute('scale', {
+                        x: this.data.scale * 10,
+                        y: this.data.scale * 10,
+                        z: this.data.scale * 10
+                    });
+                    cone.setAttribute('height', 3);
+                    cone.setAttribute('material', { color: 'magenta' } );
+                    entity.appendChild(cone);
+                    entity.setAttribute('position', {
+                        x: 0,
+                        y: peak.geometry.coordinates[2],
+                        z: 0
+                    });
+
+                    this.el.appendChild(entity);
+            });
+        });
+    }
+});