Skip to content

Commit 5ec3108

Browse files
umuttoumutto
authored
Merge pull request #1 from jeromeetienne/dev
Dev
2 parents b3e0a6b + 32532d7 commit 5ec3108

20 files changed

+172
-37
lines changed

‎CHANGELOG.md

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,23 @@
1+
# 2.1.8
2+
3+
- handle y position (height) of content in Location Based, using `position` property of A-FRAME
4+
5+
# 2.1.7
6+
7+
- enhanced `distance` property, now calculating combined distance for latitude/longitude
8+
9+
# 2.1.6
10+
11+
- set distance in `distance` property of `gps-entity-place` (location based) as z axis (previously was x axis)
12+
13+
# 2.1.5
14+
15+
- added `distance` and `distanceMsg` properties to `gps-entity-place` (location based)
16+
- added new example for distance property
17+
- added new example for a `gps-entity-place` that is always facing the user (location based)
18+
- fixed error when source is image or video and not camera
19+
- enhanced docs
20+
121
# 2.1.4
222

323
- fixed wrong positioning of content on markers

‎README.md

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -127,7 +127,7 @@ You can also use GeoAR.js **without** the script, adding `gps-entity-place` enti
127127
<!doctype HTML>
128128
<html>
129129
<script src="https://aframe.io/releases/1.0.0/aframe.min.js"></script>
130-
<script src="https://raw.githack.com/jeromeetienne/AR.js/2.1.4/aframe/build/aframe-ar.js"></script>
130+
<script src="https://raw.githack.com/jeromeetienne/AR.js/2.1.8/aframe/build/aframe-ar.js"></script>
131131
<body style='margin : 0px; overflow: hidden;'>
132132
<a-scene embedded arjs>
133133
<a-marker preset="hiro">
@@ -185,6 +185,7 @@ Try to get inspired by this great works:
185185
- [Click Places](./aframe/examples/click-places) - set up remote credentials to fetch remote places (`places.js` file)
186186
- [Places Name](./aframe/examples/places-name) - add new places statically on javascript (`places.js` file)
187187
- [Only HTML](./aframe/examples/only-html) - add new places statically on html (`index.html` file)
188+
- [Only HTML](./aframe/examples/always-face-user) - like only-html but here content always face the user (`index.html` file)
188189

