fix: Load additional map data when moving head or rig

Flapping (in VR or via button) changes the rig position, while other controls changed the head So far we tracked the rig and wouldn't load additional data when moving e.g. with wasd controls Tracking the head's world position now works with both ways
ctrlw · Jun 29, 2024 · a937972 · a937972
1 parent eecb765
commit a937972
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 13 deletions.
diff --git a/index.html b/index.html
@@ -83,8 +83,8 @@ <h1>osm4vr</h1>
       <a-entity id="rightHand" laser-controls="hand: right" wing log2hud="target: rhud"></a-entity>
     </a-entity>
 
-    <a-entity osm-tiles="lat: 49.16; lon: 10.163; trackId: rig" rotation="-90 0 0" shadow="receive: true"></a-entity>
-    <a-entity osm-geojson="lat: 49.16; lon: 10.163; radius_m: 500; src: #json-world; trackId: rig"></a-entity>
+    <a-entity osm-tiles="lat: 49.16; lon: 10.163; trackId: head" rotation="-90 0 0" shadow="receive: true"></a-entity>
+    <a-entity osm-geojson="lat: 49.16; lon: 10.163; radius_m: 500; src: #json-world; trackId: head"></a-entity>
   </a-scene>
 
   <!-- Some javascript to interact with the scene and its contents -->
@@ -112,6 +112,7 @@ <h1>osm4vr</h1>
 
     // set user position to origin
     document.getElementById('rig').object3D.position.set(0, 0, 0);
+    document.getElementById('head').object3D.position.set(0, 0, 0);
 
     let tiles = document.querySelector('a-entity[osm-tiles]');
     tiles.setAttribute('osm-tiles', `lat: ${lat}; lon: ${lon}`);

diff --git a/osm-geojson.js b/osm-geojson.js
@@ -46,14 +46,9 @@ AFRAME.registerComponent('osm-geojson', {
     this.onSrcLoaded = this.onSrcLoaded.bind(this);
   },
 
-  tick: function () {
-    if (this.trackPosition) {
-      this.loadTilesAround(this.trackPosition);
-    }
-  },
-
   update: function (oldData) {
     if (this.data !== oldData) {
+      this.trackElement = null;
       this.trackPosition = null;
       // reset the layer
       this.el.innerHTML = '';
@@ -72,13 +67,22 @@ AFRAME.registerComponent('osm-geojson', {
       // if trackId attribute is given, keep track of the element's position
       if (this.data.trackId) {
         let element = document.getElementById(this.data.trackId);
-        if (element && element.object3D && element.object3D.position) {
-          this.trackPosition = element.object3D.position;
+        if (element && element.object3D) {
+          this.trackElement = element;
+          this.trackPosition = new THREE.Vector3();
         }
       }
     }
   },
 
+  tick: function () {
+    if (this.trackElement) {
+      // use world position to support movement of both head and rig
+      this.trackElement.object3D.getWorldPosition(this.trackPosition);
+      this.loadTilesAround(this.trackPosition);
+    }
+  },
+
   onSrcLoaded: function (text) {
     let json = JSON.parse(text);
     if (this.data.lat == 0 && this.data.lon == 0) {

diff --git a/osm-tiles.js b/osm-tiles.js
@@ -52,6 +52,7 @@ AFRAME.registerComponent('osm-tiles', {
   // recreate the tiles layer
   update: function (oldData) {
     if (this.data !== oldData) {
+      this.trackElement = null;
       this.trackPosition = null;
       // reset the layer
       this.el.innerHTML = '';
@@ -64,15 +65,18 @@ AFRAME.registerComponent('osm-tiles', {
       // if trackId attribute is given, keep track of the element's position
       if (this.data.trackId) {
         let element = document.getElementById(this.data.trackId);
-        if (element && element.object3D && element.object3D.position) {
-          this.trackPosition = element.object3D.position;
+        if (element && element.object3D) {
+          this.trackElement = element;
+          this.trackPosition = new THREE.Vector3();
         }
       }
     }
   },
 
   tick: function () {
-    if (this.trackPosition) {
+    if (this.trackElement) {
+      // use world position to support movement of both head and rig
+      this.trackElement.object3D.getWorldPosition(this.trackPosition);
       this.loadTilesAround(this.trackPosition);
     }
   },