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

Author: ctrlw

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}`);

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) {

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);
     }
   },