From 760368eaa2adae49809674ca153a215296f63f28 Mon Sep 17 00:00:00 2001 From: "Blue (Lukas Rieger)" Date: Tue, 9 Mar 2021 12:57:35 +0100 Subject: [PATCH] More tweaks --- src/MapViewer.js | 41 ++++++++++++++++--- src/controls/freeflight/FreeFlightControls.js | 4 +- .../freeflight/keyboard/KeyHeightControls.js | 1 + src/controls/map/MapControls.js | 2 +- src/map/TileManager.js | 7 +++- src/markers/HtmlMarker.js | 2 +- src/markers/MarkerManager.js | 18 ++++---- src/markers/ObjectMarker.js | 10 +++-- src/markers/PoiMarker.js | 13 +++--- src/util/CSS2DRenderer.js | 14 ++++++- 10 files changed, 84 insertions(+), 28 deletions(-) diff --git a/src/MapViewer.js b/src/MapViewer.js index f69cecd..14a491e 100644 --- a/src/MapViewer.js +++ b/src/MapViewer.js @@ -176,21 +176,44 @@ export class MapViewer { // check Object3D interactions let intersects = this.raycaster.intersectObjects([this.map.hiresTileManager.scene, this.map.lowresTileManager.scene, this.markers], true); + let hit = null; + let lowresHit = null; + let hiresHit = null; let covered = false; for (let i = 0; i < intersects.length; i++) { if (intersects[i].object){ let object = intersects[i].object; - if (object.visible) { + // check if deeply-visible + let parent = object; + let visible = parent.visible; + while (visible && parent.parent){ + parent = parent.parent; + visible = parent.visible; + } + + if (visible) { + if (!hit) hit = intersects[i]; + + // find root-scene + let parentRoot = object; + while(parentRoot.parent) parentRoot = parentRoot.parent; + + if (parentRoot === this.map.lowresTileManager.scene) { + if (!lowresHit) lowresHit = intersects[i]; + } + + if (parentRoot === this.map.hiresTileManager.scene) { + if (!hiresHit) hiresHit = intersects[i]; + } + if (!covered || (object.material && !object.material.depthTest)) { - if (object.onClick({ + if (object.onClick && object.onClick({ data: data, intersection: intersects[i] })) return; } - let parentRoot = object; - while(parentRoot.parent) parentRoot = parentRoot.parent; if (parentRoot !== this.map.lowresTileManager.scene) { covered = true; } @@ -201,7 +224,11 @@ export class MapViewer { // fire event dispatchEvent(this.events, "bluemapMapInteraction", { data: data, - intersections: intersects + hit: hit, + hiresHit: hiresHit, + lowresHit: lowresHit, + intersections: intersects, + ray: this.raycaster.ray }); } } @@ -285,6 +312,10 @@ export class MapViewer { if (this.map && this.map.isMap) { return map.load(HIRES_VERTEX_SHADER, HIRES_FRAGMENT_SHADER, LOWRES_VERTEX_SHADER, LOWRES_FRAGMENT_SHADER, this.data.uniforms) .then(() => { + for (let texture of this.map.loadedTextures){ + this.renderer.initTexture(texture); + } + this.data.uniforms.skyColor.value = map.data.skyColor; this.data.uniforms.ambientLight.value = map.data.ambientLight; this.data.uniforms.hiresTileMap.value.map = map.hiresTileManager.tileMap.texture; diff --git a/src/controls/freeflight/FreeFlightControls.js b/src/controls/freeflight/FreeFlightControls.js index 80c0881..eadc9f6 100644 --- a/src/controls/freeflight/FreeFlightControls.js +++ b/src/controls/freeflight/FreeFlightControls.js @@ -142,8 +142,8 @@ export class FreeFlightControls { } onMouseUp = evt => { - if (this.clickStart.x !== evt.x) return; - if (this.clickStart.y !== evt.y) return; + if (Math.abs(this.clickStart.x - evt.x) > 5) return; + if (Math.abs(this.clickStart.y - evt.y) > 5) return; this.target.requestPointerLock(); } diff --git a/src/controls/freeflight/keyboard/KeyHeightControls.js b/src/controls/freeflight/keyboard/KeyHeightControls.js index 349425f..7b4ea6c 100644 --- a/src/controls/freeflight/keyboard/KeyHeightControls.js +++ b/src/controls/freeflight/keyboard/KeyHeightControls.js @@ -35,6 +35,7 @@ export class KeyHeightControls { ], DOWN: [ new KeyCombination("ShiftLeft"), + new KeyCombination("ShiftRight"), new KeyCombination("PageDown") ], } diff --git a/src/controls/map/MapControls.js b/src/controls/map/MapControls.js index b205d43..1b2ee24 100644 --- a/src/controls/map/MapControls.js +++ b/src/controls/map/MapControls.js @@ -244,7 +244,7 @@ export class MapControls { } initializeHammer() { - let touchTap = new Tap({ event: 'tap', pointers: 1, taps: 1, threshold: 2 }); + let touchTap = new Tap({ event: 'tap', pointers: 1, taps: 1, threshold: 5 }); let touchMove = new Pan({ event: 'move', pointers: 1, direction: DIRECTION_ALL, threshold: 0 }); let touchTilt = new Pan({ event: 'tilt', pointers: 2, direction: DIRECTION_VERTICAL, threshold: 0 }); let touchRotate = new Rotate({ event: 'rotate', pointers: 2, threshold: 0 }); diff --git a/src/map/TileManager.js b/src/map/TileManager.js index 545463c..ad23d31 100644 --- a/src/map/TileManager.js +++ b/src/map/TileManager.js @@ -74,10 +74,15 @@ export class TileManager { loadAroundTile(x, z, viewDistanceX, viewDistanceZ) { this.unloaded = false; + let unloadTiles = false; + if (this.viewDistanceX > viewDistanceX || this.viewDistanceZ > viewDistanceZ) { + unloadTiles = true; + } + this.viewDistanceX = viewDistanceX; this.viewDistanceZ = viewDistanceZ; - if (this.centerTile.x !== x || this.centerTile.y !== z) { + if (unloadTiles || this.centerTile.x !== x || this.centerTile.y !== z) { this.centerTile.set(x, z); this.removeFarTiles(); diff --git a/src/markers/HtmlMarker.js b/src/markers/HtmlMarker.js index ae347a5..e8b2899 100644 --- a/src/markers/HtmlMarker.js +++ b/src/markers/HtmlMarker.js @@ -82,7 +82,7 @@ export class HtmlMarker extends Marker { * @returns {Element} */ get element() { - return this.elementObject.element; + return this.elementObject.element.getElementsByTagName("div")[0]; } /** diff --git a/src/markers/MarkerManager.js b/src/markers/MarkerManager.js index 634da54..c2a1a2a 100644 --- a/src/markers/MarkerManager.js +++ b/src/markers/MarkerManager.js @@ -59,12 +59,17 @@ export class MarkerManager { * @param ms - interval in milliseconds */ setAutoUpdateInterval(ms) { - if (this._updateInterval) clearInterval(this._updateInterval); + if (this._updateInterval) clearTimeout(this._updateInterval); if (ms > 0) { let autoUpdate = () => { - this.update().finally(() => { - this._updateInterval = setTimeout(autoUpdate, ms); - }); + this.update() + .then(() => { + this._updateInterval = setTimeout(autoUpdate, ms); + }) + .catch(e => { + alert(this.events, e, "warning"); + this._updateInterval = setTimeout(autoUpdate, Math.max(ms, 1000 * 15)); + }); }; this._updateInterval = setTimeout(autoUpdate, ms); @@ -77,10 +82,7 @@ export class MarkerManager { */ update() { return this.loadMarkerFile() - .then(markerFileData => this.updateFromData(markerFileData)) - .catch(error => { - alert(this.events, error, "warning"); - }); + .then(markerFileData => this.updateFromData(markerFileData)); } /** diff --git a/src/markers/ObjectMarker.js b/src/markers/ObjectMarker.js index ab88214..dc28d69 100644 --- a/src/markers/ObjectMarker.js +++ b/src/markers/ObjectMarker.js @@ -38,6 +38,7 @@ export class ObjectMarker extends Marker { this.data.type = "object"; this.data.label = null; + this.data.detail = null; this.data.link = null; this.data.newTab = true; } @@ -49,8 +50,8 @@ export class ObjectMarker extends Marker { pos.sub(this.position); } - if (this.data.label) { - let popup = new LabelPopup(this.data.label); + if (this.data.detail || this.data.label) { + let popup = new LabelPopup(this.data.detail || this.data.label); popup.position.copy(pos); this.add(popup); popup.open(); @@ -67,6 +68,7 @@ export class ObjectMarker extends Marker { * @param markerData {{ * position: {x: number, y: number, z: number}, * label: string, + * detail: string, * link: string, * newTab: boolean * }} @@ -82,10 +84,12 @@ export class ObjectMarker extends Marker { // update label this.data.label = markerData.label || null; + //update detail + this.data.detail = markerData.detail || null; + // update link this.data.link = markerData.link || null; this.data.newTab = !!markerData.newTab; - } } diff --git a/src/markers/PoiMarker.js b/src/markers/PoiMarker.js index 12cb79b..f2925ca 100644 --- a/src/markers/PoiMarker.js +++ b/src/markers/PoiMarker.js @@ -43,7 +43,7 @@ export class PoiMarker extends HtmlMarker { } onClick(event) { - if (this.highlight) return; + if (this.highlight || !this.data.label) return true; this.highlight = true; let eventHandler = evt => { @@ -102,12 +102,15 @@ export class PoiMarker extends HtmlMarker { // update anchor let anch = markerData.anchor || markerData.iconAnchor || {}; //"iconAnchor" for backwards compatibility - this.anchor.setX(anch.x || 0); - this.anchor.setY(anch.y || 0); + this.iconElement.style.transform = `translate(${-anch.x}px, ${-anch.y}px)`; + //this.anchor.setX(anch.x || 0); + //this.anchor.setY(anch.y || 0); + // update label - if (this.labelElement.innerHTML !== markerData.label){ - this.labelElement.innerHTML = markerData.label || ""; + if (this.data.label !== markerData.label){ + this.data.label = markerData.label || ""; + this.labelElement.innerHTML = this.data.label || ""; } // update icon diff --git a/src/util/CSS2DRenderer.js b/src/util/CSS2DRenderer.js index 214be2b..d394cbc 100644 --- a/src/util/CSS2DRenderer.js +++ b/src/util/CSS2DRenderer.js @@ -38,8 +38,18 @@ var CSS2DObject = function ( element ) { } ); - this.element.addEventListener("click", event => this.onClick(event)); - this.element.addEventListener("touch", event => this.onClick(event)); + this.element.addEventListener("click", event => { + if (this.onClick(event)) { + event.preventDefault(); + event.stopPropagation(); + } + }); + this.element.addEventListener("touch", event => { + if (this.onClick(event)) { + event.preventDefault(); + event.stopPropagation(); + } + }); };