adds map location markers and popup details
This commit is contained in:
parent
53da09bd98
commit
7903174d9e
@ -7,14 +7,129 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>All Whomst Wander</title>
|
||||
<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/aframe/build/aframe-ar.js'></script>
|
||||
<title>All Whomst Wander</title>
|
||||
<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/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>
|
||||
<body>
|
||||
<a-scene vr-mode-ui='enabled: false' arjs='sourceType: webcam; videoTexture: true; debugUIEnabled: false' renderer='antialias: true; alpha: true'>
|
||||
<a-camera gps-new-camera='gpsMinDistance: 5'></a-camera>
|
||||
<div id="map-view"></div>
|
||||
<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
|
||||
$poi_npc_results = $conn->query('SELECT * FROM "POI-NPCs"');
|
||||
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-text look-at="[gps-new-camera]" scale="5 5 5" align="center" text="value: <?= $poi['name'] . "\n" . $npc['name'] ?>;"></a-text>
|
||||
</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
|
||||
}
|
||||
}
|
||||
?>
|
||||
</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>
|
||||
<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>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user