Small fixes and improvements

src/controls/ControlsManager.js

@@ -147,8 +147,13 @@ export class ControlsManager {
 		if (this.mapViewer.map) {
 			let triggerDistance = 1;
 			if (valueChanged) {
-				triggerDistance = this.mapViewer.loadedLowresViewDistance * 0.5;
+				if (this.distance > 300) {
+					triggerDistance = this.mapViewer.data.loadedLowresViewDistance * 0.5;
+				} else {
+					triggerDistance = this.mapViewer.data.loadedHiresViewDistance * 0.5;
 				}
+			}
+
 			if (
 				Math.abs(this.lastMapUpdatePosition.x - this.position.x) >= triggerDistance ||
 				Math.abs(this.lastMapUpdatePosition.z - this.position.z) >= triggerDistance

src/map/Map.js

@@ -96,21 +96,43 @@ export class Map {
 	load(hiresVertexShader, hiresFragmentShader, lowresVertexShader, lowresFragmentShader, uniforms) {
 		this.unload()
 
-		let settingsFilePromise = this.loadSettingsFile();
+		let settingsPromise = this.loadSettings();
 		let textureFilePromise = this.loadTexturesFile();
 
 		this.lowresMaterial = this.createLowresMaterial(lowresVertexShader, lowresFragmentShader, uniforms);
 
-		let settingsPromise = settingsFilePromise
+		return Promise.all([settingsPromise, textureFilePromise])
+            .then(values => {
+                let textures = values[1];
+                if (textures === null) throw new Error("Failed to parse textures.json!");
+
+                this.hiresMaterial = this.createHiresMaterial(hiresVertexShader, hiresFragmentShader, uniforms, textures);
+
+                this.hiresTileManager = new TileManager(new Scene(), new TileLoader(`${this.data.dataUrl}hires/`, this.hiresMaterial, this.data.hires), this.onTileLoad("hires"), this.onTileUnload("hires"), this.events);
+                this.lowresTileManager = new TileManager(new Scene(), new TileLoader(`${this.data.dataUrl}lowres/`, this.lowresMaterial, this.data.lowres), this.onTileLoad("lowres"), this.onTileUnload("lowres"), this.events);
+
+                this.hiresTileManager.scene.autoUpdate = false;
+                this.lowresTileManager.scene.autoUpdate = false;
+
+                alert(this.events, `Map '${this.data.id}' is loaded.`, "fine");
+            });
+	}
+
+	/**
+	 * Loads the settings of this map
+	 * @returns {Promise<void>}
+	 */
+	loadSettings() {
+		return this.loadSettingsFile()
 			.then(worldSettings => {
 				this.data.name = worldSettings.name ? worldSettings.name : this.data.name;
 				this.data.world = worldSettings.world ? worldSettings.world : this.data.world;
 
 				this.data.startPos = {...this.data.startPos, ...worldSettings.startPos};
 				this.data.skyColor.setRGB(
-					worldSettings.skyColor.r || this.data.skyColor.r,
+					worldSettings.skyColor.r !== undefined ? worldSettings.skyColor.r : this.data.skyColor.r,
-					worldSettings.skyColor.g || this.data.skyColor.g,
+					worldSettings.skyColor.g !== undefined ? worldSettings.skyColor.g : this.data.skyColor.g,
-					worldSettings.skyColor.b || this.data.skyColor.b,
+					worldSettings.skyColor.b !== undefined ? worldSettings.skyColor.b : this.data.skyColor.b
 				);
 				this.data.ambientLight = worldSettings.ambientLight ? worldSettings.ambientLight : this.data.ambientLight;
 
@@ -127,22 +149,8 @@ export class Map {
 					scale: {...this.data.lowres.scale, ...worldSettings.lowres.scale},
 					translate: {...this.data.lowres.translate, ...worldSettings.lowres.translate}
 				};
-			});
 
-		return Promise.all([settingsPromise, textureFilePromise])
+				alert(this.events, `Settings for map '${this.data.id}' loaded.`, "fine");
-            .then(values => {
-                let textures = values[1];
-                if (textures === null) throw new Error("Failed to parse textures.json!");
-
-                this.hiresMaterial = this.createHiresMaterial(hiresVertexShader, hiresFragmentShader, uniforms, textures);
-
-                this.hiresTileManager = new TileManager(new Scene(), new TileLoader(`${this.data.dataUrl}hires/`, this.hiresMaterial, this.data.hires), this.onTileLoad("hires"), this.onTileUnload("hires"), this.events);
-                this.lowresTileManager = new TileManager(new Scene(), new TileLoader(`${this.data.dataUrl}lowres/`, this.lowresMaterial, this.data.lowres), this.onTileLoad("lowres"), this.onTileUnload("lowres"), this.events);
-
-                this.hiresTileManager.scene.autoUpdate = false;
-                this.lowresTileManager.scene.autoUpdate = false;
-
-                alert(this.events, `Map '${this.data.id}' is loaded.`, "fine");
 			});
 	}
 
@@ -198,7 +206,7 @@ export class Map {
                     if (settings.maps && settings.maps[this.data.id]) {
                         resolve(settings.maps[this.data.id]);
                     } else {
-                        reject(`the settings.json does not contain informations for map: ${this.data.id}`);
+                        reject(`the settings.json does not contain information for map: ${this.data.id}`);
                     }
                 },
                 () => {},
@@ -268,7 +276,8 @@ export class Map {
 					textureImage: {
 						type: 't',
 						value: texture
-					}
+					},
+					transparent: { value: transparent }
 				},
 				vertexShader: vertexShader,
 				fragmentShader: fragmentShader,

src/markers/Marker.js

@@ -36,7 +36,8 @@ export class Marker extends Object3D {
         this.data = {
             id: markerId,
             type: "marker",
-            position: this.position
+            position: this.position,
+            visible: this.visible
         };
 
         // redirect parent properties
@@ -44,6 +45,10 @@ export class Marker extends Object3D {
             get() { return this.data.position },
             set(value) { this.data.position = value }
         });
+        Object.defineProperty(this, "visible", {
+            get() { return this.data.visible },
+            set(value) { this.data.visible = value }
+        });
     }
 
     dispose() {}

src/markers/MarkerFileManager.js

@@ -88,12 +88,16 @@ export class MarkerFileManager extends MarkerManager {
         if (!markerSet) {
             markerSet = new MarkerSet(markerSetData.id);
             this.addMarkerSet(markerSet);
+
+            if (markerSetData.defaultHide) {
+                markerSet.visible = false;
+            }
         }
 
         // update set info
-        markerSet.label = markerSetData.label || markerSetData.id;
+        markerSet.data.label = markerSetData.label || markerSetData.id;
-        markerSet.toggleable = !!markerSetData.toggleable;
+        markerSet.data.toggleable = !!markerSetData.toggleable;
-        markerSet.defaultHide = !!markerSetData.defaultHide;
+        markerSet.data.defaultHide = !!markerSetData.defaultHide;
 
         // update markers
         let updatedMarkers = new Set();

src/markers/MarkerSet.js

@@ -40,7 +40,13 @@ export class MarkerSet extends Scene {
             defaultHide: false,
             markerSets: [],
             markers: [],
+            visible: this.visible,
         };
+
+        Object.defineProperty(this, "visible", {
+            get() { return this.data.visible },
+            set(value) { this.data.visible = value }
+        });
     }
 
     add(...object) {
@@ -74,8 +80,6 @@ export class MarkerSet extends Scene {
     }
 
     dispose() {
-        super.dispose();
-
         this.children.forEach(child => {
             if (child.dispose) child.dispose();
         });

src/markers/ObjectMarker.js

@@ -80,11 +80,11 @@ export class ObjectMarker extends Marker {
         this.position.setZ(pos.z || 0);
 
         // update label
-        this.label = markerData.label || null;
+        this.data.label = markerData.label || null;
 
         // update link
-        this.link = markerData.link || null;
+        this.data.link = markerData.link || null;
-        this.newTab = !!markerData.newTab;
+        this.data.newTab = !!markerData.newTab;
 
     }
 

src/markers/PlayerMarker.js

@@ -37,11 +37,12 @@ export class PlayerMarker extends Marker {
         Object.defineProperty(this, 'isPlayerMarker', {value: true});
         this.data.type = "player";
 
-        this.playerUuid = playerUuid;
+        this.data.playerUuid = playerUuid;
+        this.data.name = playerUuid;
 
         this.elementObject = new CSS2DObject(htmlToElement(`
 <div id="bm-marker-${this.data.id}" class="bm-marker-${this.data.type}">
-    <img src="assets/playerheads/${this.playerUuid}.png" alt="playerhead" draggable="false">
+    <img src="assets/playerheads/${this.data.playerUuid}.png" alt="playerhead" draggable="false">
     <div class="bm-player-name"></div>
 </div>
         `));
@@ -55,7 +56,7 @@ export class PlayerMarker extends Marker {
         });
 
         this.playerHeadElement.addEventListener('error', () => {
-            this.playerHeadElement.src = "assets/playerheads/steve.png";
+            this.playerHeadElement.src = "assets/steve.png";
         }, {once: true});
 
         this.add(this.elementObject);
@@ -65,11 +66,21 @@ export class PlayerMarker extends Marker {
      * @returns {Element}
      */
     get element() {
-        return this.elementObject.element;
+        return this.elementObject.element.getElementsByTagName("div")[0];
     }
 
     onBeforeRender(renderer, scene, camera) {
-        this.element.setAttribute("distance-data", Marker.calculateDistanceToCameraPlane(this.position, camera).toString());
+        let distance = Marker.calculateDistanceToCameraPlane(this.position, camera);
+
+        let value = "near";
+        if (distance > 1000) {
+            value = "med";
+        }
+        if (distance > 5000) {
+            value = "far";
+        }
+
+        this.element.setAttribute("distance-data", value);
     }
 
     /**
@@ -103,7 +114,7 @@ export class PlayerMarker extends Marker {
             }
             let deltaPos = {
                 x: (pos.x || 0) - startPos.x,
-                y: (pos.y || 0) - startPos.y,
+                y: ((pos.y || 0) + 1.8) - startPos.y,
                 z: (pos.z || 0) - startPos.z,
             }
             if (deltaPos.x || deltaPos.y || deltaPos.z) {
@@ -119,7 +130,8 @@ export class PlayerMarker extends Marker {
         }
 
         // update name
-        let name = markerData.name || this.playerUuid;
+        let name = markerData.name || this.data.playerUuid;
+        this.data.name = name;
         if (this.playerNameElement.innerHTML !== name)
             this.playerNameElement.innerHTML = name;
 
@@ -128,7 +140,8 @@ export class PlayerMarker extends Marker {
     dispose() {
         super.dispose();
 
-        if (this.element.parentNode) this.element.parentNode.removeChild(this.element);
+        let element = this.elementObject.element;
+        if (element.parentNode) element.parentNode.removeChild(element);
     }
 
 }

src/markers/PlayerMarkerManager.js

@@ -116,6 +116,7 @@ export class PlayerMarkerManager extends MarkerManager {
 
         if (!playerMarkerSet) {
             playerMarkerSet = new MarkerSet("bm-players");
+            playerMarkerSet.data.label = "Players";
             this.addMarkerSet(playerMarkerSet);
         }
 

src/skybox/SkyFragmentShader.js

@@ -33,7 +33,7 @@ void main() {
 	float horizonWidth = 0.005;
 	float horizonHeight = 0.0;
 	
-	vec4 color = vec4(skyColor * max(sunlightStrength, ambientLight), 1.0);
+	vec4 color = vec4(skyColor * max(sunlightStrength * sunlightStrength, ambientLight), 1.0);
 	float voidMultiplier = (clamp(vPosition.y - horizonHeight, -horizonWidth, horizonWidth) + horizonWidth) / (horizonWidth * 2.0);
 	color.rgb *= voidMultiplier;
 

src/util/CSS2DRenderer.js

@@ -9,12 +9,17 @@ import {
     Object3D, Vector2,
     Vector3
 } from "three";
+import {htmlToElement} from "./Utils";
 
 var CSS2DObject = function ( element ) {
 
     Object3D.call( this );
 
-    this.element = element;
+    this.element = document.createElement("div");
+    let parent = element.parentNode;
+    parent.replaceChild(this.element, element);
+    this.element.appendChild(element);
+
     this.element.style.position = 'absolute';
 
     this.anchor = new Vector2();