189190
# Related Projects
190191
- [Examples inspired from AR.js - not AR.js based](https://github.com/stemkoski/AR-Examples) from [@stemkoski](https://github.com/stemkoski)
@@ -299,6 +300,9 @@ Demo tested on the following browser setups:
299300
- **Safari and Chrome on iOS < 11** (doesn't work, doesn't ask for permission, I see white background and text)
300301
- **Microsoft Edge on Windows 10** (Chrome on Google Pixel phone to view hologram)
301302

303+
To see the full compatibility list and contribute to it yourself go to this google spreadsheet:
304+
[AR.js platform and browser compatibility](https://docs.google.com/spreadsheets/d/1e5YimbF_D1Sou2bx2vdBH58s1WdB_LgzBVYYD_uQLJk/edit#gid=318398375)
305+
302306
Credits: @HelloDeadline, @sorianog
303307

304308
# Licenses

‎aframe/README.md

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,7 @@ In addition to that, as you can see on the example above, we also have to add `r
7070
| positionMinAccuracy | Minimum accuracy allowed for position signal | 100 |
7171
| minDistance | If set, places with a distance from the user lower than this value, are not showed. Only a positive value is allowed. Value is in meters. | 0 (disabled) |
7272

73+
7374
### `gps-entity-place`
7475

7576
**Required**: yes
@@ -83,6 +84,11 @@ It requires latitude and longitude as a single string parameter (example with `a
8384
<a-box color="yellow" gps-entity-place="latitude: <your-latitude>; longitude: <your-longitude>"/>
8485
```
8586

87+
| Custom Attribute | Description | Default Value |
88+
|------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|---------------|
89+
| distance | Distance from user, updated at every user position update. Value in meters. | 0 |
90+
| distanceMsg | Distance from user, updated at every user position update. Value as `<distance> meters/kilometers`. | '' |
91+
8692
### `gps-camera-debug`
8793

8894
**Required**: no
@@ -91,12 +97,16 @@ It requires latitude and longitude as a single string parameter (example with `a
9197
This component should only be added in development environments, not in production environments.
9298
It shows a debug UI with camera informations and a list of registered `gps-entity-place` entities, showing also distance from the user for each one.
9399

94-
This replaces the `gps-camera`:
95-
96100
```HTML
97101
<a-scene gps-camera-debug embedded arjs='sourceType: webcam; debugUIEnabled: false;'></a-scene>
98102
```
99103

104+
## Tips
105+
106+
### **Content that will always face the user**
107+
108+
Look at [this example](./examples/always-face-user/index.html) in order to create `gps-entity-place` entities that will always face the user (so the user camera).
109+
100110
## Location Based Support
101111

102112
Tried on Huawei P20, works like charm.

‎aframe/build/aframe-ar.js

Lines changed: 33 additions & 9 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎aframe/build/aframe-ar.min.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/always-face-user/index.html

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset='utf-8'>
5+
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
6+
<title>GeoAR.js demo</title>
7+
<script src="https://cdn.jsdelivr.net/gh/aframevr/aframe@1c2407b26c61958baa93967b5412487cd94b290b/dist/aframe-master.min.js"></script>
8+
<script src="https://unpkg.com/aframe-look-at-component@0.8.0/dist/aframe-look-at-component.min.js"></script>
9+
<script src='../../build/aframe-ar.js'></script>
10+
<script>
11+
THREEx.ArToolkitContext.baseURL = 'https://raw.githack.com/jeromeetienne/ar.js/master/three.js/'
12+
</script>
13+
</head>
14+
15+
<body style='margin: 0; overflow: hidden;'>
16+
<a-scene
17+
vr-mode-ui="enabled: false"
18+
embedded
19+
arjs='sourceType: webcam; sourceWidth:1280; sourceHeight:960; displayWidth: 1280; displayHeight: 960; debugUIEnabled: false;'>
20+
21+
<a-text value="This will always face the user." look-at="[gps-camera]" scale="75 75 75" gps-entity-place="latitude: 44.493271; longitude: 11.326040;"></a-text>
22+
<a-camera gps-camera rotation-reader>
23+
</a-camera>
24+
</a-scene>
25+
</body>
26+

‎aframe/examples/basic.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
</div>
1414

1515
<!-- Define your 3d scene and enabled ar.js -->
16-
<a-scene embedded arjs='trackingMethod: best;'>
16+
<a-scene embedded arjs='trackingMethod: best; sourceWidth:1280; sourceHeight:960; displayWidth: 1280; displayHeight: 960;'>
1717

1818
<!-- Create a anchor to attach your augmented reality -->
1919
<a-anchor hit-testing-enabled='true'>

‎aframe/examples/marker-events.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@
3636
<br/>
3737
Contact me any time at <a href='https://twitter.com/jerome_etienne' target='_blank'>@jerome_etienne</a>
3838
</div>
39-
<a-scene embedded arjs='sourceType: webcam; detectionMode: mono_and_matrix; matrixCodeType: 3x3;'>
39+
<a-scene embedded arjs='sourceType: webcam; detectionMode: mono_and_matrix; matrixCodeType: 3x3; sourceWidth:1280; sourceHeight:960; displayWidth: 1280; displayHeight: 960;'>
4040
<!-- handle hiro marker -->
4141
<!-- 'registerevents' will register event listeners for the marker when it is found and lost,
4242
as defined in the inline script above -->

‎aframe/examples/only-html/index.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<meta charset='utf-8'>
55
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
66
<title>GeoAR.js demo</title>
7-
<script src="https://cdn.jsdelivr.net/gh/aframevr/aframe@1c2407b26c61958baa93967b5412487cd94b290b/dist/aframe-master.min.js"></script>
7+
<script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script>
88
<script src='../../build/aframe-ar.js'></script>
99
<script>
1010
THREEx.ArToolkitContext.baseURL = 'https://raw.githack.com/jeromeetienne/ar.js/master/three.js/'
@@ -17,7 +17,7 @@
1717
embedded
1818
arjs='sourceType: webcam; sourceWidth:1280; sourceHeight:960; displayWidth: 1280; displayHeight: 960; debugUIEnabled: false;'>
1919

20-
<a-box color="yellow" scale="15 15 15" gps-entity-place="latitude: 44.493271; longitude: 11.326040;"></a-box>
20+
<a-box scale="15 15 15" position="0 200 0" gps-entity-place="latitude: 44.493271; longitude: 11.326040;"></a-box>
2121
<a-camera gps-camera rotation-reader>
2222
</a-camera>
2323
</a-scene>

‎aframe/src/location-based/gps-camera-debug.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -107,6 +107,7 @@ AFRAME.registerComponent('gps-camera-debug', {
107107
var debugDiv = document.createElement('div');
108108
debugDiv.classList.add('debug-distance');
109109
debugDiv.innerHTML = element.getAttribute('value');
110+
console.log(element.getAttribute('value'));
110111
debugDiv.setAttribute('value', element.getAttribute('value'));
111112
div.appendChild(debugDiv);
112113
});

0 commit comments

Comments
 (0)