-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
73 lines (64 loc) · 2.64 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AR Heart Fixed in Front</title>
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://rawgit.com/jeromeetienne/AR.js/1.7.2/aframe/build/aframe-ar.min.js"></script>
<style>
body { margin: 0; overflow: hidden; font-family: Arial, sans-serif; }
#gps-data {
position: absolute; top: 10px; left: 10px;
background: rgba(0, 0, 0, 0.7); color: white; padding: 10px;
border-radius: 5px; font-size: 14px;
}
</style>
</head>
<body>
<!-- Display GPS Data -->
<div id="gps-data">Waiting for GPS data...</div>
<script>
const gpsDataDiv = document.getElementById("gps-data");
if ("geolocation" in navigator) {
navigator.geolocation.getCurrentPosition(
function(position) {
let lat = position.coords.latitude;
let lon = position.coords.longitude;
let accuracy = position.coords.accuracy;
// Show GPS data on screen
gpsDataDiv.innerHTML = `
<b>Your Location:</b><br>
Latitude: ${lat.toFixed(6)}<br>
Longitude: ${lon.toFixed(6)}<br>
Accuracy: ±${accuracy.toFixed(1)} meters
`;
console.log("Heart Fixed at:", lat, lon);
// Set fixed heart position
document.getElementById("heart").setAttribute("gps-entity-place",
`latitude: ${lat}; longitude: ${lon}`);
},
function(error) {
console.error("GPS access denied!", error);
gpsDataDiv.innerHTML = "GPS access denied. Enable location services.";
},
{ enableHighAccuracy: true, maximumAge: 0 }
);
} else {
gpsDataDiv.innerHTML = "Geolocation not supported on this browser.";
}
</script>
<!-- AR Scene -->
<a-scene embedded arjs gps-camera="minDistance: 5">
<!-- Fixed Heart in Front -->
<a-entity id="heart"
gps-entity-place="latitude: 0; longitude: 0"
geometry="primitive: sphere; radius: 0.3"
material="color: red"
position="0 1.5 -2" <!-- 2m in front, 1.5m above ground -->
look-at="[gps-camera]">
</a-entity>
<a-camera gps-camera rotation-reader></a-camera>
</a-scene>
</body>
</html>