Alter location-based examples to focus on new-location-based components

AR-js-org · Dec 6, 2024 · 343d386 · 343d386
1 parent 1925fb0
commit 343d386
Show file tree

Hide file tree

Showing 65 changed files with 307 additions and 744 deletions.
diff --git a/aframe/examples/location-based/README.md b/aframe/examples/location-based/README.md
@@ -1,21 +1,25 @@
-# Location-based examples
+# Examples for A-Frame `new-location-based` components
 
-A brief summary of each example follows below. Aside from `hello-world`, the majority of the applications have a simulated lattitude and longitude; please modify the code to use your actual latitude and longitude.
+These examples have been written specifically, or adapted, for the `new-location-based` components available in AR.js 3.4.0 upwards.
 
-- `hello-world`: a simple example placing a cube at a given latitude and longitude. You must edit the code to supply your latitude and longitude.
+- `hello-world` : A basic Hello World example, using only HTML, which shows a box 0.001 degrees north of your location.
 
-- `projected-based-camera` : version of `hello-world` using `gps-projected-camera` and `gps-projected-entity-place`.
+- `multiple-boxes` : An extension of the `hello-world` example with four boxes, to the north, south, east and west of your current location.
 
-- `click-places` -  a version of `hello-world` which demonstrates click events on entities. Please look at the code and note how the raycaster is working.
+- `always-face-user` : Displays text 0.001 degrees north of your current location, using the third-party A-Frame look-at component to make the text always face the camera.
 
-- `always-face-user` - shows how you can use A-Frame's `look-at` component to create an entity which always faces the user.
+- `click-places` : Demonstrates how you can add click events to your AR objects, making use of A-Frame's `cursor` and `raycaster` components.
 
-- `avoid-shaking` - demonstrates the parameters needed to minimise shaking effects. Please look at the source code for full details.
+- `basic-js` : Basic JavaScript example which dynamically creates four boxes to the north, south, east and west of your initial GPS position (whatever that is). Allows you to enter a "fake" latitude and longitude for testing on a desktop.
 
