adds map location markers and popup details
This commit is contained in:
parent
53da09bd98
commit
7903174d9e
|
|
@ -7,14 +7,129 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<title>All Whomst Wander</title>
|
<title>All Whomst Wander</title>
|
||||||
<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
|
<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
|
||||||
<script type='text/javascript' src='https://raw.githack.com/AR-js-org/AR.js/master/three.js/build/ar-threex-location-only.js'></script>
|
<script type='text/javascript' src='https://raw.githack.com/AR-js-org/AR.js/master/three.js/build/ar-threex-location-only.js'></script>
|
||||||
<script type='text/javascript' src='https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js'></script>
|
<script type='text/javascript' src='https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js'></script>
|
||||||
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
|
||||||
|
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
|
||||||
|
crossorigin=""/>
|
||||||
|
<!-- Make sure you put this AFTER Leaflet's CSS -->
|
||||||
|
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
|
||||||
|
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
|
||||||
|
crossorigin=""></script>
|
||||||
|
<style>
|
||||||
|
#ar-view {
|
||||||
|
display: none;
|
||||||
|
z-index: 88888888;
|
||||||
|
}
|
||||||
|
#map-view {
|
||||||
|
height: 100%;
|
||||||
|
z-index: 77777777;
|
||||||
|
}
|
||||||
|
#toggle-view {
|
||||||
|
position: absolute;
|
||||||
|
top: 90%;
|
||||||
|
right: 0%;
|
||||||
|
z-index: 99999999;
|
||||||
|
}
|
||||||
|
#debug-view {
|
||||||
|
display: none;
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 0;
|
||||||
|
z-index: 99999999;
|
||||||
|
}
|
||||||
|
#player-map-icon {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
position: absolute;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<a-scene vr-mode-ui='enabled: false' arjs='sourceType: webcam; videoTexture: true; debugUIEnabled: false' renderer='antialias: true; alpha: true'>
|
<div id="map-view"></div>
|
||||||
<a-camera gps-new-camera='gpsMinDistance: 5'></a-camera>
|
<div id="player-map-icon"><div class="playerMapIcon"><div>👤</div></div></div>
|
||||||
|
<script language="javascript">
|
||||||
|
var globalZoom = 19; // default zoom level
|
||||||
|
|
||||||
|
var globalPosition = new THREE.Vector3();
|
||||||
|
var globalRotation = new THREE.Quaternion();
|
||||||
|
|
||||||
|
var globalMap = L.map('map-view').setView([34.695068, -84.482468], globalZoom);
|
||||||
|
|
||||||
|
var currentView = "map";
|
||||||
|
|
||||||
|
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
||||||
|
maxZoom: 22,
|
||||||
|
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
|
||||||
|
}).addTo(globalMap);
|
||||||
|
|
||||||
|
// generic monster svg icon for now
|
||||||
|
var monsterIcon = L.icon({
|
||||||
|
iconUrl: 'monster.svg',
|
||||||
|
iconSize: [48, 48]
|
||||||
|
});
|
||||||
|
|
||||||
|
function toggleView() {
|
||||||
|
if (currentView === "map") {
|
||||||
|
document.getElementById("ar-view").style.display = "block";
|
||||||
|
document.getElementById("map-view").style.display = "none";
|
||||||
|
document.getElementById("player-map-icon").style.display = "none";
|
||||||
|
currentView = "ar";
|
||||||
|
} else {
|
||||||
|
document.getElementById("ar-view").style.display = "none";
|
||||||
|
document.getElementById("map-view").style.display = "block";
|
||||||
|
document.getElementById("player-map-icon").style.display = "flex";
|
||||||
|
currentView = "map";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
AFRAME.registerComponent('camera-logger', {
|
||||||
|
schema: {
|
||||||
|
timestamp: {type: 'int'},
|
||||||
|
seconds: {type: 'int'} // default 0
|
||||||
|
},
|
||||||
|
|
||||||
|
log : function () {
|
||||||
|
var cameraEl = this.el.sceneEl.camera.el;
|
||||||
|
var rotation = cameraEl.getAttribute('rotation');
|
||||||
|
var worldPos = new THREE.Vector3();
|
||||||
|
worldPos.setFromMatrixPosition(cameraEl.object3D.matrixWorld);
|
||||||
|
|
||||||
|
// update map view
|
||||||
|
navigator.geolocation.getCurrentPosition((position) => {
|
||||||
|
worldPos.x = position.coords.latitude;
|
||||||
|
worldPos.z = position.coords.longitude;
|
||||||
|
globalMap.panTo([position.coords.latitude, position.coords.longitude]);
|
||||||
|
|
||||||
|
document.querySelector('#debug-view').innerHTML = "<p>Time: " + this.data.seconds
|
||||||
|
+ "</p><p>Camera Position: (" + worldPos.x.toFixed(6) + ", " + worldPos.y.toFixed(2) + ", " + worldPos.z.toFixed(6) + "</p>";
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
play: function () {
|
||||||
|
this.data.timestamp = Date.now();
|
||||||
|
this.log();
|
||||||
|
},
|
||||||
|
|
||||||
|
tick: function () {
|
||||||
|
if (Date.now() - this.data.timestamp > 1000) {
|
||||||
|
this.data.timestamp += 1000;
|
||||||
|
this.data.seconds += 1;
|
||||||
|
this.log();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<div id="ar-view">
|
||||||
|
<a-scene vr-mode-ui='enabled: false' arjs='sourceType: webcam; videoTexture: true; debugUIEnabled: true' renderer='antialias: true; alpha: true'>
|
||||||
|
<a-camera id='player-camera' gps-new-camera='gpsMinDistance: 1' camera-logger></a-camera>
|
||||||
<?php
|
<?php
|
||||||
$poi_npc_results = $conn->query('SELECT * FROM "POI-NPCs"');
|
$poi_npc_results = $conn->query('SELECT * FROM "POI-NPCs"');
|
||||||
if ($poi_npc_results) {
|
if ($poi_npc_results) {
|
||||||
|
|
@ -28,11 +143,27 @@
|
||||||
<a-gltf-model src="<?= trim($npc['model_path']) === "" ? "models/head.gltf" : $npc['model_path'] ?>" position="0 0 0" rotation="0 0 0"></a-gltf-model>
|
<a-gltf-model src="<?= trim($npc['model_path']) === "" ? "models/head.gltf" : $npc['model_path'] ?>" position="0 0 0" rotation="0 0 0"></a-gltf-model>
|
||||||
<a-text look-at="[gps-new-camera]" scale="5 5 5" align="center" text="value: <?= $poi['name'] . "\n" . $npc['name'] ?>;"></a-text>
|
<a-text look-at="[gps-new-camera]" scale="5 5 5" align="center" text="value: <?= $poi['name'] . "\n" . $npc['name'] ?>;"></a-text>
|
||||||
</a-entity>
|
</a-entity>
|
||||||
|
<script language='javascript'>
|
||||||
|
L.marker([<?= $poi['latitude'] ?>, <?= $poi['longitude'] ?>], {icon: monsterIcon, alt: "Map marker for <?= $npc['name'] ?> located at <?= $poi['name'] ?>"}).addTo(globalMap).bindPopup("<div class='poi-popup'><img src='<?= $npc['image_path'] === "" ? "images/default.png" : $npc['image_path'] ?>' class='npc-image' /><?= $npc['name'] ?> has been spotted at <?= $poi['name'] ?></div>");
|
||||||
|
</script>
|
||||||
<?php
|
<?php
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
?>
|
?>
|
||||||
</a-scene>
|
</a-scene>
|
||||||
|
</div>
|
||||||
|
<div id="toggle-view-div">
|
||||||
|
<button id="toggle-view" name="toggle" value="Switch" onclick="toggleView()">Switch View</button>
|
||||||
|
</div>
|
||||||
|
<div id="debug-view"></div>
|
||||||
</body>
|
</body>
|
||||||
|
<script language="javascript">
|
||||||
|
// make sure we have camera perms
|
||||||
|
if (navigator.mediaDevices) {
|
||||||
|
navigator.mediaDevices.getUserMedia({video: true}, function(localMediaStream){alert("user media good")}, function(err){alert(err)});
|
||||||
|
} else {
|
||||||
|
alert("no mediaDevices!");
|
||||||
|
}
|
||||||
|
</script>
|
||||||
</html>
|
</html>
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue