Improve player-follow controls and smooth scrolling

BlueMapCore/src/main/webroot/js/libs/BlueMap.js

@@ -206,18 +206,16 @@ export default class BlueMap {
 				this.controls.direction = this.controls.targetDirection;
 				this.controls.distance = this.controls.targetDistance;
 				this.controls.angle = this.controls.targetAngle;
-				this.controls.targetPosition.y = this.controls.minHeight;
 				this.controls.position.copy(this.controls.targetPosition);
 			}
 		}
 		if (hashVars.length >= 7){
 			let height = parseInt(hashVars[6]);
 			if (!isNaN(height)){
-				this.controls.minHeight = height;
-				this.controls.targetPosition.y = height;
+				this.controls.terrainHeight = height;
 
 				if (!smooth) {
-					this.controls.position.copy(this.controls.targetPosition);
+					if (this.controls.position.y < this.controls.terrainHeight) this.controls.position.y = this.controls.terrainHeight;
 				}
 			}
 		}
@@ -257,7 +255,7 @@ export default class BlueMap {
 				+ ':' + Math.round(this.controls.targetDirection * 100) / 100
 				+ ':' + Math.round(this.controls.targetDistance * 100) / 100
 				+ ':' + Math.ceil(this.controls.targetAngle * 100) / 100
-				+ ':' + Math.floor(this.controls.targetPosition.y);
+				+ ':' + Math.floor(this.controls.terrainHeight);
 		// only update hash when changed
 		if (window.location.hash !== this.locationHash) {
 			history.replaceState(undefined, undefined, this.locationHash);

BlueMapCore/src/main/webroot/js/libs/Controls.js

@@ -79,7 +79,7 @@ export default class Controls {
 		this.camera = camera;
 		this.element = element;
 		this.heightScene = heightScene;
-		this.minHeight = 0;
+		this.terrainHeight = 70;
 
 		this.raycaster = new Raycaster();
 		this.rayDirection = new Vector3(0, -1, 0);
@@ -159,8 +159,8 @@ export default class Controls {
 	}
 
 	resetPosition() {
-		this.position = new Vector3(0, 70, 0);
-		this.targetPosition = new Vector3(0, 70, 0);
+		this.position = new Vector3(0, 0, 0);
+		this.targetPosition = new Vector3(0, 0, 0);
 
 		this.distance = 5000;
 		this.targetDistance = 1000;
@@ -177,13 +177,10 @@ export default class Controls {
 
 		let changed = false;
 
-		let zoomLerp = (this.distance - 100) / 200;
-		if (zoomLerp < 0) zoomLerp = 0;
-		if (zoomLerp > 1) zoomLerp = 1;
-		this.targetPosition.y = 300 * zoomLerp + this.minHeight * (1 - zoomLerp);
+		let targetY = Math.max(this.targetPosition.y, this.terrainHeight);
 
 		this.position.x += (this.targetPosition.x - this.position.x) * this.settings.move.smooth;
-		this.position.y += (this.targetPosition.y - this.position.y) * this.settings.move.smoothY;
+		this.position.y += (targetY - this.position.y) * this.settings.move.smoothY;
 		this.position.z += (this.targetPosition.z - this.position.z) * this.settings.move.smooth;
 
 		this.distance += (this.targetDistance - this.distance) * this.settings.zoom.smooth;
@@ -241,7 +238,7 @@ export default class Controls {
 			let intersects = this.raycaster.intersectObjects(tileChildren(this.targetPosition));
 
 			if (intersects.length > 0) {
-				this.minHeight = intersects[0].point.y;
+				this.terrainHeight = intersects[0].point.y;
 			}
 		} catch (ignore){}
 
@@ -251,8 +248,8 @@ export default class Controls {
 			this.raycaster.set(rayStart, this.rayDirection);
 			let intersects = this.raycaster.intersectObjects(tileChildren(this.camera.position));
 			if (intersects.length > 0) {
-				if (intersects[0].point.y > this.minHeight) {
-					this.minHeight = intersects[0].point.y;
+				if (intersects[0].point.y > this.terrainHeight) {
+					this.terrainHeight = intersects[0].point.y;
 				}
 			}
 		} catch (ignore){}

BlueMapCore/src/main/webroot/js/libs/hud/PlayerMarker.js

@@ -62,8 +62,7 @@ export default class PlayerMarker extends Marker {
 			}
 
 			if (this.follow){
-				this.blueMap.controls.targetPosition.x = this.position.x;
-				this.blueMap.controls.targetPosition.z = this.position.z;
+				this.blueMap.controls.targetPosition.copy(this.position);
 			}
 		}
 	};
@@ -97,14 +96,14 @@ export default class PlayerMarker extends Marker {
 		this.follow = true;
 		this.iconElement.addClass("following");
 
-		this.blueMap.controls.targetPosition.x = this.position.x;
-		this.blueMap.controls.targetPosition.z = this.position.z;
+		this.blueMap.controls.targetPosition.copy(this.position);
 	};
 
-	onStopFollowing = event => {
-		if(this.follow) {
+	onStopFollowing = e => {
+		if (e.type !== "mousedown" || e.button === 0) {
 			this.follow = false;
 			this.iconElement.removeClass("following");
+			this.blueMap.controls.targetPosition.y = 0;
 		}
 	};
 

BlueMapCore/src/main/webroot/js/libs/hud/PlayerMarkerSet.js

@@ -42,8 +42,11 @@ export default class PlayerMarkerSet {
 			);
 		}).then((liveData) => {
 			this.updateWith(liveData)
-		}).catch((e) => {
-			console.error("Failed to update player-markers!", e);
+		}).catch(() => {
+			this.marker.forEach(marker => {
+				marker.online = false;
+				marker.setVisible(false);
+			});
 		});
 	}