-- `show-arbitrary-distant-places` - shows how you can view AR content many kilometres away using the `videoTexture` component. (In fact, currently, all working examples use `videoTexture` due to an issue - pending investigation - which occurs if it's not set)
+- `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.
 
-- `places-name` - shows the use of a web API to download local POIs but currently non-operational due to the CORS proxy no longer being available.
+- `show-distance` : version of `basic-js` which shows the distance to a given object when you click on it.
 
-- `peakfinder-2d` - shows the use of an OpenStreetMap based web API to download local summits. Does *not* include elevation though, hence the `2d`. Uses a working proxy.
+- `poi` : Demonstrates downloading POIs from an OpenStreetMap-based GeoJSON API and adding them to the scene as objects, with text labels.
 
-- `osm-ways` - shows how you can use AR.js to show not just simple point features but more complex geodata such as polylines. Downloads OpenStreetMap ways (roads, footpaths etc) from a server and renders them as polylines.
+- `poi-component` : Similar to `poi`, but demonstrating the use of a custom A-Frame component to download and display the POIs.
+
+- `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.
+
+- `avoid-shaking` : A version of `basic-js` with a smoothing factor applied to reduce shaking effects.
diff --git a/aframe/examples/location-based/always-face-user/index.html b/aframe/examples/location-based/always-face-user/index.html
@@ -1,21 +1,29 @@
+
 <!DOCTYPE html>
 <html>
 <head>
-    <meta charset='utf-8'>
-    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
-    <title>GeoAR.js demo</title>
-    <script src="https://aframe.io/releases/1.6.0/aframe.min.js"></script>
-    <script src="https://unpkg.com/[email protected]/dist/aframe-look-at-component.min.js"></script>
-    <script type='text/javascript' src='../../../build/aframe-ar-nft.js'></script>
+<title>AR.js A-Frame</title>
+<script src="https://aframe.io/releases/1.6.0/aframe.min.js"></script>
+<script src="https://unpkg.com/[email protected]/dist/aframe-look-at-component.min.js"></script>
+<!-- Assumes AR.js build is in the 'AR.js' directory -->
+<script type='text/javascript' src='../../../../three.js/build/ar-threex-location-only.js'></script>
+<script type='text/javascript' src='../../../build/aframe-ar.js'></script>
 </head>
-
-<body style='margin: 0; overflow: hidden;'>
-    <a-scene
-        vr-mode-ui="enabled: false"
-        arjs='sourceType: webcam; videoTexture: true; debugUIEnabled: false;'>
-
-        <a-camera gps-camera='simulateLatitude: 51.049; simulateLongitude: -0.723' rotation-reader></a-camera>
-        <a-text value="This will always face the user." look-at="[gps-camera]" scale="75 75 75" gps-entity-place="latitude: 51.0491; longitude: -0.723;"></a-text>
-    </a-scene>
+<body>
+<!-- 
+This is using a simulated location. If testing on a mobile device, remove the 
+'simulateLatitude' and 'simulateLongitude' properties from 'gps-new-camera' and
+change the 'latitude' and 'longitude' properties to a location around 0.001 
+degrees from your real location.
+-->
+<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; simulateLatitude: 51.049; simulateLongitude: -0.723'></a-camera>
+<!-- 
+Use the third-party A-Frame 'look-at' component to make the text look at the
+camera.
+-->
+	<a-text value='This will always face the user.' look-at='[gps-new-camera]' gps-new-entity-place="latitude: 51.05; longitude: -0.723" scale="50 50 50"></a-entity>
+</a-scene>
+
 </body>
-
+</html>
diff --git a/aframe/examples/location-based/assets/map-marker.png b/aframe/examples/location-based/assets/map-marker.png
diff --git a/aframe/examples/location-based/assets/place_icon.png b/aframe/examples/location-based/assets/place_icon.png
diff --git a/aframe/examples/location-based/avoid-shaking/index.html b/aframe/examples/location-based/avoid-shaking/index.html
@@ -1,36 +1,21 @@
 <!DOCTYPE html>
 <html>
 <head>
-    <meta charset='utf-8'>
-    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
-    <title>GeoAR.js demo</title>
-    <script src="https://aframe.io/releases/1.6.0/aframe.min.js"></script>
-    <script type='text/javascript' src='../../../build/aframe-ar-nft.js'></script>
+<title>AR.js A-Frame</title>
+<script src="https://aframe.io/releases/1.6.0/aframe.min.js"></script>
+<!-- Assumes AR.js build is in the 'AR.js' directory -->
+<script type='text/javascript' src='../../../../three.js/build/ar-threex-location-only.js'></script>
+<script type='text/javascript' src='../../../build/aframe-ar.js'></script>
+<script src='index.js'></script>
 </head>
-
-<body style='margin: 0; overflow: hidden;'>
-    <a-scene
-        vr-mode-ui="enabled: false"
-		arjs='sourceType: webcam; videoTexture: true; debugUIEnabled: false;'>
-
-        <!-- ~ 400m far -->
-        <a-box material="color: red;" scale="5 5 5" gps-entity-place="latitude: 44.506477; longitude: 11.301524;"></a-box> 
-
-        <!-- ~ 20m far -->
-        <a-image src="place.png" gps-entity-place="latitude: 44.504417; longitude: 11.301317;"
-        ></a-image> 
-
-        <!-- ~ 0m far -->
-        <a-image src="place.png" gps-entity-place="latitude: 44.504348; longitude: 11.301027;"
-            ></a-image>
-
-        <!-- using gpsMinDistance: 5 => update GPS only if user moves by 5 meters or more => avoid shaking for near objects -->
-        <!-- using accelerationToMove: 1.0 => 'smooth' inertial sensors precision precision in order to avoid distant places shaking -->
-        <a-camera
-            rotation-reader
-            gps-camera="simulateLatitude: 44.50437; simulateLongitude: 11.30106; gpsMinDistance: 10;"
-        >
-		</a-camera>
-	</a-scene>
+<body>
+<a-scene vr-mode-ui='enabled: false' arjs='sourceType: webcam; videoTexture: true; debugUIEnabled: false' renderer='antialias: true; alpha: true'>
+	<a-camera look-controls-enabled='false' arjs-device-orientation-controls='smoothingFactor:0.1' gps-new-camera='gpsMinDistance: 5'></a-camera>
+</a-scene>
+<div id='setloc' style='position:absolute; left: 10px; bottom: 2%; z-index:999; background-color: blue; color: white; padding: 10px'>
+Lat:<input id="lat" value="51.049" /> 
+Lon: <input id="lon" value="-0.723"/> 
+Min Acc: <input id='minacc' value='1000' /> <input type='button' id='go' value='go' />
+</div>
 </body>
-
+</html>
diff --git a/...new-location-based/avoid-shaking/index.js → ...les/location-based/avoid-shaking/index.js b/...new-location-based/avoid-shaking/index.js → ...les/location-based/avoid-shaking/index.js
diff --git a/...ion-based/basic-js-modules/dist/bundle.js → ...ion-based/basic-js-modules/dist/bundle.js b/...ion-based/basic-js-modules/dist/bundle.js → ...ion-based/basic-js-modules/dist/bundle.js
diff --git a/...ocation-based/basic-js-modules/index.html → ...ocation-based/basic-js-modules/index.html b/...ocation-based/basic-js-modules/index.html → ...ocation-based/basic-js-modules/index.html
diff --git a/...-location-based/basic-js-modules/index.js → .../location-based/basic-js-modules/index.js b/...-location-based/basic-js-modules/index.js → .../location-based/basic-js-modules/index.js
diff --git a/...-based/basic-js-modules/webpack.config.js → ...-based/basic-js-modules/webpack.config.js b/...-based/basic-js-modules/webpack.config.js → ...-based/basic-js-modules/webpack.config.js
diff --git a/...es/new-location-based/basic-js/index.html → ...amples/location-based/basic-js/index.html b/...es/new-location-based/basic-js/index.html → ...amples/location-based/basic-js/index.html
diff --git a/...ples/new-location-based/basic-js/index.js → ...examples/location-based/basic-js/index.js b/...ples/new-location-based/basic-js/index.js → ...examples/location-based/basic-js/index.js
diff --git a/aframe/examples/location-based/classic-components/README.md b/aframe/examples/location-based/classic-components/README.md
@@ -0,0 +1,15 @@
+# Location-based examples for classic location-based components
+
+These examples are for the "classic" location-based components, not the `new-location-based` components.
+
+A brief summary of each example follows below. Aside from `hello-world`, the majority of the applications have a simulated lattitude and longitude; please modify the code to use your actual latitude and longitude.
+
+- `always-face-user` - shows how you can use A-Frame's `look-at` component to create an entity which always faces the user.
+
+- `avoid-shaking` - demonstrates the parameters needed to minimise shaking effects. Please look at the source code for full details.
+
+- `click-places` - shows how you can handle click events on places
+
+- `max-min-distance` - how to control the max and min distance you can view an object.
+
+- `peakfinder-2d` - download nearby peaks from an OpenStreetMap-based server (works in Europe and Turkey only) and shows them in AR.
diff --git a/aframe/examples/location-based/classic-components/always-face-user/index.html b/aframe/examples/location-based/classic-components/always-face-user/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset='utf-8'>
+    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
+    <title>GeoAR.js demo</title>
+    <script src="https://aframe.io/releases/1.6.0/aframe.min.js"></script>
+    <script src="https://unpkg.com/[email protected]/dist/aframe-look-at-component.min.js"></script>
+    <script type='text/javascript' src='../../../../build/aframe-ar-nft.js'></script>
+</head>
+
+<body style='margin: 0; overflow: hidden;'>
+    <a-scene
+        vr-mode-ui="enabled: false"
+        arjs='sourceType: webcam; videoTexture: true; debugUIEnabled: false;'>
+
+        <a-camera gps-camera='simulateLatitude: 51.049; simulateLongitude: -0.723' rotation-reader></a-camera>
+        <a-text value="This will always face the user." look-at="[gps-camera]" scale="75 75 75" gps-entity-place="latitude: 51.0491; longitude: -0.723;"></a-text>
+    </a-scene>
+</body>
+
diff --git a/aframe/examples/location-based/classic-components/avoid-shaking/index.html b/aframe/examples/location-based/classic-components/avoid-shaking/index.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset='utf-8'>
+    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
+    <title>GeoAR.js demo</title>
+    <script src="https://aframe.io/releases/1.6.0/aframe.min.js"></script>
+    <script type='text/javascript' src='../../../../build/aframe-ar-nft.js'></script>
+</head>
+
+<body style='margin: 0; overflow: hidden;'>
+    <a-scene
+        vr-mode-ui="enabled: false"
+		arjs='sourceType: webcam; videoTexture: true; debugUIEnabled: false;'>
+
+        <!-- ~ 400m far -->
+        <a-box material="color: red;" scale="5 5 5" gps-entity-place="latitude: 44.506477; longitude: 11.301524;"></a-box> 
+
+        <!-- ~ 20m far -->
+        <a-image src="place.png" gps-entity-place="latitude: 44.504417; longitude: 11.301317;"
+        ></a-image> 
+
+        <!-- ~ 0m far -->
+        <a-image src="place.png" gps-entity-place="latitude: 44.504348; longitude: 11.301027;"
+            ></a-image>
+
+        <!-- using gpsMinDistance: 5 => update GPS only if user moves by 5 meters or more => avoid shaking for near objects -->
+        <!-- using accelerationToMove: 1.0 => 'smooth' inertial sensors precision precision in order to avoid distant places shaking -->
+        <a-camera
+            rotation-reader
+            gps-camera="simulateLatitude: 44.50437; simulateLongitude: 11.30106; gpsMinDistance: 10;"
+        >
+		</a-camera>
+	</a-scene>
+</body>
+
diff --git a/...es/location-based/avoid-shaking/place.png → ...lassic-components/avoid-shaking/place.png b/...es/location-based/avoid-shaking/place.png → ...lassic-components/avoid-shaking/place.png
diff --git a/...ew-location-based/click-places/index.html → ...lassic-components/click-places/index.html b/...ew-location-based/click-places/index.html → ...lassic-components/click-places/index.html
@@ -3,8 +3,7 @@
     <head>
         <title>AR.js Click Places Example</title>
         <script src="https://aframe.io/releases/1.6.0/aframe.min.js"></script>
-        <script type='text/javascript' src='../../../../three.js/build/ar-threex-location-only.js'></script>
-        <script type='text/javascript' src='../../../build/aframe-ar-nft.js'></script>
+        <script type='text/javascript' src='../../../../build/aframe-ar-nft.js'></script>
         <script>
         AFRAME.registerComponent('clicker', {
             init: function() {
@@ -22,8 +21,8 @@
         raycaster='near: 0; far: 50000'
         arjs='sourceType: webcam; videoTexture: true; debugUIEnabled: false;'
         renderer='antialias: true; alpha: true'>
-            <a-camera gps-new-camera='simulateLatitude: 51.049; simulateLongitude: -0.723'></a-camera>
-            <a-box gps-new-entity-place='latitude: 51.0596; longitude: -0.7170' color='red' scale='200 200 200' clicker></a-box>
+            <a-camera gps-projected-camera='simulateLatitude: 51.049; simulateLongitude: -0.723' rotation-reader></a-camera>
+            <a-box gps-projected-entity-place='latitude: 51.0596; longitude: -0.7170' color='red' scale='200 200 200' clicker></a-box>
     </a-scene>
     </body>
 </html>

diff --git a/...ples/location-based/click-places/index.js → .../classic-components/click-places/index.js b/...ples/location-based/click-places/index.js → .../classic-components/click-places/index.js
diff --git a/...location-based/max-min-distance/README.md → ...sic-components/max-min-distance/README.md b/...location-based/max-min-distance/README.md → ...sic-components/max-min-distance/README.md
diff --git a/...ocation-based/max-min-distance/index.html → ...ic-components/max-min-distance/index.html b/...ocation-based/max-min-distance/index.html → ...ic-components/max-min-distance/index.html
@@ -5,7 +5,7 @@
     <meta http-equiv='X-UA-Compatible' content='IE=edge'>
     <title>GeoAR.js demo</title>
     <script src="https://aframe.io/releases/1.6.0/aframe.min.js"></script>
-    <script type='text/javascript' src='../../../build/aframe-ar-nft.js'></script>
+    <script type='text/javascript' src='../../../../build/aframe-ar-nft.js'></script>
 </head>
 
 <body><!-- style='margin: 0; overflow: hidden;'>-->

diff --git a/...s/location-based/peakfinder-2d/index.html → ...assic-components/peakfinder-2d/index.html b/...s/location-based/peakfinder-2d/index.html → ...assic-components/peakfinder-2d/index.html
@@ -3,7 +3,7 @@
         <title>AR.js Peakfinder (2D - no elevation)</title>
         <script src="https://aframe.io/releases/1.6.0/aframe.min.js"></script>
         <script src="https://unpkg.com/[email protected]/dist/aframe-look-at-component.min.js"></script>
-        <script type='text/javascript' src='../../../build/aframe-ar-nft.js'></script>
+        <script type='text/javascript' src='../../../../build/aframe-ar-nft.js'></script>
         <script type='text/javascript' src='index.js'></script>
     </head>
     <body>

diff --git a/...les/location-based/peakfinder-2d/index.js → ...classic-components/peakfinder-2d/index.js b/...les/location-based/peakfinder-2d/index.js → ...classic-components/peakfinder-2d/index.js
diff --git a/aframe/examples/location-based/click-places/index.html b/aframe/examples/location-based/click-places/index.html
@@ -3,6 +3,7 @@
     <head>
         <title>AR.js Click Places Example</title>
         <script src="https://aframe.io/releases/1.6.0/aframe.min.js"></script>
+        <script type='text/javascript' src='../../../../three.js/build/ar-threex-location-only.js'></script>
         <script type='text/javascript' src='../../../build/aframe-ar-nft.js'></script>
         <script>
         AFRAME.registerComponent('clicker', {
@@ -21,8 +22,8 @@
         raycaster='near: 0; far: 50000'
         arjs='sourceType: webcam; videoTexture: true; debugUIEnabled: false;'
         renderer='antialias: true; alpha: true'>
-            <a-camera gps-projected-camera='simulateLatitude: 51.049; simulateLongitude: -0.723' rotation-reader></a-camera>
-            <a-box gps-projected-entity-place='latitude: 51.0596; longitude: -0.7170' color='red' scale='200 200 200' clicker></a-box>
+            <a-camera gps-new-camera='simulateLatitude: 51.049; simulateLongitude: -0.723'></a-camera>
+            <a-box gps-new-entity-place='latitude: 51.0596; longitude: -0.7170' color='red' scale='200 200 200' clicker></a-box>
     </a-scene>
     </body>
 </html>

diff --git a/aframe/examples/location-based/hello-world/index.html b/aframe/examples/location-based/hello-world/index.html
@@ -1,18 +1,24 @@
+
 <!DOCTYPE html>
-<html> 
-    <head>
-        <title>AR.js Hello World Example</title>
-        <script src="https://aframe.io/releases/1.6.0/aframe.min.js"></script>
-        <script type='text/javascript' src='../../../build/aframe-ar-nft.js'></script>
-    </head>
-    <body>
-    <a-scene
-        vr-mode-ui="enabled: false"
-        arjs='sourceType: webcam; videoTexture: true; debugUIEnabled: false;'
-        renderer='antialias: true; alpha: true'>
-            <a-camera gps-camera rotation-reader></a-camera>
-            <a-box gps-entity-place='latitude: your-latitude; longitude: your-longitude' color='red' scale='20 20 20'></a-box>
-    </a-scene>
-    </body>
+<html>
+<head>
+<title>AR.js A-Frame</title>
+<script src="https://aframe.io/releases/1.6.0/aframe.min.js"></script>
+<!-- Assumes AR.js build is in the 'AR.js' directory -->
+<script type='text/javascript' src='../../../../three.js/build/ar-threex-location-only.js'></script>
+<script type='text/javascript' src='../../../build/aframe-ar.js'></script>
+</head>
+<body>
+<!-- 
+This is using a simulated location. If testing on a mobile device, remove the 
+'simulateLatitude' and 'simulateLongitude' properties from 'gps-new-camera' and
+change the 'latitude' and 'longitude' properties to a location around 0.001 
+degrees from your real location.
+-->
+<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; simulateLatitude: 51.049; simulateLongitude: -0.723'></a-camera>
+	<a-entity material='color: red' geometry='primitive: box' gps-new-entity-place="latitude: 51.05; longitude: -0.723" scale="10 10 10"></a-entity>
+</a-scene>
+
+</body>
 </html>
-
diff --git a/...sed/initial-location-as-origin/clicker.js → ...sed/initial-location-as-origin/clicker.js b/...sed/initial-location-as-origin/clicker.js → ...sed/initial-location-as-origin/clicker.js
diff --git a/...sed/initial-location-as-origin/index.html → ...sed/initial-location-as-origin/index.html b/...sed/initial-location-as-origin/index.html → ...sed/initial-location-as-origin/index.html
diff --git a/...based/initial-location-as-origin/index.js → ...based/initial-location-as-origin/index.js b/...based/initial-location-as-origin/index.js → ...based/initial-location-as-origin/index.js
diff --git a/...-location-based/multiple-boxes/index.html → .../location-based/multiple-boxes/index.html b/...-location-based/multiple-boxes/index.html → .../location-based/multiple-boxes/index.html
diff --git a/...mples/new-location-based/osm-ways/LICENSE → ...xamples/location-based/osm-ways-2/LICENSE b/...mples/new-location-based/osm-ways/LICENSE → ...xamples/location-based/osm-ways-2/LICENSE
diff --git a/...es/new-location-based/osm-ways/index.html → ...ples/location-based/osm-ways-2/index.html b/...es/new-location-based/osm-ways/index.html → ...ples/location-based/osm-ways-2/index.html
@@ -25,7 +25,7 @@
     <body style='margin: 0; overflow: hidden'>
         <a-scene vr-mode-ui='enabled: false' arjs='sourceType: webcam; videoTexture: true; debugUIEnabled: false'>
             <div id='status'></div>
-            <a-camera gps-new-camera position='0 20 0'></a-camera>
+            <a-camera gps-new-camera='simulateLatitude: 51.049; simulateLongitude: -0.723' position='0 20 0' wasd-controls='acceleration: 1300'></a-camera>
             <a-entity osm></a-entity>
         </a-scene>
     </body>

diff --git a/...ples/new-location-based/osm-ways/index.js → ...amples/location-based/osm-ways-2/index.js b/...ples/new-location-based/osm-ways/index.js → ...amples/location-based/osm-ways-2/index.js
diff --git a/...amples/new-location-based/osm-ways/osm.js → ...examples/location-based/osm-ways-2/osm.js b/...amples/new-location-based/osm-ways/osm.js → ...examples/location-based/osm-ways-2/osm.js
diff --git a/...les/new-location-based/osm-ways/osmway.js → ...mples/location-based/osm-ways-2/osmway.js b/...les/new-location-based/osm-ways/osmway.js → ...mples/location-based/osm-ways-2/osmway.js
diff --git a/aframe/examples/location-based/osm-ways-2/poi.html b/aframe/examples/location-based/osm-ways-2/poi.html
@@ -0,0 +1,19 @@
+
+<!DOCTYPE html>
+<html>
+<head>
+<title>AR.js A-Frame - Points of Interest Example</title>
+<script src="https://aframe.io/releases/1.6.0/aframe.min.js"></script>
+<script type='text/javascript' src='../../../../three.js/build/ar-threex-location-only.js'></script>
+<script type='text/javascript' src='../../../build/aframe-ar.js'></script>
+<script type='text/javascript' src='poi.js'></script>
+<script type='text/javascript' src='osmway.js'></script>
+</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>
+	<a-entity poi-downloader></a-entity>
+</a-scene>
+
+</body>
+</html>