From ba99a7910939641cc5660faebb781ac19536d3ad Mon Sep 17 00:00:00 2001 From: "Blue (Lukas Rieger)" Date: Wed, 3 Mar 2021 17:33:07 +0100 Subject: [PATCH] Small fixes and improvements --- src/controls/ControlsManager.js | 7 ++- src/map/Map.js | 71 +++++++++++++++++------------- src/markers/Marker.js | 7 ++- src/markers/MarkerFileManager.js | 10 +++-- src/markers/MarkerSet.js | 8 +++- src/markers/ObjectMarker.js | 6 +-- src/markers/PlayerMarker.js | 29 ++++++++---- src/markers/PlayerMarkerManager.js | 1 + src/skybox/SkyFragmentShader.js | 2 +- src/util/CSS2DRenderer.js | 7 ++- 10 files changed, 97 insertions(+), 51 deletions(-) diff --git a/src/controls/ControlsManager.js b/src/controls/ControlsManager.js index 71869fd..b608aae 100644 --- a/src/controls/ControlsManager.js +++ b/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 diff --git a/src/map/Map.js b/src/map/Map.js index c807afd..75ed9cd 100644 --- a/src/map/Map.js +++ b/src/map/Map.js @@ -96,39 +96,11 @@ 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 - .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.g || this.data.skyColor.g, - worldSettings.skyColor.b || this.data.skyColor.b, - ); - this.data.ambientLight = worldSettings.ambientLight ? worldSettings.ambientLight : this.data.ambientLight; - - if (worldSettings.hires === undefined) worldSettings.hires = {}; - if (worldSettings.lowres === undefined) worldSettings.lowres = {}; - - this.data.hires = { - tileSize: {...this.data.hires.tileSize, ...worldSettings.hires.tileSize}, - scale: {...this.data.hires.scale, ...worldSettings.hires.scale}, - translate: {...this.data.hires.translate, ...worldSettings.hires.translate} - }; - this.data.lowres = { - tileSize: {...this.data.lowres.tileSize, ...worldSettings.lowres.tileSize}, - scale: {...this.data.lowres.scale, ...worldSettings.lowres.scale}, - translate: {...this.data.lowres.translate, ...worldSettings.lowres.translate} - }; - }); - return Promise.all([settingsPromise, textureFilePromise]) .then(values => { let textures = values[1]; @@ -146,6 +118,42 @@ export class Map { }); } + /** + * Loads the settings of this map + * @returns {Promise} + */ + 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 !== undefined ? worldSettings.skyColor.r : this.data.skyColor.r, + worldSettings.skyColor.g !== undefined ? worldSettings.skyColor.g : this.data.skyColor.g, + worldSettings.skyColor.b !== undefined ? worldSettings.skyColor.b : this.data.skyColor.b + ); + this.data.ambientLight = worldSettings.ambientLight ? worldSettings.ambientLight : this.data.ambientLight; + + if (worldSettings.hires === undefined) worldSettings.hires = {}; + if (worldSettings.lowres === undefined) worldSettings.lowres = {}; + + this.data.hires = { + tileSize: {...this.data.hires.tileSize, ...worldSettings.hires.tileSize}, + scale: {...this.data.hires.scale, ...worldSettings.hires.scale}, + translate: {...this.data.hires.translate, ...worldSettings.hires.translate} + }; + this.data.lowres = { + tileSize: {...this.data.lowres.tileSize, ...worldSettings.lowres.tileSize}, + scale: {...this.data.lowres.scale, ...worldSettings.lowres.scale}, + translate: {...this.data.lowres.translate, ...worldSettings.lowres.translate} + }; + + alert(this.events, `Settings for map '${this.data.id}' loaded.`, "fine"); + }); + } + onTileLoad = layer => tile => { dispatchEvent(this.events, "bluemapMapTileLoaded", { tile: tile, @@ -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, diff --git a/src/markers/Marker.js b/src/markers/Marker.js index 2524286..f1ad515 100644 --- a/src/markers/Marker.js +++ b/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() {} diff --git a/src/markers/MarkerFileManager.js b/src/markers/MarkerFileManager.js index 52a6440..c9b779a 100644 --- a/src/markers/MarkerFileManager.js +++ b/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.toggleable = !!markerSetData.toggleable; - markerSet.defaultHide = !!markerSetData.defaultHide; + markerSet.data.label = markerSetData.label || markerSetData.id; + markerSet.data.toggleable = !!markerSetData.toggleable; + markerSet.data.defaultHide = !!markerSetData.defaultHide; // update markers let updatedMarkers = new Set(); diff --git a/src/markers/MarkerSet.js b/src/markers/MarkerSet.js index a73af37..3221a7c 100644 --- a/src/markers/MarkerSet.js +++ b/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(); }); diff --git a/src/markers/ObjectMarker.js b/src/markers/ObjectMarker.js index 2070507..ab88214 100644 --- a/src/markers/ObjectMarker.js +++ b/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.newTab = !!markerData.newTab; + this.data.link = markerData.link || null; + this.data.newTab = !!markerData.newTab; } diff --git a/src/markers/PlayerMarker.js b/src/markers/PlayerMarker.js index 671f1aa..0d85bb7 100644 --- a/src/markers/PlayerMarker.js +++ b/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(`
- playerhead + playerhead
`)); @@ -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); } } \ No newline at end of file diff --git a/src/markers/PlayerMarkerManager.js b/src/markers/PlayerMarkerManager.js index cabf8e8..ac78f71 100644 --- a/src/markers/PlayerMarkerManager.js +++ b/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); } diff --git a/src/skybox/SkyFragmentShader.js b/src/skybox/SkyFragmentShader.js index be59e76..67fe9e5 100644 --- a/src/skybox/SkyFragmentShader.js +++ b/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; diff --git a/src/util/CSS2DRenderer.js b/src/util/CSS2DRenderer.js index 38011cf..214be2b 100644 --- a/src/util/CSS2DRenderer.js +++ b/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();