Add module example to new-location-based examples

nickw1 · nickw1 · commit b1e0631c8199 · 2022-12-29T10:00:52.000Z
diff --git a/aframe/examples/new-location-based/README.md b/aframe/examples/new-location-based/README.md
@@ -12,6 +12,8 @@ These examples have been written specifically, or adapted, for the `new-location
 
 - `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.
 
+- `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.
+
 - `poi` : Demonstrates downloading POIs from an OpenStreetMap-based GeoJSON API and adding them to the scene as objects, with text labels.
 
 - `poi-component` : Similar to `poi`, but demonstrating the use of a custom A-Frame component to download and display the POIs.
diff --git a/aframe/examples/new-location-based/basic-js-modules/index.html b/aframe/examples/new-location-based/basic-js-modules/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>AR.js A-Frame</title>
+<script src='dist/bundle.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-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/aframe/examples/new-location-based/basic-js-modules/index.js b/aframe/examples/new-location-based/basic-js-modules/index.js
@@ -0,0 +1,56 @@
+import '../../../build/aframe-ar.js';
+
+window.onload = () => {
+    let testEntitiesAdded = false;
+    alert('If testing the lat/lon manual input on a mobile device, please turn off your GPS to avoid the real location being detected.');
+    const el = document.querySelector("[gps-new-camera]");
+    el.addEventListener("gps-camera-update-position", e => {
+        if(!testEntitiesAdded) {
+            alert(`Got first GPS position: lon ${e.detail.position.longitude} lat ${e.detail.position.latitude}`);
+            // Add four boxes to the north (red), south (yellow), west (blue)
+            // and east (red) of the initial GPS position
+            const properties = [{
+                    color: 'red',
+                    latDis: 0.001,
+                    lonDis: 0
+                },{
+                    color: 'yellow',
+                    latDis: -0.001,
+                    lonDis: 0
+                },{
+                    color: 'blue',
+                    latDis: 0,
+                    lonDis: -0.001
+                },{
+                    color: 'green',
+                    latDis: 0,
+                    lonDis: 0.001
+                }
+            ];
+            for(const prop of properties) {
+                const entity = document.createElement("a-box");
+                entity.setAttribute("scale", {
+                    x: 20, 
+                    y: 20,
+                    z: 20
+                });
+                entity.setAttribute('material', { color: prop.color } );
+                entity.setAttribute('gps-new-entity-place', {
+                    latitude: e.detail.position.latitude + prop.latDis,
+                    longitude: e.detail.position.longitude + prop.lonDis
+                });
+                
+                document.querySelector("a-scene").appendChild(entity);
+            }
+            testEntitiesAdded = true;
+        }
+    });
+
+    document.getElementById("go").addEventListener("click", e=> {
+        const lat = document.getElementById('lat').value;
+        const lon = document.getElementById('lon').value;
+        const minacc = document.getElementById('minacc').value;
+
+        el.setAttribute('gps-new-camera', { simulateLatitude: lat, simulateLongitude: lon, positionMinAccuracy: minacc } );
+    });
+};
diff --git a/aframe/examples/new-location-based/basic-js-modules/webpack.config.js b/aframe/examples/new-location-based/basic-js-modules/webpack.config.js
@@ -0,0 +1,13 @@
+const path = require('path');
+
+module.exports = {
+    mode: 'development',
+    entry: path.resolve(__dirname, 'index.js'),
+    output: {
+        path: path.resolve(__dirname, 'dist'),
+        filename: 'bundle.js'
+    },
+    optimization: {
+        minimize: false
+    }
+};
