AR-js-org · nickw1 · Mar 10, 2022 · Mar 10, 2022 · Mar 10, 2022 · Mar 11, 2022
diff --git a/README.md b/README.md
@@ -7,7 +7,7 @@
 [![Twitter Follow](https://img.shields.io/twitter/follow/nicolocarp.svg?style=plastic&label=nicolocarpignoli-twitter&style=plastic)](https://twitter.com/nicolocarp)
 [![Twitter Follow](https://img.shields.io/twitter/follow/jerome_etienne.svg?style=plastic&label=jeromeetienne-twitter&style=plastic)](https://twitter.com/jerome_etienne)
 
-You can now own the first commit of AR.js! 👉[![GitNFT](https://img.shields.io/badge/%F0%9F%94%AE-Open%20in%20GitNFT-darkviolet?style=flat)](https://gitnft.quine.sh/app/commits/list/repo/AR.js)
+You can now own the first commit of AR.js! 👉[OpenSea](https://opensea.io/assets/matic/0xe7ea2e2be12c257d376400cb231d8ee51e972bd6/3962549295964122998537137060348053157629730105441540397501924171148500367064/)
 
 AR.js is a lightweight library for Augmented Reality on the Web, coming with features like Image Tracking, Location-based AR and Marker tracking.
 

diff --git a/aframe/build/aframe-ar-new-location-only.js b/aframe/build/aframe-ar-new-location-only.js
diff --git a/aframe/build/aframe-ar-nft.js b/aframe/build/aframe-ar-nft.js
diff --git a/aframe/build/aframe-ar.js b/aframe/build/aframe-ar.js
diff --git a/aframe/examples/new-location-based/index.html b/aframe/examples/new-location-based/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>AR.js A-Frame</title>
+<script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
+<!-- Assumes AR.js build is in the 'AR.js' directory -->
+<script type='text/javascript' src='AR.js/three.js/build/ar-threex-location-only.js'></script>
+<script type='text/javascript' src='AR.js/aframe/build/aframe-ar.js'></script>
+<script src='index.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' look-controls-enabled='false' arjs-device-orientation-controls></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='10' /> <input type='button' id='go' value='go' />
+</div>
+</body>
+</html>
diff --git a/aframe/examples/new-location-based/index.js b/aframe/examples/new-location-based/index.js
@@ -0,0 +1,53 @@
+window.onload = () => {
+    let testEntitiesAdded = false;
+    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/src/index-nft.js b/aframe/src/index-nft.js
@@ -10,6 +10,9 @@ import './location-based/gps-camera'
 import './location-based/gps-entity-place'
 import './location-based/gps-projected-camera'
 import './location-based/gps-projected-entity-place'
+import './new-location-based/gps-new-camera'
+import './new-location-based/gps-new-entity-place'
+import './new-location-based/arjs-device-orientation-controls'
 
 // System
 import './system-arjs';
diff --git a/aframe/src/index.js b/aframe/src/index.js
@@ -10,6 +10,9 @@ import './location-based/gps-camera'
 import './location-based/gps-entity-place'
 import './location-based/gps-projected-camera'
 import './location-based/gps-projected-entity-place'
+import './new-location-based/gps-new-camera'
+import './new-location-based/gps-new-entity-place'
+import './new-location-based/arjs-device-orientation-controls'
 
 // System
 import './system-arjs';
diff --git a/aframe/src/new-location-based/arjs-device-orientation-controls.js b/aframe/src/new-location-based/arjs-device-orientation-controls.js
@@ -0,0 +1,35 @@
+
+/**
+ * arjs-device-orientation-controls
+ * 
+ * Replaces the standard look-controls component to provide mobile device
+ * orientation controls.
+ *
+ * A lightweight A-Frame wrapper round the modified three.js 
+ * DeviceOrientationControls used in the three.js location-based API.
+ *
+ * Creates the THREE object using using the three.js camera, and allows update
+ * of the smoothing factor.
+ */
+
+import * as AFRAME from 'aframe'
+AFRAME.registerComponent('arjs-device-orientation-controls', {
+    schema: {
+        smoothingFactor: { 
+            type: 'number', 
+            default: 1 
+        }
+    },
+
+    init: function () {
+        this._orientationControls = new THREEx.DeviceOrientationControls(this.el.object3D);
+    },
+
+    update: function() {
+        this._orientationControls.smoothingFactor = this.data.smoothingFactor;
+    },
+
+    tick: function() {
+        this._orientationControls.update();
+    }
+});
diff --git a/aframe/src/new-location-based/gps-new-camera.js b/aframe/src/new-location-based/gps-new-camera.js
@@ -0,0 +1,136 @@
+import * as AFRAME from 'aframe';
+
+AFRAME.registerComponent('gps-new-camera', {
+    schema: {
+        simulateLatitude: {
+            type: 'number',
+            default: 0
+        },
+        simulateLongitude: {
+            type: 'number',
+            default: 0
+        },
+        simulateAltitude: {
+            type: 'number',
+            default: -Number.MAX_VALUE
+        },
+        gpsMinDistance: {
+            type: 'number',
+            default: 0
+        },
+        positionMinAccuracy: {
+            type: 'number',
+            default: 100
+        }
+    },
+
+
+    init: function() {
+        this._testForOrientationControls();
+
+        this.threeLoc = new THREEx.LocationBased(
+            this.el.sceneEl.object3D, 
+            this.el.object3D
+        );
+
+        this.threeLoc.on("gpsupdate", gpspos => { 
+            this._sendGpsUpdateEvent(gpspos.coords.longitude, gpspos.coords.latitude);
+        });
+
+        this.threeLoc.on("gpserror", code => {
+            const msg = [
+                "User denied access to GPS.",
+                "GPS satellites not available.",
+                "Timeout communicating with GPS satellites - try moving to a more open area."
+            ];
+            if(code >= 1 && code <= 3) {
+                this._displayError(msg[code-1]);    
+            } else {
+                this._displayError(`Unknown geolocation error code ${code}.`);
+            }
+        });
+
+        // from original gps-camera component
+        // if Safari
+        if (!!navigator.userAgent.match(/Version\/[\d.]+.*Safari/)) {
+            this._setupSafariOrientationPermissions();
+        }
+    },
+
+    update: function(oldData) {
+        this.threeLoc.setGpsOptions({
+            gpsMinAccuracy: this.data.positionMinAccuracy,
+            gpsMinDistance: this.data.gpsMinDistance,
+        });
+        if((this.data.simulateLatitude !== 0 || this.data.simulateLongitude !== 0) && (this.data.simulateLatitude != oldData.simulateLatitude || this.data.simulateLongitude != oldData.simulateLongitude)) {
+
+            this.threeLoc.fakeGps(
+                this.data.simulateLongitude,
+                this.data.simulateLatitude
+            );
+            this.data.simulateLatitude = 0;
+            this.data.simulateLongitude = 0;
+        }
+        if(this.data.simulateAltitude > -Number.MAX_VALUE) {
+            this.threeLoc.setElevation(this.data.simulateAltitude + 1.6);
+        }
+    },
+
+    play: function() {
+        if(this.data.simulateLatitude === 0 && this.data.simulateLongitude === 0) {
+            this.threeLoc.startGps();
+        }
+    },
+
+    pause: function() {
+        this.threeLoc.stopGps();
+    },
+
+    _sendGpsUpdateEvent: function(lon, lat) {
+        this.el.emit('gps-camera-update-position', {
+            position: {    
+                longitude: lon,
+                latitude: lat
+            }
+        });
+    },
+
+    _testForOrientationControls: function() {
+        const msg = 'WARNING - No orientation controls component, app will not respond to device rotation.';
+        if(!this.el.components['arjs-device-orientation-controls'] && !this.el.components['look-controls']) {
+            this._displayError(msg);
+        }
+    },
+
+    _displayError: function(error) {
+        const arjs = this.el.sceneEl.systems['arjs'];
+        if(arjs) {
+            arjs._displayErrorPopup(msg);
+        } else {
+            alert(msg);
+        }
+    },
+
+    // from original gps-camera component
+    _setupSafariOrientationPermissions: function() {
+        // iOS 13+
+        if (typeof DeviceOrientationEvent.requestPermission === 'function') {
+            var handler = function() {
+                console.log('Requesting device orientation permissions...')
+                DeviceOrientationEvent.requestPermission();
+                document.removeEventListener('touchend', handler);
+            };
+
+            document.addEventListener('touchend', function() { handler() }, false);
+
+            this.el.sceneEl.systems['arjs']._displayErrorPopup('After camera permission prompt, please tap the screen to activate geolocation.');
+        } else {
+            var timeout = setTimeout(function() {
+                this.el.sceneEl.systems['arjs']._displayErrorPopup('Please enable device orientation in Settings > Safari > Motion & Orientation Access.');
+            }, 750);
+            window.addEventListener(eventName, function() {
+                clearTimeout(timeout);
+            });
+        }
+    }
+});
diff --git a/aframe/src/new-location-based/gps-new-entity-place.js b/aframe/src/new-location-based/gps-new-entity-place.js
@@ -0,0 +1,32 @@
+import * as AFRAME from 'aframe';
+
+AFRAME.registerComponent('gps-new-entity-place', {
+    schema: {
+        longitude: {
+            type: 'number',
+            default: 0
+        },
+        latitude: {
+            type: 'number',
+            default: 0
+        }
+    },
+
+    init: function() {
+        const camera = document.querySelector("[gps-new-camera]");
+        if(!camera.components['gps-new-camera']) {
+            console.error('gps-new-camera not initialised');
+            return;
+        }
+        this._cameraGps = camera.components['gps-new-camera'];
+    },
+
+    update: function() {
+        const projCoords = this._cameraGps.threeLoc.lonLatToWorldCoords(this.data.longitude, this.data.latitude);
+        this.el.object3D.position.set(
+            projCoords[0],
+            this.el.object3D.position.y, 
+            projCoords[1]
+        );
+    }
+});
diff --git a/aframe/src/new-location-based/index.js b/aframe/src/new-location-based/index.js
@@ -0,0 +1,4 @@
+import '../location-based/arjs-webcam-texture'
+import './gps-new-camera'
+import './gps-new-entity-place'
+import './arjs-device-orientation-controls'