Startsida Utforska Hjälp
Registrera dig Logga in
Patrick192
/
ar-navigation
1
0
Fork 0
Filer Ärenden 0 Pull-förfrågningar 0 Wiki
Bläddra i källkod

Last upload Patrick

Patrick Bozic 3 år sedan
förälder
dd0a5620f4
incheckning
da322f3a71
33 ändrade filer med 1302 tillägg och 12937 borttagningar
Delad Vy Visa Diff Statistik
  1. 0 3
      .browserslistrc
  2. 0 17
      .eslintrc.js
  3. BIN
      AR.js.zip
  4. 0 24
      README.md
  5. 0 5
      babel.config.js
  6. 36 0
      css/style.css
  7. 60 0
      index.html
  8. 73 11
      public/js/old/aframe-ar-nft.js
  9. 368 0
      js/aframe-curve-component.js
  10. 0 0
      js/aframe-look-at-component.min.js
  11. 372 0
      js/aframe-route-component.js
  12. 0 0
      js/aframe.min.js
  13. 0 0
      js/aframe.min.js.map
  14. 160 0
      js/app.js
  15. 3 0
      js/axios.min.js
  16. 1 0
      js/axios.min.map
  17. 75 0
      js/camera-select.js
  18. 154 0
      js/coordtransform.js
  19. 0 12284
      package-lock.json
  20. 0 28
      package.json
  21. BIN
      public/favicon.ico
  22. 0 21
      public/index.html
  23. 0 1
      public/js/aframe-ar.js
  24. 0 307
      public/js/old/aframe-route.js
  25. 0 27
      src/App.vue
  26. 0 1
      src/assets/js/aframe-ar.js
  27. BIN
      src/assets/logo.png
  28. 0 109
      src/components/Navigation.vue
  29. 0 29
      src/main.js
  30. 0 6
      src/utils/http.js
  31. 0 24
      ssl-cert/cert.pem
  32. 0 28
      ssl-cert/key.pem
  33. 0 12
      vue.config.js

+ 0 - 3
.browserslistrc
Visa fil 

@@ -1,3 +0,0 @@
 
-> 1%
 
-last 2 versions
 
-not dead

+ 0 - 17
.eslintrc.js
Visa fil 

@@ -1,17 +0,0 @@
 
-module.exports = {
 
-  root: true,
 
-  env: {
 
-    node: true
 
-  },
 
-  'extends': [
 
-    'plugin:vue/essential',
 
-    'eslint:recommended'
 
-  ],
 
-  parserOptions: {
 
-    parser: 'babel-eslint'
 
-  },
 
-  rules: {
 
-    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
 
-    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
 
-  }
 
-}

BIN
AR.js.zip
Visa fil


+ 0 - 24
README.md
Visa fil 

@@ -1,24 +0,0 @@
 
-# ar-navigation
 
-
 
-## Project setup
 
-```
 
-npm install
 
-```
 
-
 
-### Compiles and hot-reloads for development
 
-```
 
-npm run serve
 
-```
 
-
 
-### Compiles and minifies for production
 
-```
 
-npm run build
 
-```
 
-
 
-### Lints and fixes files
 
-```
 
-npm run lint
 
-```
 
-
 
-### Customize configuration
 
-See [Configuration Reference](https://cli.vuejs.org/config/).

+ 0 - 5
babel.config.js
Visa fil 

@@ -1,5 +0,0 @@
 
-module.exports = {
 
-  presets: [
 
-    '@vue/cli-plugin-babel/preset'
 
-  ]
 
-}

+ 36 - 0
css/style.css
Visa fil 

@@ -0,0 +1,36 @@
 
+.controls {
 
+  position: absolute;
 
+  top: 0;
 
+  left: 0;
 
+  width: 100vw;
 
+  height: 130px;
 
+  z-index: 999;
 
+  /* display: flex;
 
+  align-items: center;
 
+  justify-content: center; */
 
+  background-color: lightgray;
 
+}
 
+
 
+.controls > ul {
 
+  list-style: none;
 
+  margin: 0;
 
+  padding: 0;
 
+}
 
+
 
+#button {
 
+  width: calc(40vw - 10px);
 
+  height: 50px;
 
+  margin: 5px;
 
+}
 
+
 
+#select {
 
+  width: calc(40vw - 10px);
 
+  margin: 5px;
 
+  height: 50px;
 
+}
 
+
 
+#output {
 
+  
+  
+  width: 100vw;
 
+}

+ 60 - 0
index.html
Visa fil 

@@ -0,0 +1,60 @@
 
+<!DOCTYPE html>
 
+<html>
 
+  <head>
 
+    <meta charset="utf-8" />
 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 
+    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
 
+    <title>GeoAR.js demo</title>
 
+    <link rel="stylesheet" href="./css/style.css">
 
+    <script src="./js/aframe.min.js"></script>
 
+    <script src="./js/aframe-look-at-component.min.js"></script>
 
+    <script src="./js/aframe-curve-component.js"></script>
 
+    <script src="./js/aframe-ar-nft.js"></script>
 
+    <!-- <script src="./js/aframe-route-component.js"></script> -->
 
+    <script src="./js/axios.min.js"></script>
 
+    <script src="./js/coordtransform.js"></script>
 
+  </head>
 
+
 
+  <body style="margin: 0; overflow: hidden;">
 
+
 
+    
+    <!-- Camera select -->
 
+    <div class="controls">
 
+      <ul>
 
+        <li>
 
+          <button id="button">Use camera</button>
 
+          <select id="select">
 
+            <option></option>
 
+          </select>
 
+        </li>
 
+        <li>
 
+          Latitude: <span id="latitude"></span><br/>
 
+          Longitude: <span id="longitude"></span><br/>
 
+          Y-Rotation: <span id="y-rotation"></span>
 
+        </li>
 
+        
+      </ul>
 
+      <div id="output"></div>
 
+    </div>
 
+
 
+    <a-scene
 
+      id="scene"
 
+      vr-mode-ui="enabled: false"
 
+      embedded
 
+      arjs="sourceType: webcam; debugUIEnabled: false;"
 
+    >
 
+
 
+      <!-- <a-curve id="track1">
 
+        <a-curve-point position="0 0 -3"></a-curve-point>
 
+        <a-curve-point position="1 1 -3"></a-curve-point>
 
+      </a-curve>
 
+    
+      <a-draw-curve curveref="#track1" material="shader: line; color: blue;"></a-draw-curve> -->
 
+
 
+      <a-camera gps-camera rotation-reader> </a-camera>
 
+    </a-scene>
 
+
 
+    <script src="./js/app.js"></script>
 
+    <script src="./js/camera-select.js"></script>
 
+  </body>
 
+</html>

+ 73 - 11
public/js/old/aframe-ar-nft.js
Visa fil 

@@ -1045,8 +1045,9 @@ ARjs.Context = THREEx.ArToolkitContext = function (parameters, sourceParameters)
 
         // tune the maximum rate of pose detection in the source image
 
         maxDetectionRate: 60,
 
         // resolution of at which we detect pose in the source image
 
-        canvasWidth: 640,
 
-        canvasHeight: 480,
 
+        // Patrick
 
+        canvasWidth: 1344,
 
+        canvasHeight: 2772,
 
 
         // the patternRatio inside the artoolkit marker - artoolkit only
 
         patternRatio: 0.5,
 
@@ -1398,6 +1399,10 @@ ARjs.Profile.prototype.performance = function (label) {
 
     } else {
 
         console.assert(false, 'unknonwn label ' + label)
 
     }
 
+// Patrick
 
+    this.contextParameters.canvasWidth = 1344;
 
+    this.contextParameters.canvasHeight = 2772;
 
+//
 
     return this
 
 }
 
 
@@ -1673,6 +1678,15 @@ ARjs.Source.prototype._initSourceWebcam = function (onReady, onError) {
 
             }
 
         };
 
 
+// // CUSTOM CODE START
 
+// var backCam2 = devices.filter(d=>{
 
+//   return d.label && d.label == "camera2 0, facing back";
 
+//   })
 
+//   if (backCam2.length) {
 
+//   userMediaConstraints.video.deviceId = backCam2[0].deviceId
 
+//   }
 
+//   // CUSTOM CODE END`
 
