forked from mirror/BlueMap
Add abillity to stick to a player in web-app
This commit is contained in:
parent
e60d60fc93
commit
d5f12ee451
@ -2,6 +2,7 @@ import $ from 'jquery';
|
||||
import {
|
||||
Raycaster,
|
||||
Vector2,
|
||||
Vector3,
|
||||
BoxBufferGeometry,
|
||||
Mesh,
|
||||
MeshBasicMaterial
|
||||
@ -155,10 +156,21 @@ export default class HudInfo {
|
||||
let lrpath = this.blueMap.dataRoot + this.blueMap.map + '/lowres/';
|
||||
lrpath += pathFromCoords(lowresTile.x, lowresTile.y);
|
||||
lrpath += '.json';
|
||||
|
||||
//chunk
|
||||
let chunkCoords = new Vector3(block.x, block.y, block.z).divide({x:16,y:16,z:16}).floor();
|
||||
let chunk = `x:${chunkCoords.x}, y:${chunkCoords.y}, z:${chunkCoords.z}`;
|
||||
|
||||
//region
|
||||
let regionCoords = new Vector2(block.x, block.z).divide({x:512,y:512}).floor();
|
||||
let region = `r.${regionCoords.x}.${regionCoords.y}.mca`;
|
||||
|
||||
$(`
|
||||
<div class="files">
|
||||
<span class="value">${hrpath}</span><br>
|
||||
<span class="value">${lrpath}</span>
|
||||
<span class="value">${lrpath}</span><br>
|
||||
<span class="value">chunk: ${chunk}</span><br>
|
||||
<span class="value">region: ${region}</span>
|
||||
</div>
|
||||
`).appendTo(content);
|
||||
}
|
||||
|
@ -15,6 +15,8 @@ export default class PlayerMarker extends Marker {
|
||||
|
||||
this.animationRunning = false;
|
||||
this.lastFrame = -1;
|
||||
|
||||
this.follow = false;
|
||||
}
|
||||
|
||||
setVisible(visible){
|
||||
@ -23,17 +25,18 @@ export default class PlayerMarker extends Marker {
|
||||
this.blueMap.updateFrame = true;
|
||||
|
||||
if (!this.renderObject){
|
||||
let iconElement = $(`<div class="marker-player"><img src="assets/playerheads/${this.player}.png" onerror="this.onerror=null;this.src='${STEVE}';"><div class="nameplate">${this.label}</div></div>`);
|
||||
iconElement.find("img").click(this.onClick);
|
||||
this.iconElement = $(`<div class="marker-player"><img src="assets/playerheads/${this.player}.png" onerror="this.onerror=null;this.src='${STEVE}';"><div class="nameplate">${this.label}</div></div>`);
|
||||
this.iconElement.find("img").click(this.onClick);
|
||||
$(window).on('mousedown touchstart', this.onStopFollowing);
|
||||
|
||||
this.renderObject = new CSS2DObject(iconElement[0]);
|
||||
this.renderObject = new CSS2DObject(this.iconElement[0]);
|
||||
this.renderObject.position.copy(this.position);
|
||||
this.renderObject.onBeforeRender = (renderer, scene, camera) => {
|
||||
let distanceSquared = this.position.distanceToSquared(camera.position);
|
||||
if (distanceSquared > 1000000) {
|
||||
iconElement.addClass("distant");
|
||||
this.iconElement.addClass("distant");
|
||||
} else {
|
||||
iconElement.removeClass("distant");
|
||||
this.iconElement.removeClass("distant");
|
||||
}
|
||||
|
||||
this.updateRenderObject(this.renderObject, scene, camera);
|
||||
@ -57,6 +60,11 @@ export default class PlayerMarker extends Marker {
|
||||
} else {
|
||||
this.renderObject.position.copy(this.position);
|
||||
}
|
||||
|
||||
if (this.follow){
|
||||
this.blueMap.controls.targetPosition.x = this.position.x;
|
||||
this.blueMap.controls.targetPosition.z = this.position.z;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@ -86,7 +94,18 @@ export default class PlayerMarker extends Marker {
|
||||
};
|
||||
|
||||
onClick = () => {
|
||||
this.follow = true;
|
||||
this.iconElement.addClass("following");
|
||||
|
||||
}
|
||||
this.blueMap.controls.targetPosition.x = this.position.x;
|
||||
this.blueMap.controls.targetPosition.z = this.position.z;
|
||||
};
|
||||
|
||||
onStopFollowing = event => {
|
||||
if(this.follow) {
|
||||
this.follow = true;
|
||||
this.iconElement.removeClass("following");
|
||||
}
|
||||
};
|
||||
|
||||
}
|
@ -96,6 +96,8 @@
|
||||
image-rendering: pixelated;
|
||||
image-rendering: crisp-edges;
|
||||
|
||||
border: solid 2px transparent;
|
||||
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
@ -115,10 +117,18 @@
|
||||
img {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
|
||||
border-width: 1px;
|
||||
}
|
||||
|
||||
.nameplate {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.following {
|
||||
img {
|
||||
border-color: white;
|
||||
}
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue
Block a user