Skip to content

Commit 588ea35

Browse files
nickw1nickw1
committed
new-location-based distance fixes
1 parent d5fd88a commit 588ea35

File tree

10 files changed

+100
-6
lines changed

10 files changed

+100
-6
lines changed

‎aframe/build/aframe-ar-new-location-only.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎aframe/build/aframe-ar-nft.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎aframe/build/aframe-ar.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎aframe/examples/new-location-based/README.md‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,12 @@ These examples have been written specifically, or adapted, for the `new-location
1414

1515
- `basic-js-modules` : version of `basic-js` which uses an ES6 import to include AR.js. Requires building using Webpack: a `webpack.config.js` is provided.
1616

17+
- `show-distance` : version of `basic-js` which shows the distance to a given object when you click on it.
18+
1719
- `poi` : Demonstrates downloading POIs from an OpenStreetMap-based GeoJSON API and adding them to the scene as objects, with text labels.
1820

1921
- `poi-component` : Similar to `poi`, but demonstrating the use of a custom A-Frame component to download and display the POIs.
2022

2123
- `osm-ways` : A more complex example showing how more specialised geodata can be rendered with AR.js. Downloads OpenStreetMap ways (roads, paths) from a GeoJSON API, reprojects them into Spherical Mercator, and adds them to the scene as polylines made up of individual triangles.
2224

23-
- `smoothing` : A version of `basic-js` with a smoothing factor applied.
25+
- `avoid-shaking` : A version of `basic-js` with a smoothing factor applied to reduce shaking effects.

‎aframe/examples/new-location-based/smoothing/index.html‎ renamed to ‎aframe/examples/new-location-based/avoid-shaking/index.html‎

File renamed without changes.

‎aframe/examples/new-location-based/smoothing/index.js‎ renamed to ‎aframe/examples/new-location-based/avoid-shaking/index.js‎

File renamed without changes.

‎aframe/examples/new-location-based/show-distance/clicker.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
/*
2+
AFRAME.registerComponent("clicker", {
3+
init: function() {
4+
this.el.addEventListener("click", e=> {
5+
alert(this.el.components["gps-new-entity-place"].distance);
6+
});
7+
}
8+
});
9+
*/

‎aframe/examples/new-location-based/show-distance/index.html‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>AR.js A-Frame</title>
5+
<script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
6+
<!-- Assumes AR.js build is in the 'AR.js' directory -->
7+
<script type='text/javascript' src='../../../../three.js/build/ar-threex-location-only.js'></script>
8+
<script type='text/javascript' src='../../../build/aframe-ar.js'></script>
9+
<script src='index.js'></script>
10+
<script src='clicker.js'></script>
11+
</head>
12+
<body>
13+
<a-scene vr-mode-ui='enabled: false' arjs='sourceType: webcam; videoTexture: true; debugUIEnabled: false' renderer='antialias: true; alpha: true' cursor='rayOrigin: mouse' raycaster='near: 0; far:10000'>
14+
<a-camera gps-new-camera='gpsMinDistance: 5'></a-camera>
15+
</a-scene>
16+
<div id='setloc' style='position:absolute; left: 10px; bottom: 2%; z-index:999; background-color: blue; color: white; padding: 10px'>
17+
Lat:<input id="lat" value="51.049" />
18+
Lon: <input id="lon" value="-0.723"/>
19+
Min Acc: <input id='minacc' value='1000' /> <input type='button' id='go' value='go' />
20+
</div>
21+
</body>
22+
</html>

‎aframe/examples/new-location-based/show-distance/index.js‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
AFRAME.registerComponent("clicker", {
2+
init: function() {
3+
this.el.addEventListener("click", e=> {
4+
const dist = this.el.components["gps-new-entity-place"].distance;
5+
alert(dist === undefined ? "Please move to a new location to obtain the distance" : `This object is ${dist} metres away.`);
6+
});
7+
}
8+
});
9+
10+
window.onload = () => {
11+
let testEntitiesAdded = false;
12+
alert('If testing the lat/lon manual input on a mobile device, please turn off your GPS to avoid the real location being detected.');
13+
const el = document.querySelector("[gps-new-camera]");
14+
el.addEventListener("gps-camera-update-position", e => {
15+
if(!testEntitiesAdded) {
16+
// Add four boxes to the north (red), south (yellow), west (blue)
17+
// and east (red) of the initial GPS position
18+
const properties = [{
19+
color: 'red',
20+
latDis: 0.001,
21+
lonDis: 0
22+
},{
23+
color: 'yellow',
24+
latDis: -0.001,
25+
lonDis: 0
26+
},{
27+
color: 'blue',
28+
latDis: 0,
29+
lonDis: -0.001
30+
},{
31+
color: 'green',
32+
latDis: 0,
33+
lonDis: 0.001
34+
}
35+
];
36+
for(const prop of properties) {
37+
const entity = document.createElement("a-box");
38+
entity.setAttribute("scale", {
39+
x: 20,
40+
y: 20,
41+
z: 20
42+
});
43+
entity.setAttribute('material', { color: prop.color } );
44+
entity.setAttribute('gps-new-entity-place', {
45+
latitude: e.detail.position.latitude + prop.latDis,
46+
longitude: e.detail.position.longitude + prop.lonDis
47+
});
48+
entity.setAttribute('clicker', { });
49+
document.querySelector("a-scene").appendChild(entity);
50+
}
51+
testEntitiesAdded = true;
52+
}
53+
});
54+
55+
document.getElementById("go").addEventListener("click", e=> {
56+
const lat = document.getElementById('lat').value;
57+
const lon = document.getElementById('lon').value;
58+
const minacc = document.getElementById('minacc').value;
59+
60+
el.setAttribute('gps-new-camera', { simulateLatitude: lat, simulateLongitude: lon, positionMinAccuracy: minacc } );
61+
});
62+
};

‎aframe/src/new-location-based/gps-new-entity-place.js‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,15 +14,14 @@ AFRAME.registerComponent("gps-new-entity-place", {
1414
},
1515

1616
init: function () {
17-
this.distance = Number.MAX_VALUE;
1817
const camera = document.querySelector("[gps-new-camera]");
1918
if (!camera.components["gps-new-camera"]) {
2019
console.error("gps-new-camera not initialised");
2120
return;
2221
}
2322
this._cameraGps = camera.components["gps-new-camera"];
2423

25-
this.el.addEventListener("gps-camera-update-position", (e) => {
24+
camera.addEventListener("gps-camera-update-position", (e) => {
2625
this.distance = this._haversineDist(e.detail.position, this.data);
2726
});
2827
},

0 commit comments

Comments
 (0)