+
 
         if (null !== _this.parameters.deviceId) {
 
             userMediaConstraints.video.deviceId = {
 
                 exact: _this.parameters.deviceId
 
@@ -4717,6 +4731,7 @@ AFRAME.registerComponent('gps-camera', {
 
         },
 
     },
 
     update: function() {
 
+      console.log('update');
 
         if (this.data.simulateLatitude !== 0 && this.data.simulateLongitude !== 0) {
 
             localPosition = Object.assign({}, this.currentCoords || {});
 
             localPosition.longitude = this.data.simulateLongitude;
 
@@ -4730,6 +4745,7 @@ AFRAME.registerComponent('gps-camera', {
 
         }
 
     },
 
     init: function () {
 
+      console.log('init');
 
         if (!this.el.components['arjs-look-controls'] && !this.el.components['look-controls']) {
 
             return;
 
         }
 
@@ -4778,8 +4794,9 @@ AFRAME.registerComponent('gps-camera', {
 
         window.addEventListener(eventName, this._onDeviceOrientation, false);
 
 
     },
 
-
 
+// this one runs
 
     play: function() {
 
+      console.log('play');
 
         if (this.data.simulateLatitude !== 0 && this.data.simulateLongitude !== 0) {
 
             localPosition.latitude = this.data.simulateLatitude;
 
             localPosition.longitude = this.data.simulateLongitude;
 
@@ -4790,13 +4807,34 @@ AFRAME.registerComponent('gps-camera', {
 
             this._updatePosition();
 
         } else {
 
             this._watchPositionId = this._initWatchGPS(function (position) {
 
+              
+              // convert to Chinese system
 
+                var cPos = undefined;
 
+
 
+                if(coordtransform) {
 
+                  cPos = coordtransform.wgs84togcj02(position.coords.longitude, position.coords.latitude);
 
+                } else {
 
+                  console.error('coordtransform.js unavailable. Using wgs84 projection.');
 
+                }
 
+
 
                 var localPosition = {
 
-                    latitude: position.coords.latitude,
 
-                    longitude: position.coords.longitude,
 
-                    altitude: position.coords.altitude,
 
-                    accuracy: position.coords.accuracy,
 
-                    altitudeAccuracy: position.coords.altitudeAccuracy,
 
+                  latitude: cPos[1] || position.coords.latitude,
 
+                  longitude: cPos[0] || position.coords.longitude,
 
+                  altitude: position.coords.altitude,
 
+                  accuracy: position.coords.accuracy,
 
+                  altitudeAccuracy: position.coords.altitudeAccuracy,
 
                 };
 
+
 
+                //fire event
 
+                window.dispatchEvent(new CustomEvent('gps-position-update', {detail: localPosition}));
 
+
 
+                // var localPosition = {
 
+                //     latitude: position.coords.latitude,
 
+                //     longitude: position.coords.longitude,
 
+                //     altitude: position.coords.altitude,
 
+                //     accuracy: position.coords.accuracy,
 
+                //     altitudeAccuracy: position.coords.altitudeAccuracy,
 
+                // };
 
           
                 if (this.data.simulateAltitude !== 0) {
 
                     localPosition.altitude = this.data.simulateAltitude;
 
@@ -4820,6 +4858,7 @@ AFRAME.registerComponent('gps-camera', {
 
     },
 
 
     tick: function () {
 
+      // console.log('tick');
 
         if (this.heading === null) {
 
             return;
 
         }
 
@@ -4892,7 +4931,7 @@ AFRAME.registerComponent('gps-camera', {
 
         return navigator.geolocation.watchPosition(onSuccess, onError, {
 
             enableHighAccuracy: true,
 
             maximumAge: this.data.gpsTimeInterval,
 
-            timeout: 27000,
 
+            timeout: 30000,
 
         });
 
     },
 
 
@@ -4902,6 +4941,7 @@ AFRAME.registerComponent('gps-camera', {
 
      * @returns {void}
 
      */
 
     _updatePosition: function () {
 
+      console.log('_updatePosition');
 
         // don't update if accuracy is not good enough
 
         if (this.currentCoords.accuracy > this.data.positionMinAccuracy) {
 
             if (this.data.alert && !document.getElementById('alert-popup')) {
 
@@ -4955,7 +4995,9 @@ AFRAME.registerComponent('gps-camera', {
 
 
         // update position
 
         this.el.setAttribute('position', position);
 
-
 
+// Camera update position
 
+        
+        // put this into tick
 
         window.dispatchEvent(new CustomEvent('gps-camera-update-position', { detail: { position: this.currentCoords, origin: this.originCoords } }));
 
     },
 
     /**
 
@@ -5075,6 +5117,8 @@ AFRAME.registerComponent('gps-camera', {
 
         var yawRotation = THREE.Math.radToDeg(this.lookControls.yawObject.rotation.y);
 
         var offset = (heading - (cameraRotation - yawRotation)) % 360;
 
         this.lookControls.yawObject.rotation.y = THREE.Math.degToRad(offset);
 
+        // console.log('Y-Angle', heading);
 
+        window.dispatchEvent(new CustomEvent('update-heading', {detail: heading}));
 
     },
 
     
     _onGpsEntityPlaceAdded: function() {
 
@@ -5197,6 +5241,9 @@ AFRAME.registerComponent('gps-entity-place', {
 
 
         // update element's position in 3D world
 
         this.el.setAttribute('position', position);
 
+
 
+        // for aframe-curve-component to create the path
 
+        this.el.emit("curve-point-change");
 
     },
 
 });
 
 
@@ -5458,7 +5505,7 @@ AFRAME.registerComponent('gps-projected-camera', {
 
         return navigator.geolocation.watchPosition(onSuccess, onError, {
 
             enableHighAccuracy: true,
 
             maximumAge: this.data.gpsTimeInterval,
 
-            timeout: 27000,
 
+            timeout: 3600000,
 
         });
 
     },
 
 
@@ -5820,6 +5867,21 @@ AFRAME.registerComponent('gps-projected-entity-place', {
 
         }); 
     },
 
 });
 
+
 
+/**
 
+ * Format distances string
 
+ *
 
+ * @param {String} distance
 
+ */
 
+function formatDistance(distance) {
 
+    distance = distance.toFixed(0);
 
+
 
+    if (distance >= 1000) {
 
+        return (distance / 1000) + ' kilometers';
 
+    }
 
+
 
+    return distance + ' meters';
 
+};
 
 AFRAME.registerSystem('arjs', {
 
     schema: {
 
         trackingMethod: {

+ 368 - 0
js/aframe-curve-component.js
Visa fil 

@@ -0,0 +1,368 @@
 
+/******/ (function(modules) { // webpackBootstrap
 
+/******/ 	// The module cache
 
+/******/ 	var installedModules = {};
 
+
 
+/******/ 	// The require function
 
+/******/ 	function __webpack_require__(moduleId) {
 
+
 
+/******/ 		// Check if module is in cache
 
+/******/ 		if(installedModules[moduleId])
 
+/******/ 			return installedModules[moduleId].exports;
 
+
 
+/******/ 		// Create a new module (and put it into the cache)
 
+/******/ 		var module = installedModules[moduleId] = {
 
+/******/ 			exports: {},
 
+/******/ 			id: moduleId,
 
+/******/ 			loaded: false
 
+/******/ 		};
 
+
 
+/******/ 		// Execute the module function
 
+/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
 
+
 
+/******/ 		// Flag the module as loaded
 
+/******/ 		module.loaded = true;
 
+
 
+/******/ 		// Return the exports of the module
 
+/******/ 		return module.exports;
 
+/******/ 	}
 
+
 
+
 
+/******/ 	// expose the modules object (__webpack_modules__)
 
+/******/ 	__webpack_require__.m = modules;
 
+
 
+/******/ 	// expose the module cache
 
+/******/ 	__webpack_require__.c = installedModules;
 
+
 
+/******/ 	// __webpack_public_path__
 
+/******/ 	__webpack_require__.p = "";
 
+
 
+/******/ 	// Load entry module and return exports
 
+/******/ 	return __webpack_require__(0);
 
+/******/ })
 
+/************************************************************************/
 
+/******/ ([
 
+/* 0 */
 
+/***/ (function(module, exports) {
 
+
 
+	/* global AFRAME */
 
+
 
+	if (typeof AFRAME === 'undefined') {
 
+	    throw new Error('Component attempted to register before AFRAME was available.');
 
+	}
 
+
 
+	/**
 
+	 * Curve component for A-Frame to deal with spline curves
 
+	 */
 
+	var zAxis = new THREE.Vector3(0, 0, 1);
 
+	var degToRad = THREE.Math.degToRad;
 
+
 
+	AFRAME.registerComponent('curve-point', {
 
+
 
+	    //dependencies: ['position'],
 
+
 
+	    schema: {},
 
+
 
+	    init: function () {
 
+	        this.el.addEventListener("componentchanged", this.changeHandler.bind(this));
 
+	        this.el.emit("curve-point-change");
 
+	    },
 
+
 
+	    changeHandler: function (event) {
 
+	        if (event.detail.name == "position") {
 
+	            this.el.emit("curve-point-change");
 
+	        }
 
+	    }
 
+
 
+	});
 
+
 
+	AFRAME.registerComponent('curve', {
 
+
 
+	    //dependencies: ['curve-point'],
 
+
 
+	    schema: {
 
+	        type: {
 
+	            type: 'string',
 
+	            default: 'CurvePath',
 
+	            oneOf: ['CatmullRom', 'CubicBezier', 'QuadraticBezier', 'Line', 'CurvePath']
 
+	        },
 
+	        closed: {
 
+	            type: 'boolean',
 
+	            default: false
 
+	        }
 
+	    },
 
+
 
+	    init: function () {
 
+	        this.pathPoints = null;
 
+	        this.curve = null;
 
+
 
+	        this.el.addEventListener("curve-point-change", this.update.bind(this));
 
+	    },
 
+
 
+	    update: function (oldData) {
 
+
 
+	        this.points = Array.from(this.el.querySelectorAll("a-curve-point, [curve-point]"));
 
+
 
+	        if (this.points.length <= 1) {
 
+	            console.warn("At least 2 curve-points needed to draw a curve");
 
+	            this.curve = null;
 
+	        } else {
 
+	            // Get Array of Positions from Curve-Points
 
+	            var pointsArray = this.points.map(function (point) {
 
+
 
+	                if (point.x !== undefined && point.y !== undefined && point.z !== undefined) {
 
+	                    return point;
 
+	                }
 
+
 
+	                return point.object3D.getWorldPosition();
 
+	            });
 
+
 
+	            // Update the Curve if either the Curve-Points or other Properties changed
 
+	            if (!AFRAME.utils.deepEqual(pointsArray, this.pathPoints) || (oldData !== 'CustomEvent' && !AFRAME.utils.deepEqual(this.data, oldData))) {
 
+	                this.curve = null;
 
+
 
+	                this.pathPoints = pointsArray;
 
+
 
+	                // Create Curve
 
+	                switch (this.data.type) {
 
+	                    case 'CubicBezier':
 
+	                        if (this.pathPoints.length != 4) {
 
+	                            throw new Error('The Three constructor of type CubicBezierCurve3 requires 4 points');
 
+	                        }
 
+	                        this.curve = new THREE.CubicBezierCurve3(this.pathPoints[0], this.pathPoints[1], this.pathPoints[2], this.pathPoints[3]);
 
+	                        break;
 
+	                    case 'QuadraticBezier':
 
+	                        if (this.pathPoints.length != 3) {
 
+	                            throw new Error('The Three constructor of type QuadraticBezierCurve3 requires 3 points');
 
+	                        }
 
+	                        this.curve = new THREE.QuadraticBezierCurve3(this.pathPoints[0], this.pathPoints[1], this.pathPoints[2]);
 
+	                        break;
 
+	                    case 'Line':
 
+	                        if (this.pathPoints.length != 2) {
 
+	                            throw new Error('The Three constructor of type LineCurve3 requires 2 points');
 
+	                        }
 
+	                        this.curve = new THREE.LineCurve3(this.pathPoints[0], this.pathPoints[1]);
 
+	                        break;
 
+	                    case 'CatmullRom':
 
+	                        this.curve = new THREE.CatmullRomCurve3(this.pathPoints);
 
+	                        break;
 
+	                    case 'Spline':
 
+	                        this.curve = new THREE.SplineCurve3(this.pathPoints);
 
+	                        break;
 
+
 
+                      // Patrick
 
+                      case 'CurvePath':
 
+                        this.curve = new THREE.CurvePath();
 
+                        for(var i = 0, p = this.pathPoints.length - 1; i < p; i++) {
 
+                          var curveSegment = new THREE.LineCurve3(this.pathPoints[i], this.pathPoints[i + 1]);
 
+                          this.curve.add(curveSegment);
 
+                        }
 
+                        
+                        
+	                        break;
 
+	                    default:
 
+	                        throw new Error('No Three constructor of type (case sensitive): ' + this.data.type + 'Curve3');
 
+	                }
 
+
 
+	                this.curve.closed = this.data.closed;
 
+
 
+	                this.el.emit('curve-updated');
 
+	            }
 
+	        }
 
+
 
+	    },
 
+
 
+	    remove: function () {
 
+	        this.el.removeEventListener("curve-point-change", this.update.bind(this));
 
+	    },
 
+
 
+	    closestPointInLocalSpace: function closestPoint(point, resolution, testPoint, currentRes) {
 
+	        if (!this.curve) throw Error('Curve not instantiated yet.');
 
+	        resolution = resolution || 0.1 / this.curve.getLength();
 
+	        currentRes = currentRes || 0.5;
 
+	        testPoint = testPoint || 0.5;
 
+	        currentRes /= 2;
 
+	        var aTest = testPoint + currentRes;
 
+	        var bTest = testPoint - currentRes;
 
+	        var a = this.curve.getPointAt(aTest);
 
+	        var b = this.curve.getPointAt(bTest);
 
+	        var aDistance = a.distanceTo(point);
 
+	        var bDistance = b.distanceTo(point);
 
+	        var aSmaller = aDistance < bDistance;
 
+	        if (currentRes < resolution) {
 
+
 
+	            var tangent = this.curve.getTangentAt(aSmaller ? aTest : bTest);
 
+	            if (currentRes < resolution) return {
 
+	                result: aSmaller ? aTest : bTest,
 
+	                location: aSmaller ? a : b,
 
+	                distance: aSmaller ? aDistance : bDistance,
 
+	                normal: normalFromTangent(tangent),
 
+	                tangent: tangent
 
+	            };
 
+	        }
 
+	        if (aDistance < bDistance) {
 
+	            return this.closestPointInLocalSpace(point, resolution, aTest, currentRes);
 
+	        } else {
 
+	            return this.closestPointInLocalSpace(point, resolution, bTest, currentRes);
 
+	        }
 
+	    }
 
+	});
 
+
 
+
 
+	var tempQuaternion = new THREE.Quaternion();
 
+
 
+	function normalFromTangent(tangent) {
 
+	    var lineEnd = new THREE.Vector3(0, 1, 0);
 
+	    tempQuaternion.setFromUnitVectors(zAxis, tangent);
 
+	    lineEnd.applyQuaternion(tempQuaternion);
 
+	    return lineEnd;
 
+	}
 
+
 
+	AFRAME.registerShader('line', {
 
+	    schema: {
 
+	        color: {default: '#ff0000'},
 
+	    },
 
+
 
+	    init: function (data) {
 
+	        this.material = new THREE.LineBasicMaterial(data);
 
+	    },
 
+
 
+	    update: function (data) {
 
+	        this.material = new THREE.LineBasicMaterial(data);
 
+	    },
 
+	});
 
+
 
+	AFRAME.registerComponent('draw-curve', {
 
+
 
+	    //dependencies: ['curve', 'material'],
 
+
 
+	    schema: {
 
+	        curve: {type: 'selector'}
 
+	    },
 
+
 
+	    init: function () {
 
+        console.log(this.data);
 
+	        this.data.curve.addEventListener('curve-updated', this.update.bind(this));
 
+	    },
 
+
 
+	    update: function () {
 
+	        if (this.data.curve) {
 
+	            this.curve = this.data.curve.components.curve;
 
+	        }
 
+
 
+	        if (this.curve && this.curve.curve) {
 
+	            var lineGeometry = new THREE.BufferGeometry().setFromPoints(this.curve.curve.getPoints(this.curve.curve.getPoints().length * 10));
 
+	            var mesh = this.el.getOrCreateObject3D('mesh', THREE.Line);
 
+	            lineMaterial = mesh.material ? mesh.material : new THREE.LineBasicMaterial({
 
+	                color: "#ff0000"
 
+	            });
 
+
 
+	            this.el.setObject3D('mesh', new THREE.Line(lineGeometry, lineMaterial));
 
+	        }
 
+	    },
 
+
 
+	    remove: function () {
 
+	        this.data.curve.removeEventListener('curve-updated', this.update.bind(this));
 
+	        this.el.getObject3D('mesh').geometry = new THREE.Geometry();
 
+	    }
 
+
 
+	});
 
+
 
+	AFRAME.registerComponent('clone-along-curve', {
 
+
 
+	    //dependencies: ['curve'],
 
+
 
+	    schema: {
 
+	        curve: {type: 'selector'},
 
+	        spacing: {default: 1},
 
+	        rotation: {
 
+	            type: 'vec3',
 
+	            default: '0 0 0'
 
+	        },
 
+	        scale: {
 
+	            type: 'vec3',
 
+	            default: '1 1 1'
 
+	        }
 
+	    },
 
+
 
+	    init: function () {
 
+	        this.el.addEventListener('model-loaded', this.update.bind(this));
 
+	        this.data.curve.addEventListener('curve-updated', this.update.bind(this));
 
+	    },
 
+
 
+	    update: function () {
 
+	        this.remove();
 
+
 
+	        if (this.data.curve) {
 
+	            this.curve = this.data.curve.components.curve;
 
+	        }
 
+console.log(this.curve);
 
+	        if (!this.el.getObject3D('clones') && this.curve && this.curve.curve) {
 
+	            var mesh = this.el.getObject3D('mesh');
 
+
 
+	            var length = this.curve.curve.getLength();
 
+	            var start = 0;
 
+	            var counter = start;
 
+
 
+	            var cloneMesh = this.el.getOrCreateObject3D('clones', THREE.Group);
 
+
 
+	            var parent = new THREE.Object3D();
 
+	            mesh.scale.set(this.data.scale.x, this.data.scale.y, this.data.scale.z);
 
+	            mesh.rotation.set(degToRad(this.data.rotation.x), degToRad(this.data.rotation.y), degToRad(this.data.rotation.z));
 
+	            mesh.rotation.order = 'YXZ';
 
+
 
+	            parent.add(mesh);
 
+
 
+	            while (counter <= length) {
 
+	                var child = parent.clone(true);
 
+
 
+	                child.position.copy(this.curve.curve.getPointAt(counter / length));
 
+
 
+	                tangent = this.curve.curve.getTangentAt(counter / length).normalize();
 
+
 
+	                child.quaternion.setFromUnitVectors(zAxis, tangent);
 
+
 
+	                cloneMesh.add(child);
 
+
 
+	                counter += this.data.spacing;
 
+	            }
 
+	        }
 
+	    },
 
+
 
+	    remove: function () {
 
+	        this.curve = null;
 
+	        if (this.el.getObject3D('clones')) {
 
+	            this.el.removeObject3D('clones');
 
+	        }
 
+	    }
 
+
 
+	});
 
+
 
+	AFRAME.registerPrimitive('a-draw-curve', {
 
+	    defaultComponents: {
 
+	        'draw-curve': {},
 
+	    },
 
+	    mappings: {
 
+	        curveref: 'draw-curve.curve',
 
+	    }
 
+	});
 
+
 
+	AFRAME.registerPrimitive('a-curve-point', {
 
+	    defaultComponents: {
 
+	        'curve-point': {},
 
+	    },
 
+	    mappings: {}
 
+	});
 
+
 
+	AFRAME.registerPrimitive('a-curve', {
 
+	    defaultComponents: {
 
+	        'curve': {}
 
+	    },
 
+
 
+	    mappings: {
 
+	        type: 'curve.type',
 
+	    }
 
+	});
 
+
 
+
 
+/***/ })
 
+/******/ ]);

public/js/old/aframe-look-at-component.min.js → js/aframe-look-at-component.min.js
Visa fil


+ 372 - 0
js/aframe-route-component.js
Visa fil 

@@ -0,0 +1,372 @@
 
+/******/ (function(modules) { // webpackBootstrap
 
+/******/ 	// The module cache
 
+/******/ 	var installedModules = {};
 
+
 
+/******/ 	// The require function
 
+/******/ 	function __webpack_require__(moduleId) {
 
+
 
+/******/ 		// Check if module is in cache
 
+/******/ 		if(installedModules[moduleId])
 
+/******/ 			return installedModules[moduleId].exports;
 
+
 
+/******/ 		// Create a new module (and put it into the cache)
 
+/******/ 		var module = installedModules[moduleId] = {
 
+/******/ 			exports: {},
 
+/******/ 			id: moduleId,
 
+/******/ 			loaded: false
 
+/******/ 		};
 
+
 
+/******/ 		// Execute the module function
 
+/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
 
+
 
+/******/ 		// Flag the module as loaded
 
+/******/ 		module.loaded = true;
 
+
 
+/******/ 		// Return the exports of the module
 
+/******/ 		return module.exports;
 
+/******/ 	}
 
+
 
+
 
+/******/ 	// expose the modules object (__webpack_modules__)
 
+/******/ 	__webpack_require__.m = modules;
 
+
 
+/******/ 	// expose the module cache
 
+/******/ 	__webpack_require__.c = installedModules;
 
+
 
+/******/ 	// __webpack_public_path__
 
+/******/ 	__webpack_require__.p = "";
 
+
 
+/******/ 	// Load entry module and return exports
 
+/******/ 	return __webpack_require__(0);
 
+/******/ })
 
+/************************************************************************/
 
+/******/ ([
 
+/* 0 */
 
+/***/ (function(module, exports) {
 
+
 
+	/* global AFRAME */
 
+
 
+	if (typeof AFRAME === 'undefined') {
 
+    throw new Error('Component attempted to register before AFRAME was available.');
 
+}
 
+
 
+var zAxis = new THREE.Vector3(0, 0, 1);
 
+var degToRad = THREE.Math.degToRad;
 
+
 
+AFRAME.registerComponent('route-point', {
 
+
 
+    //dependencies: ['position'],
 
+
 
+    schema: {},
 
+
 
+    init: function () {
 
+        this.el.addEventListener("componentchanged", this.changeHandler.bind(this));
 
+        this.el.emit("curve-point-change");
 
+    },
 
+
 
+    changeHandler: function (event) {
 
+        if (event.detail.name == "position") {
 
+            this.el.emit("curve-point-change");
 
+        }
 
+    }
 
+
 
+});
 
+
 
+AFRAME.registerComponent('curve', {
 
+
 
+    //dependencies: ['curve-point'],
 
+
 
+    schema: {
 
+        type: {
 
+            type: 'string',
 
+            default: 'CurvePath',
 
+            oneOf: ['CatmullRom', 'CubicBezier', 'QuadraticBezier', 'Line', 'CurvePath']
 
+        },
 
+        closed: {
 
+            type: 'boolean',
 
+            default: false
 
+        }
 
+    },
 
+
 
+    init: function () {
 
+        this.pathPoints = null;
 
+        this.curve = null;
 
+
 
+        this.el.addEventListener("curve-point-change", this.update.bind(this));
 
+    },
 
+
 
+    update: function (oldData) {
 
+
 
+        this.points = Array.from(this.el.querySelectorAll("a-curve-point, [curve-point]"));
 
+
 
+        if (this.points.length <= 1) {
 
+            console.warn("At least 2 curve-points needed to draw a curve");
 
+            this.curve = null;
 
+        } else {
 
+            // Get Array of Positions from Curve-Points
 
+            var pointsArray = this.points.map(function (point) {
 
+
 
+                if (point.x !== undefined && point.y !== undefined && point.z !== undefined) {
 
+                    return point;
 
+                }
 
+
 
+                return point.object3D.getWorldPosition();
 
+            });
 
+
 
+            // Update the Curve if either the Curve-Points or other Properties changed
 
+            if (!AFRAME.utils.deepEqual(pointsArray, this.pathPoints) || (oldData !== 'CustomEvent' && !AFRAME.utils.deepEqual(this.data, oldData))) {
 
+                this.curve = null;
 
+
 
+                this.pathPoints = pointsArray;
 
+
 
+                // Create Curve
 
+                switch (this.data.type) {
 
+                    case 'CubicBezier':
 
+                        if (this.pathPoints.length != 4) {
 
+                            throw new Error('The Three constructor of type CubicBezierCurve3 requires 4 points');
 
+                        }
 
+                        this.curve = new THREE.CubicBezierCurve3(this.pathPoints[0], this.pathPoints[1], this.pathPoints[2], this.pathPoints[3]);
 
+                        break;
 
+
 
+
 
+                    case 'QuadraticBezier':
 
+                        if (this.pathPoints.length != 3) {
 
+                            throw new Error('The Three constructor of type QuadraticBezierCurve3 requires 3 points');
 
+                        }
 
+                        this.curve = new THREE.QuadraticBezierCurve3(this.pathPoints[0], this.pathPoints[1], this.pathPoints[2]);
 
+                        break;
 
+
 
+
 
+                    case 'Line':
 
+                        if (this.pathPoints.length != 2) {
 
+                            throw new Error('The Three constructor of type LineCurve3 requires 2 points');
 
+                        }
 
+                        this.curve = new THREE.LineCurve3(this.pathPoints[0], this.pathPoints[1]);
 
+                        break;
 
+
 
+
 
+                    case 'CatmullRom':
 
+                        this.curve = new THREE.CatmullRomCurve3(this.pathPoints);
 
+                        break;
 
+                    case 'Spline':
 
+                        this.curve = new THREE.SplineCurve3(this.pathPoints);
 
+                        break;
 
+                        
+
 
+                    // Patrick
 
+                    case 'CurvePath':
 
+                      this.curve = new THREE.CurvePath();
 
+                      for(var i = 0, p = this.pathPoints.length - 1; i < p; i++) {
 
+                        var curveSegment = new THREE.LineCurve3(this.pathPoints[i], this.pathPoints[i + 1]);
 
+                        this.curve.add(curveSegment);
 
+                      }
 
+                      
+                      
+                        break;
 
+                    default:
 
+                        throw new Error('No Three constructor of type (case sensitive): ' + this.data.type + 'Curve3');
 
+                }
 
+
 
+                this.curve.closed = this.data.closed;
 
+
 
+                this.el.emit('curve-updated');
 
+            }
 
+        }
 
+
 
+    },
 
+
 
+    remove: function () {
 
+        this.el.removeEventListener("curve-point-change", this.update.bind(this));
 
+    },
 
+
 
+    closestPointInLocalSpace: function closestPoint(point, resolution, testPoint, currentRes) {
 
+        if (!this.curve) throw Error('Curve not instantiated yet.');
 
+        resolution = resolution || 0.1 / this.curve.getLength();
 
+        currentRes = currentRes || 0.5;
 
+        testPoint = testPoint || 0.5;
 
+        currentRes /= 2;
 
+        var aTest = testPoint + currentRes;
 
+        var bTest = testPoint - currentRes;
 
+        var a = this.curve.getPointAt(aTest);
 
+        var b = this.curve.getPointAt(bTest);
 
+        var aDistance = a.distanceTo(point);
 
+        var bDistance = b.distanceTo(point);
 
+        var aSmaller = aDistance < bDistance;
 
+        if (currentRes < resolution) {
 
+
 
+            var tangent = this.curve.getTangentAt(aSmaller ? aTest : bTest);
 
+            if (currentRes < resolution) return {
 
+                result: aSmaller ? aTest : bTest,
 
+                location: aSmaller ? a : b,
 
+                distance: aSmaller ? aDistance : bDistance,
 
+                normal: normalFromTangent(tangent),
 
+                tangent: tangent
 
+            };
 
+        }
 
+        if (aDistance < bDistance) {
 
+            return this.closestPointInLocalSpace(point, resolution, aTest, currentRes);
 
+        } else {
 
+            return this.closestPointInLocalSpace(point, resolution, bTest, currentRes);
 
+        }
 
+    }
 
+});
 
+
 
+
 
+var tempQuaternion = new THREE.Quaternion();
 
+
 
+function normalFromTangent(tangent) {
 
+    var lineEnd = new THREE.Vector3(0, 1, 0);
 
+    tempQuaternion.setFromUnitVectors(zAxis, tangent);
 
+    lineEnd.applyQuaternion(tempQuaternion);
 
+    return lineEnd;
 
+}
 
+
 
+AFRAME.registerShader('line', {
 
+    schema: {
 
+        color: {default: '#ff0000'},
 
+    },
 
+
 
+    init: function (data) {
 
+        this.material = new THREE.LineBasicMaterial(data);
 
+    },
 
+
 
+    update: function (data) {
 
+        this.material = new THREE.LineBasicMaterial(data);
 
+    },
 
+});
 
+
 
+AFRAME.registerComponent('draw-curve', {
 
+
 
+    //dependencies: ['curve', 'material'],
 
+
 
+    schema: {
 
+        curve: {type: 'selector'}
 
+    },
 
+
 
+    init: function () {
 
+      console.log(this.data);
 
+        this.data.curve.addEventListener('curve-updated', this.update.bind(this));
 
+    },
 
+
 
+    update: function () {
 
+        if (this.data.curve) {
 
+            this.curve = this.data.curve.components.curve;
 
+        }
 
+
 
+        if (this.curve && this.curve.curve) {
 
+            var lineGeometry = new THREE.BufferGeometry().setFromPoints(this.curve.curve.getPoints(this.curve.curve.getPoints().length * 10));
 
+            var mesh = this.el.getOrCreateObject3D('mesh', THREE.Line);
 
+            lineMaterial = mesh.material ? mesh.material : new THREE.LineBasicMaterial({
 
+                color: "#ff0000"
 
+            });
 
+
 
+            this.el.setObject3D('mesh', new THREE.Line(lineGeometry, lineMaterial));
 
+        }
 
+    },
 
+
 
+    remove: function () {
 
+        this.data.curve.removeEventListener('curve-updated', this.update.bind(this));
 
+        this.el.getObject3D('mesh').geometry = new THREE.Geometry();
 
+    }
 
+
 
+});
 
+
 
+AFRAME.registerComponent('clone-along-curve', {
 
+
 
+    //dependencies: ['curve'],
 
+
 
+    schema: {
 
+        curve: {type: 'selector'},
 
+        spacing: {default: 1},
 
+        rotation: {
 
+            type: 'vec3',
 
+            default: '0 0 0'
 
+        },
 
+        scale: {
 
+            type: 'vec3',
 
+            default: '1 1 1'
 
+        }
 
+    },
 
+
 
+    init: function () {
 
+        this.el.addEventListener('model-loaded', this.update.bind(this));
 
+        this.data.curve.addEventListener('curve-updated', this.update.bind(this));
 
+    },
 
+
 
+    update: function () {
 
+        this.remove();
 
+
 
+        if (this.data.curve) {
 
+            this.curve = this.data.curve.components.curve;
 
+        }
 
+console.log(this.curve);
 
+        if (!this.el.getObject3D('clones') && this.curve && this.curve.curve) {
 
+            var mesh = this.el.getObject3D('mesh');
 
+
 
+            var length = this.curve.curve.getLength();
 
+            var start = 0;
 
+            var counter = start;
 
+
 
+            var cloneMesh = this.el.getOrCreateObject3D('clones', THREE.Group);
 
+
 
+            var parent = new THREE.Object3D();
 
+            mesh.scale.set(this.data.scale.x, this.data.scale.y, this.data.scale.z);
 
+            mesh.rotation.set(degToRad(this.data.rotation.x), degToRad(this.data.rotation.y), degToRad(this.data.rotation.z));
 
+            mesh.rotation.order = 'YXZ';
 
+
 
+            parent.add(mesh);
 
+
 
+            while (counter <= length) {
 
+                var child = parent.clone(true);
 
+
 
+                child.position.copy(this.curve.curve.getPointAt(counter / length));
 
+
 
+                tangent = this.curve.curve.getTangentAt(counter / length).normalize();
 
+
 
+                child.quaternion.setFromUnitVectors(zAxis, tangent);
 
+
 
+                cloneMesh.add(child);
 
+
 
+                counter += this.data.spacing;
 
+            }
 
+        }
 
+    },
 
+
 
+    remove: function () {
 
+        this.curve = null;
 
+        if (this.el.getObject3D('clones')) {
 
+            this.el.removeObject3D('clones');
 
+        }
 
+    }
 
+
 
+});
 
+
 
+AFRAME.registerPrimitive('a-draw-curve', {
 
+    defaultComponents: {
 
+        'draw-curve': {},
 
+    },
 
+    mappings: {
 
+        curveref: 'draw-curve.curve',
 
+    }
 
+});
 
+
 
+AFRAME.registerPrimitive('a-curve-point', {
 
+    defaultComponents: {
 
+        'curve-point': {},
 
+    },
 
+    mappings: {}
 
+});
 
+
 
+AFRAME.registerPrimitive('a-curve', {
 
+    defaultComponents: {
 
+        'curve': {}
 
+    },
 
+
 
+    mappings: {
 
+        type: 'curve.type',
 
+    }
 
+});
 
+
 
+
 
+/***/ })
 
+/******/ ]);

public/js/old/aframe.min.js → js/aframe.min.js
Visa fil


public/js/old/aframe.min.js.map → js/aframe.min.js.map
Visa fil


+ 160 - 0
js/app.js
Visa fil 

@@ -0,0 +1,160 @@
 
+
 
+
 
+let scene = document.querySelector('a-scene'),
 
+camera = document.querySelector('a-camera'),
 
+yRotation = document.querySelector('#y-rotation'),
 
+
 
+start = {lat: 22.364563, lon: 113.600967},
 
+end = {lat: 22.363379, lon: 113.598615},
 
+route = [],
 
+path = {},
 
+pathRecord = [],
 
+pathCreated = false;
 
+
 
+window.addEventListener('update-heading', function(data) {
 
+  yRotation.innerText = Math.floor(data.detail) + "°";
 
+});
 
+
 
+
 
+
 
+// if this is not accurate we need to hook it onto camera.tick
 
+window.addEventListener('gps-camera-update-position', function(data) {
 
+  // console.log('gps-camera-update-position', data);
 
+
 
+  let cameraPosition = [data.detail.position.latitude, data.detail.position.longitude];
 
+
 
+  // if(route.length > 1) {
 
+  //   route[0] = cameraPosition;
 
+  // }
 
+
 
+  if(pathCreated) {
 
+    // update path
 
+  } else if(!pathCreated && route.length > 1) {
 
+    // put camera position at route[0]
 
+    route[0] = cameraPosition;
 
+    path = createPath(route);
 
+  }
 
+});
 
+
 
+window.addEventListener('gps-position-update', function(position) {
 
+  // console.log(position);
 
+});
 
+
 
+// function createPathRoot(position) {
 
+//   let root = document.createElement('a-curve-point');
 
+//   root.setAttribute('gps-entity-place', `latitude: ${lat}; longitude: ${lon};`);
 
+//   path.appendChild(curvePoint);
 
+// }
 
+
 
+function getRoute(start, end) {
 
+  axios.get('https://dev.virtualearth.net/REST/v1/Routes/Walking', {
 
+    params: {
 
+      'wayPoint.1':      `${start.lat},${start.lon}`,
 
+      'wayPoint.2':      `${end.lat},${end.lon}`,
 
+      'routeAttributes': 'routePath',
 
+      'key':             'Ahwqh1mUNte20qOAphNKU-hSGsmEnavPTOU-749M7MJl7MYIdsTmL4XFoSwS4QvP'
 
+    }
 
+  }).then(response => {
 
+    if(response.status === 200) {
 
+      route = response.data.resourceSets[0].resources[0].routePath.line.coordinates;
 
+      
+      // drawPath(route);
 
+    } else {
 
+      throw new Error(response.status);
 
+    }
 
+  })
 
+}
 
+
 
+function createBoxes(route) {
 
+  if(route.length) {
 
+    console.log(route);
 
+    route.forEach(coordinate => {
 
+      const lat = coordinate[0];
 
+      const lon = coordinate[1];
 
+
 
+      const placeText = document.createElement('a-box');
 
+      placeText.setAttribute('gps-entity-place', `latitude: ${lat}; longitude: ${lon};`);
 
+      // placeText.setAttribute('title', 'PATH');
 
+      placeText.setAttribute('scale', '5 5 5');
 
+
 
+      scene.appendChild(placeText);
 
+    });    
+  }
 
+}
 
+
 
+function createPath(route) {
 
+
 
+  let path = {}; // null
 
+
 
+  if(route.length > 1) {
 
+
 
+    const pathElement = document.createElement('a-curve');
 
+    pathElement.id = 'path';
 
+    scene.appendChild(pathElement);
 
+    path.el = pathElement;
 
+    path.points = [];
 
+
 
+    route.forEach(coordinate => {
 
+      const lat = coordinate[0];
 
+      const lon = coordinate[1];
 
+
 
+      let pointElement = document.createElement('a-curve-point');
 
+      pointElement.setAttribute('gps-entity-place', `latitude: ${lat}; longitude: ${lon};`);
 
+
 
+      pathElement.appendChild(pointElement);
 
+
 
+      path.points.push({el: pointElement, lat: lat, lon: lon});
 
+    });
 
+    
+
 
+    // const drawPath = document.createElement('a-draw-curve');
 
+    // drawPath.setAttribute('curveref', '#path');
 
+    // drawPath.setAttribute('material', 'shader: line; color: green;');
 
+    // scene.appendChild(drawPath);
 
+
 
+    const renderElement = document.createElement('a-entity');
 
+    renderElement.setAttribute('clone-along-curve', 'curve: #path; spacing: 2; scale: 1 1 1; rotation: 90 0 0;');
 
+    renderElement.setAttribute('geometry', 'primitive:triangle;');
 
+    renderElement.setAttribute('material', 'side: double; color: green;');
 
+    scene.appendChild(renderElement);
 
+
 
+    path.renderEl = renderElement;
 
+    pathCreated = true;
 
+  }
 
+
 
+  return path;
 
+}
 
+
 
+
 
+function showPosition() {
 
+  let lat = document.getElementById('latitude');
 
+  let lon = document.getElementById('longitude');
 
+
 
+  let options = {
 
+    enableHighAccuracy: true,
 
+    timeout: 30000,
 
+    maximumAge: 0
 
+  };
 
+  
+  function success(pos) {
 
+    let crd = pos.coords;
 
+    
+    lat.innerHTML = `${crd.latitude}`;
 
+    lon.innerHTML = `${crd.longitude}`;
 
+  }
 
+  
+  function error(err) {
 
+    console.warn(`ERROR(${err.code}): ${err.message}`);
 
+  }
 
+  
+  navigator.geolocation.watchPosition(success, error, options);
 
+}
 
+
 
+showPosition();
 
+
 
+// console.log(coordtransform.wgs84togcj02(113.59573843475094, 22.36707700088935));
 
+getRoute(start, end);
 
+
 
+
 
+// wgs84 gps position: 22.36707700088935, 113.59573843475094
 
+// gcj02 gps position: 22.370123789469808, 113.5907111095581

Filskillnaden har hållts tillbaka eftersom den är för stor
+ 3 - 0
js/axios.min.js


Filskillnaden har hållts tillbaka eftersom den är för stor
+ 1 - 0
js/axios.min.map


+ 75 - 0
js/camera-select.js
Visa fil 

@@ -0,0 +1,75 @@
 
+const video = document.getElementById('arjs-video');
 
+const button = document.getElementById('button');
 
+const select = document.getElementById('select');
 
+let currentStream;
 
+
 
+function stopMediaTracks(stream) {
 
+  stream.getTracks().forEach(track => {
 
+    track.stop();
 
+  });
 
+}
 
+
 
+function gotDevices(mediaDevices) {
 
+  select.innerHTML = '';
 
+  select.appendChild(document.createElement('option'));
 
+  let count = 1;
 
+  mediaDevices.forEach(mediaDevice => {
 
+    if (mediaDevice.kind === 'videoinput') {
 
+      const option = document.createElement('option');
 
+      option.value = mediaDevice.deviceId;
 
+      const label = mediaDevice.label || `Camera ${count++}`;
 
+      const textNode = document.createTextNode(label);
 
+      option.appendChild(textNode);
 
+      select.appendChild(option);
 
+    }
 
+  });
 
+}
 
+
 
+button.addEventListener('click', event => {
 
+  if (typeof currentStream !== 'undefined') {
 
+    stopMediaTracks(currentStream);
 
+  }
 
+  const videoConstraints = {};
 
+  if (select.value === '') {
 
+    videoConstraints.facingMode = 'environment';
 
+  } else {
 
+    videoConstraints.deviceId = { exact: select.value };
 
+  }
 
+  const constraints = {
 
+    video: videoConstraints,
 
+    audio: false
 
+  };
 
+
 
+  // navigator.mediaDevices
 
+  //   .getUserMedia(constraints)
 
+  //   .then(stream => {
 
+  //     currentStream = stream;
 
+  //     video.srcObject = stream;
 
+  //     return navigator.mediaDevices.enumerateDevices();
 
+  //   })
 
+  //   .then(gotDevices)
 
+  //   .catch(error => {
 
+  //     console.error(error);
 
+  //   });
 
+  navigator.mediaDevices
 
+    .getUserMedia(constraints)
 
+    .then((stream) => {
 
+      currentStream = stream;
 
+
 
+      document.getElementById('arjs-video').srcObject = stream;
 
+      var event = new CustomEvent("camera-init", { stream: stream });
 
+      window.dispatchEvent(event);
 
+
 
+      document.body.addEventListener("click", function () {
 
+          document.getElementById('arjs-video').play();
 
+        });
 
+      return navigator.mediaDevices.enumerateDevices();
 
+    })
 
+    .then(gotDevices)
 
+    .catch((error) => {
 
+      console.error(error);
 
+    });
 
+
 
+});
 
+
 
+navigator.mediaDevices.enumerateDevices().then(gotDevices);

+ 154 - 0
js/coordtransform.js
Visa fil 

@@ -0,0 +1,154 @@
 
+/**
 
+ * Created by Wandergis on 2015/7/8.
 
+ * 提供了百度坐标（BD-09）、国测局坐标（火星坐标，GCJ-02）、和 WGS-84 坐标系之间的转换
 
+ */
 
+// UMD 魔法代码
 
+// if the module has no dependencies, the above pattern can be simplified to
 
+(function (root, factory) {
 
+  if (typeof define === 'function' && define.amd) {
 
+    // AMD. Register as an anonymous module.
 
+    define([], factory);
 
+  } else if (typeof module === 'object' && module.exports) {
 
+    // Node. Does not work with strict CommonJS, but
 
+    // only CommonJS-like environments that support module.exports,
 
+    // like Node.
 
+    module.exports = factory();
 
+  } else {
 
+    // Browser globals (root is window)
 
+    root.coordtransform = factory();
 
+  }
 
+}(this, function () {
 
+  // 定义一些常量
 
+  var x_PI = 3.14159265358979324 * 3000.0 / 180.0;
 
+  var PI = 3.1415926535897932384626;
 
+  var a = 6378245.0;
 
+  var ee = 0.00669342162296594323;
 
+  /**
 
+   * 百度坐标系 (BD-09) 与 火星坐标系 (GCJ-02) 的转换
 
+   * 即 百度 转 谷歌、高德
 
+   * @param bd_lng
 
+   * @param bd_lat
 
+   * @returns {*[]}
 
+   */
 
+  var bd09togcj02 = function bd09togcj02(bd_lng, bd_lat) {
 
+    var bd_lng = +bd_lng;
 
+    var bd_lat = +bd_lat;
 
+    var x = bd_lng - 0.0065;
 
+    var y = bd_lat - 0.006;
 
+    var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * x_PI);
 
+    var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * x_PI);
 
+    var gg_lng = z * Math.cos(theta);
 
+    var gg_lat = z * Math.sin(theta);
 
+    return [gg_lng, gg_lat]
 
+  };
 
+
 
+  /**
 
+   * 火星坐标系 (GCJ-02) 与百度坐标系 (BD-09) 的转换
 
+   * 即 谷歌、高德 转 百度
 
+   * @param lng
 
+   * @param lat
 
+   * @returns {*[]}
 
+   */
 
+  var gcj02tobd09 = function gcj02tobd09(lng, lat) {
 
+    var lat = +lat;
 
+    var lng = +lng;
 
+    var z = Math.sqrt(lng * lng + lat * lat) + 0.00002 * Math.sin(lat * x_PI);
 
+    var theta = Math.atan2(lat, lng) + 0.000003 * Math.cos(lng * x_PI);
 
+    var bd_lng = z * Math.cos(theta) + 0.0065;
 
+    var bd_lat = z * Math.sin(theta) + 0.006;
 
+    return [bd_lng, bd_lat]
 
+  };
 
+
 
+  /**
 
+   * WGS-84 转 GCJ-02
 
+   * @param lng
 
+   * @param lat
 
+   * @returns {*[]}
 
+   */
 
+  var wgs84togcj02 = function wgs84togcj02(lng, lat) {
 
+    var lat = +lat;
 
+    var lng = +lng;
 
+    // if (out_of_china(lng, lat)) {
 
+    //   return [lng, lat]
 
+    // } else {
 
+      var dlat = transformlat(lng - 105.0, lat - 35.0);
 
+      var dlng = transformlng(lng - 105.0, lat - 35.0);
 
+      var radlat = lat / 180.0 * PI;
 
+      var magic = Math.sin(radlat);
 
+      magic = 1 - ee * magic * magic;
 
+      var sqrtmagic = Math.sqrt(magic);
 
+      dlat = (dlat * 180.0) / ((a * (1 - ee)) / (magic * sqrtmagic) * PI);
 
+      dlng = (dlng * 180.0) / (a / sqrtmagic * Math.cos(radlat) * PI);
 
+      var mglat = lat + dlat;
 
+      var mglng = lng + dlng;
 
+      return [mglng, mglat]
 
+    // }
 
+  };
 
+
 
+  /**
 
+   * GCJ-02 转换为 WGS-84
 
+   * @param lng
 
+   * @param lat
 
+   * @returns {*[]}
 
+   */
 
+  var gcj02towgs84 = function gcj02towgs84(lng, lat) {
 
+    var lat = +lat;
 
+    var lng = +lng;
 
+    // if (out_of_china(lng, lat)) {
 
+    //   return [lng, lat]
 
+    // } else {
 
+      var dlat = transformlat(lng - 105.0, lat - 35.0);
 
+      var dlng = transformlng(lng - 105.0, lat - 35.0);
 
+      var radlat = lat / 180.0 * PI;
 
+      var magic = Math.sin(radlat);
 
+      magic = 1 - ee * magic * magic;
 
+      var sqrtmagic = Math.sqrt(magic);
 
+      dlat = (dlat * 180.0) / ((a * (1 - ee)) / (magic * sqrtmagic) * PI);
 
+      dlng = (dlng * 180.0) / (a / sqrtmagic * Math.cos(radlat) * PI);
 
+      var mglat = lat + dlat;
 
+      var mglng = lng + dlng;
 
+      console.log('ok');
 
+      return [lng * 2 - mglng, lat * 2 - mglat]
 
+    // }
 
+  };
 
+
 
+  var transformlat = function transformlat(lng, lat) {
 
+    var lat = +lat;
 
+    var lng = +lng;
 
+    var ret = -100.0 + 2.0 * lng + 3.0 * lat + 0.2 * lat * lat + 0.1 * lng * lat + 0.2 * Math.sqrt(Math.abs(lng));
 
+    ret += (20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0 / 3.0;
 
+    ret += (20.0 * Math.sin(lat * PI) + 40.0 * Math.sin(lat / 3.0 * PI)) * 2.0 / 3.0;
 
+    ret += (160.0 * Math.sin(lat / 12.0 * PI) + 320 * Math.sin(lat * PI / 30.0)) * 2.0 / 3.0;
 
+    return ret
 
+  };
 
+
 
+  var transformlng = function transformlng(lng, lat) {
 
+    var lat = +lat;
 
+    var lng = +lng;
 
+    var ret = 300.0 + lng + 2.0 * lat + 0.1 * lng * lng + 0.1 * lng * lat + 0.1 * Math.sqrt(Math.abs(lng));
 
+    ret += (20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0 / 3.0;
 
+    ret += (20.0 * Math.sin(lng * PI) + 40.0 * Math.sin(lng / 3.0 * PI)) * 2.0 / 3.0;
 
+    ret += (150.0 * Math.sin(lng / 12.0 * PI) + 300.0 * Math.sin(lng / 30.0 * PI)) * 2.0 / 3.0;
 
+    return ret
 
+  };
 
+
 
+  /**
 
+   * 判断是否在国内，不在国内则不做偏移
 
+   * @param lng
 
+   * @param lat
 
+   * @returns {boolean}
 
+   */
 
+  var out_of_china = function out_of_china(lng, lat) {
 
+    var lat = +lat;
 
+    var lng = +lng;
 
+    // 纬度 3.86~53.55, 经度 73.66~135.05 
+    return !(lng > 73.66 && lng < 135.05 && lat > 3.86 && lat < 53.55);
 
+  };
 
+
 
+  return {
 
+    bd09togcj02: bd09togcj02,
 
+    gcj02tobd09: gcj02tobd09,
 
+    wgs84togcj02: wgs84togcj02,
 
+    gcj02towgs84: gcj02towgs84
 
+  }
 
+}));

Filskillnaden har hållts tillbaka eftersom den är för stor
+ 0 - 12284
package-lock.json


+ 0 - 28
package.json
Visa fil 

@@ -1,28 +0,0 @@
 
-{
 
-  "name": "ar-navigation",
 
-  "version": "0.1.0",
 
-  "private": true,
 
-  "scripts": {
 
-    "serve": "vue-cli-service serve",
 
-    "build": "vue-cli-service build",
 
-    "lint": "vue-cli-service lint"
 
-  },
 
-  "dependencies": {
 
-    "aframe": "^1.2.0",
 
-    "aframe-curve-component": "^0.1.3",
 
-    "aframe-look-at-component": "^1.0.0",
 
-    "ar.js": "../AR.js/",
 
-    "axios": "^0.21.1",
 
-    "browserify-css": "*",
 
-    "core-js": "^3.6.5",
 
-    "envify": "*",
 
-    "vue": "^2.6.11",
 
-    "webar": "0.0.0"
 
-  },
 
-  "devDependencies": {
 
-    "@vue/cli-plugin-babel": "~4.5.0",
 
-    "@vue/cli-service": "~4.5.0",
 
-    "babel-eslint": "^10.1.0",
 
-    "vue-template-compiler": "^2.6.11"
 
-  }
 
-}

BIN
public/favicon.ico
Visa fil


+ 0 - 21
public/index.html
Visa fil 

@@ -1,21 +0,0 @@
 
-<!DOCTYPE html>
 
-<html lang="">
 
-  <head>
 
-    <meta charset="utf-8">
 
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
 
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 
-    <title><%= htmlWebpackPlugin.options.title %></title>
 
-    <!-- <script src="./js/aframe.min.js"></script>
 
-    <script src="./js/aframe-look-at-component.min.js"></script>
 
-    <script src="./js/aframe-ar-nft.js"></script>
 
-    <script src="./js/aframe-route.js"></script>  -->
 
-  </head>
 
-  <body>
 
-    <noscript>
 
-      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
 
-    </noscript>
 
-    <div id="app"></div>
 
-    <!-- built files will be auto injected -->
 
-  </body>
 
-</html>

Filskillnaden har hållts tillbaka eftersom den är för stor
+ 0 - 1
public/js/aframe-ar.js


+ 0 - 307
public/js/old/aframe-route.js
Visa fil 

@@ -1,307 +0,0 @@
 
-if (typeof AFRAME === 'undefined') {
 
-  throw new Error('Component attempted to register before AFRAME was available.');
 
-}
 
-
 
-/**
 
-* Curve component for A-Frame to deal with spline curves
 
-*/
 
-var zAxis = new THREE.Vector3(0, 0, 1);
 
-var degToRad = THREE.Math.degToRad;
 
-
 
-AFRAME.registerComponent('curve-point', {
 
-
 
-  //dependencies: ['position'],
 
-
 
-  schema: {},
 
-
 
-  init: function () {
 
-      this.el.addEventListener("componentchanged", this.changeHandler.bind(this));
 
-      this.el.emit("curve-point-change");
 
-  },
 
-
 
-  changeHandler: function (event) {
 
-      if (event.detail.name == "position") {
 
-          this.el.emit("curve-point-change");
 
-      }
 
-  }
 
-
 
-});
 
-
 
-AFRAME.registerComponent('curve', {
 
-
 
-  //dependencies: ['curve-point'],
 
-
 
-  schema: {
 
-      type: {
 
-          type: 'string',
 
-          default: 'CatmullRom',
 
-          oneOf: ['CatmullRom', 'CubicBezier', 'QuadraticBezier', 'Line']
 
-      },
 
-      closed: {
 
-          type: 'boolean',
 
-          default: false
 
-      }
 
-  },
 
-
 
-  init: function () {
 
-      this.pathPoints = null;
 
-      this.curve = null;
 
-
 
-      this.el.addEventListener("curve-point-change", this.update.bind(this));
 
-      this.el.addEventListener("gps-entity-place-update-position", this.update.bind(this));
 
-      
-  },
 
-
 
-  update: function (oldData) {
 
-
 
-      this.points = Array.from(this.el.querySelectorAll("a-curve-point, [curve-point]"));
 
-      console.log(this.points);
 
-      if (this.points.length <= 1) {
 
-          console.warn("At least 2 curve-points needed to draw a curve");
 
-          this.curve = null;
 
-      } else {
 
-          // Get Array of Positions from Curve-Points
 
-          var pointsArray = this.points.map(function (point) {
 
-
 
-              if (point.x !== undefined && point.y !== undefined && point.z !== undefined) {
 
-                  return point;
 
-              }
 
-
 
-              return point.object3D.getWorldPosition();
 
-          });
 
-
 
-          // Update the Curve if either the Curve-Points or other Properties changed
 
-          if (!AFRAME.utils.deepEqual(pointsArray, this.pathPoints) || (oldData !== 'CustomEvent' && !AFRAME.utils.deepEqual(this.data, oldData))) {
 
-              this.curve = null;
 
-
 
-              this.pathPoints = pointsArray;
 
-
 
-              // Create Curve
 
-              switch (this.data.type) {
 
-                  case 'CubicBezier':
 
-                      if (this.pathPoints.length != 4) {
 
-                          throw new Error('The Three constructor of type CubicBezierCurve3 requires 4 points');
 
-                      }
 
-                      this.curve = new THREE.CubicBezierCurve3(this.pathPoints[0], this.pathPoints[1], this.pathPoints[2], this.pathPoints[3]);
 
-                      break;
 
-                  case 'QuadraticBezier':
 
-                      if (this.pathPoints.length != 3) {
 
-                          throw new Error('The Three constructor of type QuadraticBezierCurve3 requires 3 points');
 
-                      }
 
-                      this.curve = new THREE.QuadraticBezierCurve3(this.pathPoints[0], this.pathPoints[1], this.pathPoints[2]);
 
-                      break;
 
-                  case 'Line':
 
-                      if (this.pathPoints.length != 2) {
 
-                          throw new Error('The Three constructor of type LineCurve3 requires 2 points');
 
-                      }
 
-                      this.curve = new THREE.LineCurve3(this.pathPoints[0], this.pathPoints[1]);
 
-                      break;
 
-                  case 'CatmullRom':
 
-                      this.curve = new THREE.CatmullRomCurve3(this.pathPoints);
 
-                      break;
 
-                  case 'Spline':
 
-                      this.curve = new THREE.SplineCurve3(this.pathPoints);
 
-                      break;
 
-                  default:
 
-                      throw new Error('No Three constructor of type (case sensitive): ' + this.data.type + 'Curve3');
 
-              }
 
-
 
-              this.curve.closed = this.data.closed;
 
-
 
-              this.el.emit('curve-updated');
 
-          }
 
-      }
 
-
 
-  },
 
-
 
-  remove: function () {
 
-      this.el.removeEventListener("curve-point-change", this.update.bind(this));
 
-  },
 
-
 
-  closestPointInLocalSpace: function closestPoint(point, resolution, testPoint, currentRes) {
 
-      if (!this.curve) throw Error('Curve not instantiated yet.');
 
-      resolution = resolution || 0.1 / this.curve.getLength();
 
-      currentRes = currentRes || 0.5;
 
-      testPoint = testPoint || 0.5;
 
-      currentRes /= 2;
 
-      var aTest = testPoint + currentRes;
 
-      var bTest = testPoint - currentRes;
 
-      var a = this.curve.getPointAt(aTest);
 
-      var b = this.curve.getPointAt(bTest);
 
-      var aDistance = a.distanceTo(point);
 
-      var bDistance = b.distanceTo(point);
 
-      var aSmaller = aDistance < bDistance;
 
-      if (currentRes < resolution) {
 
-
 
-          var tangent = this.curve.getTangentAt(aSmaller ? aTest : bTest);
 
-          if (currentRes < resolution) return {
 
-              result: aSmaller ? aTest : bTest,
 
-              location: aSmaller ? a : b,
 
-              distance: aSmaller ? aDistance : bDistance,
 
-              normal: normalFromTangent(tangent),
 
-              tangent: tangent
 
-          };
 
-      }
 
-      if (aDistance < bDistance) {
 
-          return this.closestPointInLocalSpace(point, resolution, aTest, currentRes);
 
-      } else {
 
-          return this.closestPointInLocalSpace(point, resolution, bTest, currentRes);
 
-      }
 
-  }
 
-});
 
-
 
-
 
-var tempQuaternion = new THREE.Quaternion();
 
-
 
-function normalFromTangent(tangent) {
 
-  var lineEnd = new THREE.Vector3(0, 1, 0);
 
-  tempQuaternion.setFromUnitVectors(zAxis, tangent);
 
-  lineEnd.applyQuaternion(tempQuaternion);
 
-  return lineEnd;
 
-}
 
-
 
-AFRAME.registerShader('line', {
 
-  schema: {
 
-      color: {default: '#ff0000'},
 
-  },
 
-
 
-  init: function (data) {
 
-      this.material = new THREE.LineBasicMaterial(data);
 
-  },
 
-
 
-  update: function (data) {
 
-      this.material = new THREE.LineBasicMaterial(data);
 
-  },
 
-});
 
-
 
-AFRAME.registerComponent('draw-curve', {
 
-
 
-  //dependencies: ['curve', 'material'],
 
-
 
-  schema: {
 
-      curve: {type: 'selector'}
 
-  },
 
-
 
-  init: function () {
 
-    console.log(this.data);
 
-      this.data.curve.addEventListener('curve-updated', this.update.bind(this));
 
-  },
 
-
 
-  update: function () {
 
-      if (this.data.curve) {
 
-          this.curve = this.data.curve.components.curve;
 
-      }
 
-
 
-      if (this.curve && this.curve.curve) {
 
-          var lineGeometry = new THREE.BufferGeometry().setFromPoints(this.curve.curve.getPoints(this.curve.curve.getPoints().length * 10));
 
-          var mesh = this.el.getOrCreateObject3D('mesh', THREE.Line);
 
-          var lineMaterial = mesh.material ? mesh.material : new THREE.LineBasicMaterial({
 
-              color: "#ff0000"
 
-          });
 
-
 
-          this.el.setObject3D('mesh', new THREE.Line(lineGeometry, lineMaterial));
 
-      }
 
-  },
 
-
 
-  remove: function () {
 
-      this.data.curve.removeEventListener('curve-updated', this.update.bind(this));
 
-      this.el.getObject3D('mesh').geometry = new THREE.Geometry();
 
-  }
 
-
 
-});
 
-
 
-AFRAME.registerComponent('clone-along-curve', {
 
-
 
-  //dependencies: ['curve'],
 
-
 
-  schema: {
 
-      curve: {type: 'selector'},
 
-      spacing: {default: 1},
 
-      rotation: {
 
-          type: 'vec3',
 
-          default: '0 0 0'
 
-      },
 
-      scale: {
 
-          type: 'vec3',
 
-          default: '1 1 1'
 
-      }
 
-  },
 
-
 
-  init: function () {
 
-      this.el.addEventListener('model-loaded', this.update.bind(this));
 
-      this.data.curve.addEventListener('curve-updated', this.update.bind(this));
 
-  },
 
-
 
-  update: function () {
 
-      this.remove();
 
-
 
-      if (this.data.curve) {
 
-          this.curve = this.data.curve.components.curve;
 
-      }
 
-
 
-      if (!this.el.getObject3D('clones') && this.curve && this.curve.curve) {
 
-          var mesh = this.el.getObject3D('mesh');
 
-
 
-          var length = this.curve.curve.getLength();
 
-          var start = 0;
 
-          var counter = start;
 
-
 
-          var cloneMesh = this.el.getOrCreateObject3D('clones', THREE.Group);
 
-
 
-          var parent = new THREE.Object3D();
 
-          mesh.scale.set(this.data.scale.x, this.data.scale.y, this.data.scale.z);
 
-          mesh.rotation.set(degToRad(this.data.rotation.x), degToRad(this.data.rotation.y), degToRad(this.data.rotation.z));
 
-          mesh.rotation.order = 'YXZ';
 
-
 
-          parent.add(mesh);
 
-
 
-          while (counter <= length) {
 
-              var child = parent.clone(true);
 
-
 
-              child.position.copy(this.curve.curve.getPointAt(counter / length));
 
-
 
-              tangent = this.curve.curve.getTangentAt(counter / length).normalize();
 
-
 
-              child.quaternion.setFromUnitVectors(zAxis, tangent);
 
-
 
-              cloneMesh.add(child);
 
-
 
-              counter += this.data.spacing;
 
-          }
 
-      }
 
-  },
 
-
 
-  remove: function () {
 
-      this.curve = null;
 
-      if (this.el.getObject3D('clones')) {
 
-          this.el.removeObject3D('clones');
 
-      }
 
-  }
 
-
 
-});
 
-
 
-AFRAME.registerPrimitive('a-draw-curve', {
 
-  defaultComponents: {
 
-      'draw-curve': {},
 
-  },
 
-  mappings: {
 
-      curveref: 'draw-curve.curve',
 
-  }
 
-});
 
-
 
-AFRAME.registerPrimitive('a-curve-point', {
 
-  defaultComponents: {
 
-      'curve-point': {},
 
-  },
 
-  mappings: {}
 
-});
 
-
 
-AFRAME.registerPrimitive('a-curve', {
 
-  defaultComponents: {
 
-      'curve': {}
 
-  },
 
-
 
-  mappings: {
 
-      type: 'curve.type',
 
-  }
 
-});

+ 0 - 27
src/App.vue
Visa fil 

@@ -1,27 +0,0 @@
 
-<template>
 
-  <div id="app">
 
-    <Navigation/>
 
-  </div>
 
-</template>
 
-
 
-<script>
 
-import Navigation from './components/Navigation.vue'
 
-
 
-export default {
 
-  name: 'App',
 
-  components: {
 
-    Navigation
 
-  }
 
-}
 
-</script>
 
-
 
-<style>
 
-#app {
 
-  font-family: Avenir, Helvetica, Arial, sans-serif;
 
-  -webkit-font-smoothing: antialiased;
 
-  -moz-osx-font-smoothing: grayscale;
 
-  text-align: center;
 
-  color: #2c3e50;
 
-  margin-top: 60px;
 
-}
 
-</style>

Filskillnaden har hållts tillbaka eftersom den är för stor
+ 0 - 1
src/assets/js/aframe-ar.js


BIN
src/assets/logo.png
Visa fil


+ 0 - 109
src/components/Navigation.vue
Visa fil 

@@ -1,109 +0,0 @@
 
-<template>
 
-  <div class="navigation">
 
-    <a-scene
 
-      vr-mode-ui="enabled: false"
 
-      embedded
 
-      arjs="sourceType: webcam; debugUIEnabled: false;"
 
-    >
 
-      
-
 
-      <a-camera gps-camera rotation-reader> </a-camera>
 
-      <a-curve id="route1" v-if="route.length">
 
-        <template v-for="(coord, index) in route">
 
-          <a-text :key="index" position="abc">{{ coord.lat }}</a-text>
 
-          <span :key="index" :position="coord.lat"></span>
 
-        </template>
 
-      </a-curve>
 
-    </a-scene>
 
-  </div>
 
-</template>
 
-
 
-<script>
 
-
 
-// API:
 
-// http://dev.virtualearth.net/REST/v1/Routes/Walking?wayPoint.1=22.364563,113.600967&wayPoint.2=22.363379,113.598615&routeAttributes=routePath&key=Ahwqh1mUNte20qOAphNKU-hSGsmEnavPTOU-749M7MJl7MYIdsTmL4XFoSwS4QvP
 
-
 
-
 
-export default {
 
-  name: 'Navigation',
 
-  props: {
 
-    
-  },
 
-  data() {
 
-    return {
 
-      scene: undefined,
 
-      start: {lat: 22.364563, lon: 113.600967},
 
-      end: {lat: 22.363379, lon: 113.598615},
 
-      route: [],
 
-      test: '23.323, 344.23423'
 
-    }
 
-  },
 
-  mounted() {
 
-    this.scene = document.querySelector('a-scene');
 
-    this.getRoute(this.start, this.end);
 
-  },
 
-  methods: {
 
-    getRoute(start, end) {
 
-      this.$http.get('https://dev.virtualearth.net/REST/v1/Routes/Walking', {
 
-        params: {
 
-          'wayPoint.1':      `${start.lat},${start.lon}`,
 
-          'wayPoint.2':      `${end.lat},${end.lon}`,
 
-          'routeAttributes': 'routePath',
 
-          'key':             'Ahwqh1mUNte20qOAphNKU-hSGsmEnavPTOU-749M7MJl7MYIdsTmL4XFoSwS4QvP'
 
-        }
 
-      })
 
-      .then(response => {
 
-        if(response.status === 200) {
 
-          // this.route = response.data.resourceSets[0].resources[0].routePath.line.coordinates;
 
-          this.createRoute(response.data.resourceSets[0].resources[0].routePath.line.coordinates);
 
-        } else {
 
-          throw new Error(response.status);
 
-        }
 
-      })
 
-    },
 
-    createRoute(path) {
 
-      if(path.length) {
 
-        path.forEach((coordinate, i) => {
 
-          this.route.push({id: i, lat: coordinate[0], lon: coordinate[1]});
 
-        });
 
-        console.log(this.route);
 
-      }
 
-    },
 
-
 
-    drawRoute(path) {
 
-      if(path.length) {
 
-console.log(path);
 
-        const curve = document.createElement('a-curve');
 
-        curve.id = 'route';
 
-        this.scene.appendChild(curve);
 
-
 
-        path.forEach(coordinate => {
 
-          const lat = coordinate[0];
 
-          const lon = coordinate[1];
 
-console.log(coordinate);
 
-          const placeText = document.createElement('a-text'); //curve-point
 
-          placeText.setAttribute('gps-entity-place', `latitude: ${lat}; longitude: ${lon};`);
 
-          placeText.setAttribute('title', 'PATH');
 
-          placeText.setAttribute('scale', '15 15 15');
 
-
 
-          placeText.addEventListener('loaded', () => {
 
-              window.dispatchEvent(new CustomEvent('gps-entity-place-loaded'))
 
-          });
 
-
 
-          curve.appendChild(placeText);
 
-        });
 
-
 
-        const drawCurve = document.createElement('a-draw-curve');
 
-        drawCurve.setAttribute('curveref', 'route');
 
-        drawCurve.setAttribute('material', 'shader: line; color: white');
 
-        this.scene.appendChild(drawCurve);
 
-      }
 
-    }
 
-  }
 
-}
 
-</script>
 
-
 
-
 
-<style scoped>
 
-
 
-</style>

+ 0 - 29
src/main.js
Visa fil 

@@ -1,29 +0,0 @@
 
-import Vue from 'vue'
 
-import App from './App.vue'
 
-// import 'aframe'
 
-import 'ar.js'
 
-// import '../node_modules/aframe-look-at-component'
 
-// import 'aframe-curve-component'
 
-
 
-Vue.prototype.$bus = new Vue()
 
-
 
-
 
-let {axios} = require('./utils/http.js')
 
-
 
-Vue.prototype.$http = axios
 
-
 
-Vue.config.productionTip = false
 
-
 
-Vue.config.ignoredElements = [
 
-  'a-scene',
 
-  'a-camera',
 
-  'a-box',
 
-  'a-image',
 
-  'a-curve',
 
-  'a-curve-point',
 
-  'a-text'
 
-]
 
-
 
-new Vue({
 
-  render: h => h(App),
 
-}).$mount('#app')

+ 0 - 6
src/utils/http.js
Visa fil 

@@ -1,6 +0,0 @@
 
-import axios from 'axios'
 
-
 
-axios.defaults.baseURL = ''
 
-axios.defaults.headers['X-Requested-with'] = 'XMLHttpRequest'
 
-
 
-export { axios }

+ 0 - 24
ssl-cert/cert.pem
Visa fil 

@@ -1,24 +0,0 @@
 
------BEGIN CERTIFICATE-----
 
-MIID/zCCAuegAwIBAgIUR05lKqIACQJayrVSK14YM/wOYWswDQYJKoZIhvcNAQEL
 
-BQAwgY4xCzAJBgNVBAYTAkNOMRIwEAYDVQQIDAlHdWFuZ2RvbmcxDzANBgNVBAcM
 
-BlpodWhhaTEOMAwGA1UECgwFNERhZ2UxDDAKBgNVBAsMA1dlYjEQMA4GA1UEAwwH
 
-UGF0cmljazEqMCgGCSqGSIb3DQEJARYbcGF0cmlja2JvemljQHByb3Rvbm1haWwu
 
-Y29tMB4XDTIxMDgyNTA0MDIwNVoXDTMxMDgyMzA0MDIwNVowgY4xCzAJBgNVBAYT
 
-AkNOMRIwEAYDVQQIDAlHdWFuZ2RvbmcxDzANBgNVBAcMBlpodWhhaTEOMAwGA1UE
 
-CgwFNERhZ2UxDDAKBgNVBAsMA1dlYjEQMA4GA1UEAwwHUGF0cmljazEqMCgGCSqG
 
-SIb3DQEJARYbcGF0cmlja2JvemljQHByb3Rvbm1haWwuY29tMIIBIjANBgkqhkiG
 
-9w0BAQEFAAOCAQ8AMIIBCgKCAQEA33DJHgd2VuZTAWAXe+zZ4gf+IB+B70Q+Nj55
 
-zvTexK2jxtxC5uBzrAX597D+54TmBYmhLT4ke6fTX0PzO55C6r+pbOXPtfTUsyAW
 
-v9AqwU/HjEchHnCoXwuBHT/yTx5CR2WI5u//IHrgmjWJZimb6ZjmQvzAzheGveFP
 
-hQUPHkLQGyLivZICKef50AJetftgKUieoTr9wc8T+ZXOgA6teqirVhiPkqM16DA7
 
-DrNUbcqcNLNM40yUi4AIxRaIhmO4DyZ0pUKdUhqAeOKKoDdaN8DlwBQ7dy2JtvT5
 
-71biZF/Acypg8FmK9IvozYraXKF0bBWWeYGAp2GLsMkKp5dyXwIDAQABo1MwUTAd
 
-BgNVHQ4EFgQUva77VhIWwOgshceu6Zz52M8kdmUwHwYDVR0jBBgwFoAUva77VhIW
 
-wOgshceu6Zz52M8kdmUwDwYDVR0TAQH/BAUwAwEB/zANBgkqhkiG9w0BAQsFAAOC
 
-AQEAFd0lcDM3zkrSeUTpytvZqvTUPjVJp9sxj/sSAnUvVeZuqDce2n57IHriAoOB
 
-2NQ6mSaM8/VMZyjo8dVGyH0iwy/gwml+eR7gTDdB8ZlP3tVPi5L4OQMmOx3mKGMS
 
-yF5BqXPNwQVD/ogN7fCz2eI9LUE66tHOOVXJDY84NeiZx2imt6xolCMbfl22W92N
 
-MRwZlLj7vREUUhP7/b2+mj8MywZOEAkuTuXaITC0RkrrZxNgUP9C5ydDVyqUk+L2
 
-0rhSxQI0KuaxKrOEvXDqUNGaWWtDbrDvBPYAqbq0eSW2HvOPAs4qPiDjbW0TD1go
 
-gTn9ufy+Nb6KPxoyN7wCHI6yGw==
 
------END CERTIFICATE-----

+ 0 - 28
ssl-cert/key.pem
Visa fil 

@@ -1,28 +0,0 @@
 
------BEGIN PRIVATE KEY-----
 
-MIIEvQIBADANBgkqhkiG9w0BAQEFAASCBKcwggSjAgEAAoIBAQDfcMkeB3ZW5lMB
 
-YBd77NniB/4gH4HvRD42PnnO9N7EraPG3ELm4HOsBfn3sP7nhOYFiaEtPiR7p9Nf
 
-Q/M7nkLqv6ls5c+19NSzIBa/0CrBT8eMRyEecKhfC4EdP/JPHkJHZYjm7/8geuCa
 
-NYlmKZvpmOZC/MDOF4a94U+FBQ8eQtAbIuK9kgIp5/nQAl61+2ApSJ6hOv3BzxP5
 
-lc6ADq16qKtWGI+SozXoMDsOs1Rtypw0s0zjTJSLgAjFFoiGY7gPJnSlQp1SGoB4
 
-4oqgN1o3wOXAFDt3LYm29PnvVuJkX8BzKmDwWYr0i+jNitpcoXRsFZZ5gYCnYYuw
 
-yQqnl3JfAgMBAAECggEAB/icFCgr/pmk6G2nKNKgS0IBvN+i4QhMN98utUVjFR0k
 
-tJlzAY2MUty7uCxmS5ggJJ5uU5Dd+FNaZRGlgcD5nipMPwhLyq/7TpCcfydL/y17
 
-bvOyqMVYHFvqtUJswInRz349zg9NyLjZfmbeifh+CW1c+ZLOxgts0SVSkupFSc0D
 
-UFUfcqTu1lkF6/V6dncotT0YayqGE+CXtKsAgIWMkfALyiwfJlj08hkfnLCoUB5z
 
-2wxgUPS+/SrSOYGDg7Tz9hY9+3Qwxh2YZnBr9E0oQ/vpkqwmO3IMT6R7z3QjsWvr
 
-24uOE1h0ewUBLC+nQTGg+MatUqdpvQtee3dSJyr10QKBgQD3v+pJgZxw690FBUBa
 
-sLJZg2WTYKlpaLMPKcCFrw2x6/FuWlpnuh1+Prwqaynn2zce1pzfogjHcz8EEZZr
 
-5i2/hc6T0TKazN88Qodn12THiBAWmz/KHN/7uBtipY3Hm3FjC97stQE4FVT9sVLO
 
-QKXpSn5ENVaPO+ABtRksfGeJtQKBgQDm4aItFA+vGpTkCozBPBMGmr1qQ/gmXvLk
 
-65FE7T9+ke7kRK0mCuDlGLFqAeRqFCJ+TFLwEMBprrinYBf6xIMXhPDx8WNrmjbU
 
-hfqEmBW9s9T9uY4MOTRlvDCXE3s8xsiO9CuF3xeFhCu6lTr0laUGKNsylf1ZnAAq
 
-2YvGruXIQwKBgGGSySAIFuf2TMbUaaMOIj/U2yVvFWm5XYQkSnmcFwWyyhRPK3nc
 
-uA7ngE4ohImXMZ9IoOIGu/RpdDETCC4Yqn3aoiBfbNHAzE68WP3RvBRFhyiQHlBo
 
-jOJjgQ2Z7DvoAYEjxLlvFDrVU/LSaq1mkrFNsGsGor+osjGZ9H8rw89dAoGAGqo6
 
-gbxMZ2vJgGDbisG2bM/YSnqZIU1b/iZau7wu1h5imch4uukMukjUzKp1R+8VYMLN
 
-3V4B6vK77tDBVDv36/J1pWu8kMPZy0fB/ChYcnVfhwI0LqM4svs+HWSpmgZXSXNX
 
-x3lRjSELr9vmWDMkQQbc8gWyofPLbSd85jBy52MCgYEArspyduHY3a9L9dXIbJH3
 
-igJDpHis/5RllAlslf+wMXQdBXVxo0iTPKvw25wW20P7tST3LRqa4sjCjQd7idnq
 
-efTIr0pqPXCIzLgdoes60sBBtR3i8ohB0u738C3KjhX0s+D4SrDeUWzHNLBJ5P1U
 
-Omf9upXQWPooLUMvbhPOHCs=
 
------END PRIVATE KEY-----

+ 0 - 12
vue.config.js
Visa fil 

@@ -1,12 +0,0 @@
 
-const fs = require('fs')
 
-
 
-module.exports = {
 
-  publicPath: "./",
 
-  devServer: {
 
-    https: {
 
-      key: fs.readFileSync('./ssl-cert/key.pem'),
 
-      cert: fs.readFileSync('./ssl-cert/cert.pem'),
 
-    },
 
-    public: 'https://localhost:8080/'
 
-  }
 
-}//http://192.168.0.72:8080