- feat: handle multiple locations

- fix: constants import
- docs: updated Package doc

Author: le0m

docs/package.md

@@ -18,8 +18,12 @@ new Package({
             height: 1.0,
             depth: 1.0
         },
-        latitude: 12.345678, // required for location based AR
-        longitude: 12.345678 // required for location based AR
+        locations: [
+            {
+                latitude: 12.345678, // required for location based AR
+                longitude: 12.345678 // required for location based AR
+            }
+        ]
     },
     markerPatt: '...', // the content of the generated .patt file, as a string (required for pattern/location based AR)
     matrixType: '...', // see exported MATRIX_* constants (required for barcode based AR)

src/modules/location/index.js

@@ -3,7 +3,7 @@ import {
     ASSET_IMAGE,
     ASSET_AUDIO,
     ASSET_VIDEO,
-} from '../../index';
+} from '../package/Package';
 
 import location3dTemplate from './templates/location.3d.handlebars';
 import locationImageTemplate from './templates/location.image.handlebars';

src/modules/location/templates/location.3d.handlebars

@@ -23,13 +23,15 @@
                 ></a-asset-item>
             </a-assets>
 
-            <a-entity
-                look-at="[gps-camera]"
-                animation-mixer="loop: repeat"
-                gltf-model="#animated-asset"
-                scale="{{assetParam.scale}} {{assetParam.scale}} {{assetParam.scale}}"
-                gps-entity-place="latitude: {{assetParam.latitude}}; longitude: {{assetParam.longitude}};"
-            ></a-entity>
+            {{#each assetParam.locations}}
+                <a-entity
+                    look-at="[gps-camera]"
+                    animation-mixer="loop: repeat"
+                    gltf-model="#animated-asset"
+                    scale="{{../assetParam.scale}} {{../assetParam.scale}} {{../assetParam.scale}}"
+                    gps-entity-place="latitude: {{this.latitude}}; longitude: {{this.longitude}};"
+                ></a-entity>
+            {{/each}}
 
             <a-camera gps-camera rotation-reader></a-camera>
         </a-scene>

src/modules/location/templates/location.audio.handlebars

@@ -21,15 +21,17 @@
                     response-type="arraybuffer"
                 ></a-asset-item>
             </a-assets>
-
-            <a-entity
-                look-at="[gps-camera]"
-                id="sound-entity"
-                sound="src: #sound"
-                emitsevent
-                autoplay="false"
-                gps-entity-place="latitude: {{assetParam.latitude}}; longitude: {{assetParam.longitude}};"
-            ></a-entity>
+            
+            {{#each assetParam.locations}}
+                <a-entity
+                    look-at="[gps-camera]"
+                    id="sound-entity"
+                    sound="src: #sound"
+                    emitsevent
+                    autoplay="false"
+                    gps-entity-place="latitude: {{this.latitude}}; longitude: {{this.longitude}};"
+                ></a-entity>
+            {{/each}}
 
             <a-camera gps-camera rotation-reader></a-camera>
         </a-scene>

src/modules/location/templates/location.image.handlebars

@@ -14,12 +14,14 @@
             loading-screen="enabled: false;"
             arjs="sourceType: webcam; debugUIEnabled: false;"
         >
-            <a-image
-                src="{{assetPath}}"
-                look-at="[gps-camera]"
-                scale="{{assetParam.scale}} {{assetParam.scale}} {{assetParam.scale}}"
-                gps-entity-place="latitude: {{assetParam.latitude}}; longitude: {{assetParam.longitude}};"
-            ></a-image>
+            {{#each assetParam.locations}}
+                <a-image
+                    src="{{assetPath}}"
+                    look-at="[gps-camera]"
+                    scale="{{../assetParam.scale}} {{../assetParam.scale}} {{../assetParam.scale}}"
+                    gps-entity-place="latitude: {{this.latitude}}; longitude: {{this.longitude}};"
+                ></a-image>
+            {{/each}}
 
             <a-camera gps-camera rotation-reader></a-camera>
         </a-scene>

src/modules/location/templates/location.video.handlebars

@@ -29,20 +29,22 @@
                 ></video>
             </a-assets>
 
-            <a-video
-                src="#vid"
-                position='0 0.1 0'
-                rotation="-90 0 0"
-                look-at="[gps-camera]"
-                videohandler
-                smooth="true"
-                smoothCount="10"
-                smoothTolerance="0.01"
-                smoothThreshold="5"
-                autoplay="false"
-                scale="{{assetParam.scale}} {{assetParam.scale}} {{assetParam.scale}}"
-                gps-entity-place="latitude: {{assetParam.latitude}}; longitude: {{assetParam.longitude}};"
-            ></a-video>
+            {{#each assetParam.locations}}
+                <a-video
+                    src="#vid"
+                    position='0 0.1 0'
+                    rotation="-90 0 0"
+                    look-at="[gps-camera]"
+                    videohandler
+                    smooth="true"
+                    smoothCount="10"
+                    smoothTolerance="0.01"
+                    smoothThreshold="5"
+                    autoplay="false"
+                    scale="{{../assetParam.scale}} {{../assetParam.scale}} {{../assetParam.scale}}"
+                    gps-entity-place="latitude: {{this.latitude}}; longitude: {{this.longitude}};"
+                ></a-video>
+            {{/each}}
 
             <a-camera gps-camera rotation-reader></a-camera>
         </a-scene>

src/modules/marker/index.js

@@ -3,7 +3,7 @@ import {
     ASSET_IMAGE,
     ASSET_AUDIO,
     ASSET_VIDEO,
-} from '../../index';
+} from '../package/Package';
 
 import { BarcodeMarkerGenerator } from './tools/barcode-marker-generator';
 import { PatternMarkerGenerator } from './tools/pattern-marker-generator';

src/modules/package/Package.js

@@ -26,8 +26,7 @@ export const PACKAGE_GITHUB = 'github';
  * @property {boolean} isValid
  * @property {Number} scale
  * @property {{width: Number, height: Number, depth: Number}} size
- * @property {Number} [latitude] - only for location-based
- * @property {Number} [longitude] - only for location-based
+ * @property {Array<{latitude: Number, longitude: Number}>} locations - an array of latitude/longitude locations, for location based AR
  */
 const defaultAssetParam = {
     isValid: true,
@@ -46,7 +45,7 @@ export class Package {
      * @param {string} config.assetType - one of 3d, image, audio or video (see exported constants)
      * @param {string|Blob} config.assetFile - the file to be show in AR
      * @param {string} config.assetName - the file name, to be included in HTML template
-     * @param {AssetParam} [config.assetParam] - scale and position of AR asset
+     * @param {AssetParam} [config.assetParam] - parameters of AR asset
      * @param {string} [config.markerPatt] - the marker image patt file (required for pattern and location AR type)
      * @param {string} [config.matrixType] - the barcode matrix type (see {@link BarcodeMarkerGenerator} exported constants, required for barcode AR type)
      * @param {number} [config.markerValue] - the barcode value of the marker (required for barcode AR type)