Complete implementing markers on the web-client

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

@@ -281,8 +281,8 @@ export default class BlueMap {
 		this.renderer.render(this.skyboxScene, this.skyboxCamera);
 		this.renderer.clearDepth();
 		this.renderer.render(this.lowresScene, this.camera);
+		this.renderer.clearDepth();
 		if (this.camera.position.y < 400) {
-			this.renderer.clearDepth();
 			this.renderer.render(this.hiresScene, this.camera);
 		}
 		this.renderer.render(this.shapeScene, this.camera);
@@ -336,7 +336,7 @@ export default class BlueMap {
 		this.renderer = new WebGLRenderer({
 			alpha: true,
 			antialias: true,
-			sortObjects: false,
+			sortObjects: true,
 			preserveDrawingBuffer: true,
 			logarithmicDepthBuffer: false,
 		});

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

@@ -63,8 +63,20 @@ export default class HudInfo {
 		this.rayPosition.y = - ( event.pos.y / this.blueMap.element.offsetHeight ) * 2 + 1;
 
 		this.raycaster.setFromCamera(this.rayPosition, this.blueMap.camera);
+
+		//check markers first
+		let intersects = this.raycaster.intersectObjects( this.blueMap.shapeScene.children );
+		console.log(intersects);
+		if (intersects.length !== 0){
+			try {
+				intersects[0].object.userData.marker.onClick(intersects[0].point);
+			} catch (ignore) {}
+			return;
+		}
+
+		//then show position info
 		let hiresData = true;
-		let intersects = this.raycaster.intersectObjects( this.blueMap.hiresScene.children );
+		intersects = this.raycaster.intersectObjects( this.blueMap.hiresScene.children );
 		if (intersects.length === 0){
 			hiresData = false;
 			intersects = this.raycaster.intersectObjects( this.blueMap.lowresScene.children );

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

@@ -1,3 +1,5 @@
+import {Vector3} from "three";
+
 export default class Marker {
 
 	constructor(blueMap, markerSet, markerData) {
@@ -5,7 +7,8 @@ export default class Marker {
 		this.markerSet = markerSet;
 		this.type = markerData.type;
 		this.map = markerData.map;
-		this.label = markerData.label;
+		this.position = new Vector3(markerData.position.x, markerData.position.y, markerData.position.z);
+		this.label = `<div class="marker-label">${markerData.label}</div>`;
 		this.link = markerData.link;
 		this.newTab = !!markerData.newTab;
 
@@ -25,7 +28,7 @@ export default class Marker {
 	updateRenderObject(object, scene, camera){
 		if (this.visible) {
 			//update visiblity
-			let distanceSquared = object.position.distanceToSquared(camera.position);
+			let distanceSquared = this.position.distanceToSquared(camera.position);
 			object.visible = distanceSquared <= this.maxDistanceSquared && distanceSquared >= this.minDistanceSquared;
 		} else {
 			object.visible = false;

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

@@ -15,8 +15,6 @@ export default class POIMarker extends Marker {
 			x: markerData.iconAnchor.x,
 			y: markerData.iconAnchor.y
 		};
-
-		this.position = new Vector3(markerData.position.x, markerData.position.y, markerData.position.z);
 	}
 
 	setVisible(visible){

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

@@ -1,13 +1,16 @@
 import {
 	Vector2,
 	Shape,
-	ExtrudeBufferGeometry,
 	MeshBasicMaterial,
 	Mesh,
-	Object3D,
+	Line,
+	LineBasicMaterial,
+	BufferGeometry,
+	ShapeBufferGeometry,
 	DoubleSide
 } from 'three';
 import Marker from "./Marker";
+import $ from "jquery";
 
 export default class ShapeMarker extends Marker {
 
@@ -20,44 +23,65 @@ export default class ShapeMarker extends Marker {
 				points.push(new Vector2(point.x, point.z));
 			});
 		}
-		this.floor = markerData.floor ? markerData.floor : 0;
-		this.ceiling = markerData.ceiling ? markerData.ceiling : 128;
+		this.height = markerData.height ? markerData.height : 128;
 
+		this.fillColor = this.prepareColor(markerData.fillColor);
+		this.borderColor = this.prepareColor(markerData.borderColor);
+
+		//fill
 		let shape = new Shape(points);
-		let extrude = new ExtrudeBufferGeometry(shape, {
-			steps: 1,
-			depth: this.ceiling - this.floor,
-			bevelEnabled: false
-		});
-		extrude.rotateX(Math.PI * 0.5);
-		extrude.translate(0, this.ceiling, 0);
-		let material = new MeshBasicMaterial( {
-			color: 0xff0000,
-			opacity: 0.25,
+		let fillGeo = new ShapeBufferGeometry(shape, 1);
+		fillGeo.rotateX(Math.PI * 0.5);
+		fillGeo.translate(0, this.height + 0.0072, 0);
+		let fillMaterial = new MeshBasicMaterial({
+			color: this.fillColor.rgb,
+			opacity: this.fillColor.a,
 			transparent: true,
-			side: DoubleSide
-		} );
+			side: DoubleSide,
+		});
+		let fill = new Mesh( fillGeo, fillMaterial );
 
-		let extrudeMesh = new Mesh( extrude, material );
+		//border
+		points.push(points[0]);
+		let lineGeo = new BufferGeometry().setFromPoints(points);
+		lineGeo.rotateX(Math.PI * 0.5);
+		lineGeo.translate(0, this.height + 0.0072, 0);
+		let lineMaterial = new LineBasicMaterial({
+			color: this.borderColor.rgb,
+			opacity: this.borderColor.a,
+			transparent: true,
+			depthTest: false,
+		});
+		let line = new Line( lineGeo, lineMaterial );
+
+		this.renderObject = fill;
+		fill.add(line);
+
+		this.renderObject.userData = {
+			marker: this,
+		};
 
-		this.renderObject = new Object3D();
-		this.renderObject.add(extrudeMesh);
 	}
 
 	setVisible(visible){
 		super.setVisible(visible);
 
 		if (this.visible) {
-			console.log(this.renderObject);
 			this.blueMap.shapeScene.add(this.renderObject);
+			$(document).on('bluemap-update-frame', this.onRender);
 		} else {
 			this.blueMap.shapeScene.remove(this.renderObject);
+			$(document).off('bluemap-update-frame', this.onRender);
 		}
 	}
 
-	onClick = () => {
+	onRender = () => {
+		this.updateRenderObject(this.renderObject, this.blueMap.shapeScene, this.blueMap.camera);
+	};
+
+	onClick = (clickPos) => {
 		if (this.label) {
-			//this.blueMap.ui.hudInfo.showInfoBubble(this.label, this.position.x, this.position.y, this.position.z);
+			this.blueMap.ui.hudInfo.showInfoBubble(this.label, clickPos.x, clickPos.y, clickPos.z);
 		}
 
 		if (this.link){
@@ -67,6 +91,16 @@ export default class ShapeMarker extends Marker {
 				location.href = this.link;
 			}
 		}
+	};
+
+	prepareColor(color){
+		if (color.r === undefined) color.r = 0;
+		if (color.g === undefined) color.g = 0;
+		if (color.b === undefined) color.b = 0;
+		if (color.a === undefined) color.a = 1;
+
+		color.rgb = (color.r << 16) + (color.g << 8) + (color.b);
+		return color;
 	}
 
 }