Add capabillity to use -follow players- in first-person mode. Closes: #175

BlueMapCommon/webapp/src/js/controls/freeflight/FreeFlightControls.js

@@ -23,7 +23,7 @@
  * THE SOFTWARE.
  */
 
-import {MathUtils, Vector2} from "three";
+import {MathUtils, Vector2, Vector3} from "three";
 import {Manager, Pan, DIRECTION_ALL} from "hammerjs";
 import {animate, EasingFunctions} from "../../util/Utils";
 import {KeyMoveControls} from "./keyboard/KeyMoveControls";
@@ -32,9 +32,12 @@ import {MouseAngleControls} from "./mouse/MouseAngleControls";
 import {KeyHeightControls} from "./keyboard/KeyHeightControls";
 import {TouchPanControls} from "./touch/TouchPanControls";
 import {reactive} from "vue";
+import {DEG2RAD} from "three/src/math/MathUtils";
 
 export class FreeFlightControls {
 
+    static _beforeMoveTemp = new Vector3();
+
     /**
      * @param target {Element}
      */
@@ -43,7 +46,7 @@ export class FreeFlightControls {
         this.manager = null;
 
         this.data = reactive({
-
+            followingPlayer: null
         });
 
         this.hammer = new Manager(this.target);
@@ -99,12 +102,32 @@ export class FreeFlightControls {
      * @param map {Map}
      */
     update(delta, map) {
+        FreeFlightControls._beforeMoveTemp.copy(this.manager.position);
+        let beforeMoveRot = this.manager.rotation;
+        let beforeMoveAngle = this.manager.angle;
+
         this.keyMove.update(delta, map);
         this.keyHeight.update(delta, map);
         this.mouseRotate.update(delta, map);
         this.mouseAngle.update(delta, map);
         this.touchPan.update(delta, map);
 
+        // if moved, stop following the marker and give back control
+        if (this.data.followingPlayer && (
+            !FreeFlightControls._beforeMoveTemp.equals(this.manager.position) ||
+            beforeMoveRot !== this.manager.rotation ||
+            beforeMoveAngle !== this.manager.angle
+        )) {
+            this.stopFollowingPlayerMarker();
+        }
+
+        // follow player marker
+        if (this.data.followingPlayer) {
+            this.manager.position.copy(this.data.followingPlayer.position);
+            this.manager.rotation = (this.data.followingPlayer.rotation.yaw - 180) * DEG2RAD;
+            this.manager.angle = -(this.data.followingPlayer.rotation.pitch - 90) * DEG2RAD;
+        }
+
         this.manager.angle = MathUtils.clamp(this.manager.angle, 0, Math.PI);
         this.manager.distance = 0;
         this.manager.ortho = 0;
@@ -133,6 +156,19 @@ export class FreeFlightControls {
             });
     }
 
+    /**
+     * @param marker {object}
+     */
+    followPlayerMarker(marker) {
+        if (marker.isPlayerMarker) marker = marker.data;
+        this.data.followingPlayer = marker;
+        this.keyMove.deltaPosition.set(0, 0);
+    }
+
+    stopFollowingPlayerMarker() {
+        this.data.followingPlayer = null;
+    }
+
     onWheel = evt => {
         evt.preventDefault();
 

BlueMapCommon/webapp/src/js/markers/PlayerMarker.js

@@ -41,6 +41,10 @@ export class PlayerMarker extends Marker {
         this.data.playerUuid = playerUuid;
         this.data.name = playerUuid;
         this.data.playerHead = playerHead;
+        this.data.rotation = {
+            pitch: 0,
+            yaw: 0
+        };
 
         this.elementObject = new CSS2DObject(htmlToElement(`
 <div id="bm-marker-${this.data.id}" class="bm-marker-${this.data.type}">
@@ -102,24 +106,34 @@ export class PlayerMarker extends Marker {
 
         // animate position update
         let pos = markerData.position || {};
+        let rot = markerData.rotation || {};
         if (!this.position.x && !this.position.y && !this.position.z) {
             this.position.set(
                 pos.x || 0,
                 (pos.y || 0) + 1.8,
                 pos.z || 0
             );
+            this.data.rotation.pitch = rot.pitch || 0;
+            this.data.rotation.yaw = rot.yaw || 0;
         } else {
             let startPos = {
                 x: this.position.x,
                 y: this.position.y,
                 z: this.position.z,
+                pitch: this.data.rotation.pitch,
+                yaw: this.data.rotation.yaw,
             }
             let deltaPos = {
                 x: (pos.x || 0) - startPos.x,
                 y: ((pos.y || 0) + 1.8) - startPos.y,
                 z: (pos.z || 0) - startPos.z,
+                pitch: (rot.pitch || 0) - startPos.pitch,
+                yaw: (rot.yaw || 0) - startPos.yaw
             }
-            if (deltaPos.x || deltaPos.y || deltaPos.z) {
+            while (deltaPos.yaw > 180) deltaPos.yaw -= 360;
+            while (deltaPos.yaw < -180) deltaPos.yaw += 360;
+
+            if (deltaPos.x || deltaPos.y || deltaPos.z || deltaPos.pitch || deltaPos.yaw) {
                 animate(progress => {
                     let ease = EasingFunctions.easeInOutCubic(progress);
                     this.position.set(
@@ -127,7 +141,9 @@ export class PlayerMarker extends Marker {
                         startPos.y + deltaPos.y * ease || 0,
                         startPos.z + deltaPos.z * ease || 0
                     );
-                }, 500);
+                    this.data.rotation.pitch = startPos.pitch + deltaPos.pitch * ease || 0;
+                    this.data.rotation.yaw = startPos.yaw + deltaPos.yaw * ease || 0;
+                }, 1000);
             }
         }
 

BlueMapCommon/webapp/vite.config.js

@@ -21,13 +21,13 @@ export default defineConfig({
     server: {
         proxy: {
             '/settings.json': {
-                //target: 'http://localhost:8100',
-                target: 'https://bluecolored.de/bluemap',
+                target: 'http://localhost:8100',
+                //target: 'https://bluecolored.de/bluemap',
                 changeOrigin: true,
             },
             '/maps': {
-                //target: 'http://localhost:8100',
-                target: 'https://bluecolored.de/bluemap',
+                target: 'http://localhost:8100',
+                //target: 'https://bluecolored.de/bluemap',
                 changeOrigin: true,
             }
         }