locar 0.1.9 → 0.2.1

package/dist/locar.d.ts

@@ -3,6 +3,62 @@ import { Object3D } from 'three';
 import { Quaternion } from 'three';
 import * as THREE from 'three';
 
+/** Application class to orchestrate the interaction between the individual LocAR classes and the Three.js camera, renderer and scene. */
+export declare class App extends EventEmitter {
+    #private;
+    locar: LocAR;
+    camera: THREE.PerspectiveCamera;
+    renderer: THREE.WebGLRenderer;
+    scene: THREE.Scene;
+    webcam: Webcam;
+    deviceOrientationControls: DeviceOrientationControls | null;
+    cameraFeedDimensions: {
+        landWidth: number;
+        landHeight: number;
+    } | null; /** camera feed dimensions in LANDSCAPE  */
+    origHfov: number;
+    /**
+     * Create an App object.
+     * @param {AppOptions} - Startup options.
+     */
+    constructor({ cameraOptions, canvas, gpsOptions, videoConstraints, deviceOrientationOptions, serverLogger, projection }: AppOptions);
+    /**
+     * Start the app.
+     * Must be called after construction.
+     * @returns {Promise<LocAR>}
+     * Promise resolving with LocAR object. Rejects with object containing code and message.
+     */
+    start(): Promise<LocAR>;
+}
+
+/** Options to pass into the App object. */
+export declare interface AppOptions {
+    /** the three.js camera options to use - note however we specify horizontal, not vertical, field of view */
+    cameraOptions?: {
+        hFov: number;
+        near: number;
+        far: number;
+    };
+    /** the canvas to render the AR scene into (one will be created if omitted) */
+    canvas?: HTMLCanvasElement;
+    /** GPS options, see GpsOptions documentation for details */
+    gpsOptions?: GpsOptions;
+    /** Video constraints for Media Devices API */
+    videoConstraints?: {
+        video: {
+            facingMode: string;
+        };
+    };
+    /** Device orientation options for DeviceOrientationControls */
+    deviceOrientationOptions?: DeviceOrientationControlsOptions & {
+        enabled: boolean;
+    };
+    /** Projection to use (default: SphMercProjection) */
+    projection?: Projection;
+    /** Server logger to use - ensure you gain consent from the user if you are doing this, it's usually a Data Protection legal requirement */
+    serverLogger?: ServerLogger;
+}
+
 /**
  * Class to handle object detection via mouse clicks/touch events
  * and raycasting.
@@ -79,14 +135,31 @@ export declare class DeviceOrientationControls extends EventDispatcher {
     init: () => void;
 }
 
-declare type DeviceOrientationControlsOptions = {
+/** Options to pass into DeviceOrientationControls. */
+export declare type DeviceOrientationControlsOptions = {
+    /** smoothingFactor - default 0.2. If too high, AR content movement will lag behind the sensors. If too low, the scene will be jittery. */
     smoothingFactor?: number;
+    /** Movement threshold to detect an orientation change (radians). */
     orientationChangeThreshold?: number;
+    /** On iOS, enable permission dialog to seek permission to use device orientation through a user gesture. Recommended to set to true */
     enablePermissionDialog?: boolean;
+    /** Set iOS-look and feel styling for the permission dialog for device orientation */
     enableStyling?: boolean;
+    /** Use a standard confirm dialog rather than a custom element to grant device orientation permissions */
     preferConfirmDialog?: boolean;
 };
 
+/** Event emitted when there is an error with device orientation. */
+export declare interface DeviceOrientationErrorEvent {
+    code: string;
+    message: string;
+}
+
+/** Event emitted when device orientation permission has been granted. */
+export declare interface DeviceOrientationGrantedEvent {
+    target: DeviceOrientationControls;
+}
+
 /** Event emitter class to handle events. */
 export declare class EventEmitter {
     eventHandlers: Record<string, ((...args: any[]) => void)[]>;
@@ -111,13 +184,25 @@ export declare class EventEmitter {
     off: (eventName: string, eventHandler: (...args: any[]) => void) => void;
 }
 
-declare interface GpsOptions {
+/** GPS intialisation options. */
+export declare interface GpsOptions {
     gpsMinDistance?: number;
     gpsMinAccuracy?: number;
 }
 
-/** The main class for the LocAR.js system.  */
-export declare class LocationBased extends EventEmitter {
+/** Event emitted when a GPS position is received. */
+export declare interface GpsReceivedEvent {
+    /** The new GPS position */
+    position: GeolocationPosition;
+    /** distance moved in metres since last GpsReceivedEvent */
+    distMoved: number;
+}
+
+/** The main engine class for the LocAR.js system.
+ * Can be obtained either via App.start() - which resolves with a LocAR object - or on its own.
+ * If you use this class without App, you must set up the three.js scene yourself, as you did with locar.js 0.1.x.
+ */
+export declare class LocAR extends EventEmitter {
     #private;
     scene: THREE.Scene;
     camera: THREE.Camera;
@@ -129,14 +214,14 @@ export declare class LocationBased extends EventEmitter {
      * setGpsOptions() below.
      * @param {Object} serverLogger - an object which can optionally log GPS position to a server for debugging. null by default, so no logging will be done. This object should implement a sendData() method to send data (2nd arg) to a given endpoint (1st arg). Please see source code for details. Ensure you comply with privacy laws (GDPR or equivalent) if implementing this.
      */
-    constructor(scene: THREE.Scene, camera: THREE.Camera, options?: GpsOptions, serverLogger?: ServerLogger | null);
+    constructor(scene: THREE.Scene, camera: THREE.Camera, options?: GpsOptions, serverLogger?: ServerLogger | null, projection?: Projection);
     /**
      * Set the projection to use.
      * @param {Object} any object which includes a project() method
      * taking longitude and latitude as arguments and returning an array
      * containing easting and northing.
      */
-    setProjection(proj: SphMercProjection): void;
+    setProjection(proj: Projection): void;
     /**
      * Set the GPS options.
      * @param {Object} object containing gpsMinDistance and/or gpsMinAccuracy
@@ -189,12 +274,19 @@ export declare class LocationBased extends EventEmitter {
      * @param {Object} properties - properties describing the object (for example,
      * the contents of the GeoJSON properties field).
      */
-    add(object: THREE.Object3D, lon: number, lat: number, elev: number | undefined, properties?: Record<string, any>): void;
+    add(object: THREE.Object3D, lon: number, lat: number, elev?: number | undefined, properties?: Record<string, any>): void;
+    addGeoLine(points: Array<[number, number, number?]>, material: THREE.Material, lineWidth?: number): void;
     /**
      * Set the elevation (y coordinate) of the camera.
      * @param {number} elev - the elevation in metres.
      */
     setElevation(elev: number): void;
+    /**
+     * Calculate haversine distance between two lat/lon pairs.
+     *
+     * Taken from original A-Frame AR.js location-based components
+     */
+    static haversineDist(src: LonLat, dest: LonLat): number;
     /**
      * Obtain the last known GPS location.
      *
@@ -203,17 +295,24 @@ export declare class LocationBased extends EventEmitter {
     getLastKnownLocation(): LonLat | null;
 }
 
-declare interface LonLat {
+/** Longitude and latitude. */
+export declare interface LonLat {
     longitude: number;
     latitude: number;
 }
 
-declare interface ServerLogger {
+/** Projection interface, you can create your own custom projection by implementing project() and unproject(). */
+export declare interface Projection {
+    project: (lon: number, lat: number) => [number, number];
+    unproject: (projected: [number, number]) => [number, number];
+}
+
+/** Server logger interface. */
+export declare interface ServerLogger {
     sendData(endpoint: string, data: any): Promise<Response> | Response;
 }
 
-/** Class representing a Spherical Mercator projection. */
-export declare class SphMercProjection {
+export declare class SphMercProjection implements Projection {
     #private;
     EARTH: number;
     HALF_EARTH: number;
@@ -233,7 +332,7 @@ export declare class SphMercProjection {
      * @param {Array} projected - Two-member array containing easting and northing
      * @return {Array} Two-member array containing longitude and latitude
      */
-    unproject: (projected: [number, number]) => number[];
+    unproject: (projected: [number, number]) => [number, number];
     /**
      * Return the projection's ID.
      * @return {string} The value "epsg:3857".
@@ -241,13 +340,10 @@ export declare class SphMercProjection {
     getID: () => string;
 }
 
-export declare const version = "0.1.8";
-
 /** Class to setup the webcam. */
 export declare class Webcam extends EventEmitter {
     #private;
     sceneWebcam: THREE.Scene;
-    texture: THREE.VideoTexture | null;
     /**
      * Create a Webcam.
      * @param constraints {Object} - options to use for initialising the camera.
@@ -261,20 +357,19 @@ export declare class Webcam extends EventEmitter {
             facingMode: string;
         };
     }, videoElementSelector?: string);
-    /**
-     * Free up the memory associated with the webcam.
-     * Should be called when your application closes.
-     */
-    dispose(): void;
+    getVideoDimensions(): string;
 }
 
+/** Event emitted when the webcam encounters an error. */
 export declare interface WebcamErrorEvent {
     code: string;
     message: string;
 }
 
+/** Event emitted when the webcam starts. */
 export declare interface WebcamStartedEvent {
-    texture: THREE.VideoTexture;
+    videoWidth: number;
+    videoHeight: number;
 }
 
 export { }

package/dist/locar.es.js

@@ -1,24 +1,6 @@
 import * as u from "three";
-import { Vector3 as T, Euler as w, Quaternion as f, EventDispatcher as A, MathUtils as h } from "three";
-class R {
-  /**
-   * Create a SphMercProjection.
-   */
-  constructor() {
-    this.project = (e, i) => [this.#e(e), this.#t(i)], this.unproject = (e) => [this.#i(e[0]), this.#s(e[1])], this.#e = (e) => e / 180 * this.HALF_EARTH, this.#t = (e) => {
-      var i = Math.log(Math.tan((90 + e) * Math.PI / 360)) / (Math.PI / 180);
-      return i * this.HALF_EARTH / 180;
-    }, this.#i = (e) => e / this.HALF_EARTH * 180, this.#s = (e) => {
-      var i = e / this.HALF_EARTH * 180;
-      return i = 180 / Math.PI * (2 * Math.atan(Math.exp(i * Math.PI / 180)) - Math.PI / 2), i;
-    }, this.getID = () => "epsg:3857", this.EARTH = 4007501668e-2, this.HALF_EARTH = 2003750834e-2;
-  }
-  #e;
-  #t;
-  #i;
-  #s;
-}
-class E {
+import { Vector3 as D, Euler as T, Quaternion as O, EventDispatcher as P, MathUtils as p } from "three";
+class w {
   constructor() {
     this.on = (e, i) => {
       this.eventHandlers[e] === void 0 && (this.eventHandlers[e] = []), this.eventHandlers[e].push(i);
@@ -34,14 +16,88 @@ class E {
     }, this.eventHandlers = {};
   }
 }
-class H extends E {
+class j extends w {
+  /**
+    * Create an App object.
+    * @param {AppOptions} - Startup options.
+    */
+  constructor({ cameraOptions: e, canvas: i, gpsOptions: t, videoConstraints: o, deviceOrientationOptions: l, serverLogger: m, projection: n }) {
+    super(), this.origHfov = e?.hFov || 80;
+    const s = 0;
+    this.cameraFeedDimensions = null;
+    const d = window.innerWidth / window.innerHeight;
+    this.camera = new u.PerspectiveCamera(this.origHfov / d, d, e?.near || 1e-3, e?.far || 1e3), i ? (this.renderer = new u.WebGLRenderer({ canvas: i, alpha: !0 }), this.renderer.setClearColor(65280, s)) : (this.renderer = new u.WebGLRenderer({ alpha: !0 }), this.renderer.setClearColor(65280, s), document.body.appendChild(this.renderer.domElement)), this.renderer.setSize(window.innerWidth, window.innerHeight), this.scene = new u.Scene();
+    const c = l || { enabled: !0 };
+    window.addEventListener("resize", () => {
+      this.renderer.setSize(window.innerWidth, window.innerHeight);
+      const a = window.innerWidth / window.innerHeight;
+      if (this.camera.aspect = a, this.cameraFeedDimensions !== null) {
+        const h = a > 1 ? this.cameraFeedDimensions.landWidth : this.cameraFeedDimensions.landHeight, g = a > 1 ? this.cameraFeedDimensions.landHeight : this.cameraFeedDimensions.landWidth;
+        this.#e(h, g, a);
+      }
+      this.camera.updateProjectionMatrix();
+    }), this.locar = new y(this.scene, this.camera, t, m, n), this.webcam = new q(o), this.deviceOrientationControls = c.enabled === !0 ? new z(this.camera, c) : null, this.renderer.setAnimationLoop(() => {
+      this.deviceOrientationControls?.update(), this.renderer.render(this.scene, this.camera);
+    });
+  }
+  /**
+   * Start the app.
+   * Must be called after construction.
+   * @returns {Promise<LocAR>}
+   * Promise resolving with LocAR object. Rejects with object containing code and message.
+   */
+  start() {
+    return new Promise((i, t) => {
+      this.webcam.on("webcamstarted", (o) => {
+        const l = o.videoWidth > o.videoHeight;
+        this.cameraFeedDimensions = {
+          landWidth: l ? o.videoWidth : o.videoHeight,
+          landHeight: l ? o.videoHeight : o.videoWidth
+        }, this.#e(o.videoWidth, o.videoHeight, window.innerWidth / window.innerHeight), this.camera.updateProjectionMatrix();
+      }), this.webcam.on("webcamerror", (o) => {
+        t({ code: o.code, message: o.message });
+      }), this.deviceOrientationControls === null ? i(this.locar) : (this.deviceOrientationControls?.on("deviceorientationgranted", (o) => {
+        o.target.connect(), i(this.locar);
+      }), this.deviceOrientationControls.on("deviceorientationerror", (o) => {
+        t({ code: o.code, message: o.message });
+      }), this.deviceOrientationControls.init());
+    });
+  }
+  #e(e, i, t) {
+    const o = e / i;
+    if (t < o) {
+      const l = e * (window.innerHeight / i), m = this.origHfov * (window.innerWidth / l);
+      this.camera.fov = m / t;
+    } else
+      this.camera.fov = this.origHfov / t;
+  }
+}
+class x {
+  /**
+   * Create a SphMercProjection.
+   */
+  constructor() {
+    this.project = (e, i) => [this.#e(e), this.#t(i)], this.unproject = (e) => [this.#i(e[0]), this.#n(e[1])], this.#e = (e) => e / 180 * this.HALF_EARTH, this.#t = (e) => {
+      var i = Math.log(Math.tan((90 + e) * Math.PI / 360)) / (Math.PI / 180);
+      return i * this.HALF_EARTH / 180;
+    }, this.#i = (e) => e / this.HALF_EARTH * 180, this.#n = (e) => {
+      var i = e / this.HALF_EARTH * 180;
+      return i = 180 / Math.PI * (2 * Math.atan(Math.exp(i * Math.PI / 180)) - Math.PI / 2), i;
+    }, this.getID = () => "epsg:3857", this.EARTH = 4007501668e-2, this.HALF_EARTH = 2003750834e-2;
+  }
+  #e;
+  #t;
+  #i;
+  #n;
+}
+class y extends w {
   #e;
   #t;
   #i;
-  #s;
-  #a;
   #n;
-  #l;
+  #a;
+  #s;
+  #d;
   #r;
   #o;
   /**
@@ -52,8 +108,8 @@ class H extends E {
    * setGpsOptions() below.
    * @param {Object} serverLogger - an object which can optionally log GPS position to a server for debugging. null by default, so no logging will be done. This object should implement a sendData() method to send data (2nd arg) to a given endpoint (1st arg). Please see source code for details. Ensure you comply with privacy laws (GDPR or equivalent) if implementing this.
    */
-  constructor(e, i, t = {}, l = null) {
-    super(), this.scene = e, this.camera = i, this.#e = new R(), this.#t = null, this.#i = 0, this.#s = 100, this.#a = null, this.setGpsOptions(t), this.#n = null, this.#l = 0, this.#r = 0, this.#o = l;
+  constructor(e, i, t = {}, o = null, l = new x()) {
+    super(), this.scene = e, this.camera = i, this.#e = l, this.#t = null, this.#i = 0, this.#n = 100, this.#a = null, this.setGpsOptions(t), this.#s = null, this.#d = 0, this.#r = 0, this.#o = o;
   }
   /**
    * Set the projection to use.
@@ -72,7 +128,7 @@ class H extends E {
    * minimum accuracy, in metres, for a GPS reading to be counted.
    */
   setGpsOptions(e = {}) {
-    e.gpsMinDistance !== void 0 && (this.#i = e.gpsMinDistance), e.gpsMinAccuracy !== void 0 && (this.#s = e.gpsMinAccuracy);
+    e.gpsMinDistance !== void 0 && (this.#i = e.gpsMinDistance), e.gpsMinAccuracy !== void 0 && (this.#n = e.gpsMinAccuracy);
   }
   /**
    * Start the GPS on a real device
@@ -83,13 +139,13 @@ class H extends E {
     if (this.#o) {
       const i = await (await this.#o.sendData("/gps/start", {
         gpsMinDistance: this.#i,
-        gpsMinAccuracy: this.#s
+        gpsMinAccuracy: this.#n
       })).json();
       this.#r = i.session;
     }
     return this.#a === null ? (this.#a = navigator.geolocation.watchPosition(
       (e) => {
-        this.#d(e);
+        this.#c(e);
       },
       (e) => {
         this.emit("gpserror", e);
@@ -116,12 +172,12 @@ class H extends E {
    * @param {number} acc - The accuracy of the GPS reading in metres. May be
    * ignored if lower than the specified minimum accuracy.
    */
-  fakeGps(e, i, t = null, l = 0) {
-    t !== null && this.setElevation(t), this.#d({
+  fakeGps(e, i, t = null, o = 0) {
+    t !== null && this.setElevation(t), this.#c({
       coords: {
         longitude: e,
         latitude: i,
-        accuracy: l
+        accuracy: o
       }
     });
   }
@@ -138,8 +194,8 @@ class H extends E {
    */
   lonLatToWorldCoords(e, i) {
     const t = this.#e.project(e, i);
-    if (this.#n)
-      t[0] -= this.#n[0], t[1] -= this.#n[1];
+    if (this.#s)
+      t[0] -= this.#s[0], t[1] -= this.#s[1];
     else
       throw "No initial position determined";
     return [t[0], -t[1]];
@@ -154,18 +210,55 @@ class H extends E {
    * @param {Object} properties - properties describing the object (for example,
    * the contents of the GeoJSON properties field).
    */
-  add(e, i, t, l, c = {}) {
-    e.properties = c, this.#c(e, i, t, l), this.scene.add(e), this.#o?.sendData("/object/new", {
+  add(e, i, t, o, l = {}) {
+    e.properties = l, this.#l(e, i, t, o || 0), this.scene.add(e), this.#o?.sendData("/object/new", {
       position: e.position,
       x: e.position.x,
       z: e.position.z,
       session: this.#r,
-      properties: c
+      properties: l
     });
   }
-  #c(e, i, t, l) {
-    const c = this.lonLatToWorldCoords(i, t);
-    l !== void 0 && (e.position.y = l), [e.position.x, e.position.z] = c;
+  addGeoLine(e, i, t = 1) {
+    const o = e.map(((n) => {
+      const [s, d] = this.lonLatToWorldCoords(n[0], n[1]);
+      return new u.Vector3(s, n[2] || 0, d);
+    })), l = this.#h(o, t);
+    i.setValues({ side: u.DoubleSide });
+    const m = new u.Mesh(l, i);
+    this.scene.add(m);
+  }
+  #h(e, i) {
+    let t, o, l, m, n = 0, s = 0, d = [], c;
+    const a = e.length - 1, h = [];
+    for (let r = 0; r < a; r++)
+      t = e[r + 1].x - e[r].x, o = e[r + 1].z - e[r].z, l = e[r + 1].y - e[r].y, m = Math.sqrt(t * t + l * l + o * o), n = -(o * (i / 2)) / m, s = t * (i / 2) / m, c = [
+        e[r].x - n,
+        e[r].y,
+        e[r].z - s,
+        e[r].x + n,
+        e[r].y,
+        e[r].z + s
+      ], r > 0 && c.forEach((C, R) => {
+        C = (C + d[R]) / 2;
+      }), h.push(...c), d = [
+        e[r + 1].x - n,
+        e[r + 1].y,
+        e[r + 1].z - s,
+        e[r + 1].x + n,
+        e[r + 1].y,
+        e[r + 1].z + s
+      ];
+    h.push(e[a].x - n), h.push(e[a].y), h.push(e[a].z - s), h.push(e[a].x + n), h.push(e[a].y), h.push(e[a].z + s);
+    let g = [];
+    for (let r = 0; r < a; r++)
+      g.push(r * 2, r * 2 + 1, r * 2 + 2), g.push(r * 2 + 1, r * 2 + 3, r * 2 + 2);
+    let f = new u.BufferGeometry(), M = new Float32Array(h);
+    return f.setIndex(g), f.setAttribute("position", new u.BufferAttribute(M, 3)), f.computeBoundingBox(), f;
+  }
+  #l(e, i, t, o) {
+    const l = this.lonLatToWorldCoords(i, t);
+    o !== void 0 && (e.position.y = o), [e.position.x, e.position.z] = l;
   }
   /**
    * Set the elevation (y coordinate) of the camera.
@@ -174,35 +267,35 @@ class H extends E {
   setElevation(e) {
     this.camera.position.y = e;
   }
-  #h(e, i) {
-    this.#n = this.#e.project(e, i);
+  #u(e, i) {
+    this.#s = this.#e.project(e, i);
   }
-  #d(e) {
+  #c(e) {
     let i = Number.MAX_VALUE;
-    this.#l++, this.#o?.sendData("/gps/new", {
-      gpsCount: this.#l,
+    this.#d++, this.#o?.sendData("/gps/new", {
+      gpsCount: this.#d,
       lat: e.coords.latitude,
       lon: e.coords.longitude,
       acc: e.coords.accuracy,
       session: this.#r
-    }), e.coords.accuracy <= this.#s && (this.#t === null ? this.#t = {
+    }), e.coords.accuracy <= this.#n && (this.#t === null ? this.#t = {
       latitude: e.coords.latitude,
       longitude: e.coords.longitude
-    } : i = this.#u(this.#t, e.coords), i >= this.#i && (this.#t.longitude = e.coords.longitude, this.#t.latitude = e.coords.latitude, this.#n || (this.#h(
+    } : i = y.haversineDist(this.#t, e.coords), i >= this.#i && (this.#t.longitude = e.coords.longitude, this.#t.latitude = e.coords.latitude, this.#s || (this.#u(
       e.coords.longitude,
       e.coords.latitude
     ), this.#o?.sendData("/worldorigin/new", {
-      gpsCount: this.#l,
+      gpsCount: this.#d,
       lat: e.coords.latitude,
       lon: e.coords.longitude,
       session: this.#r,
-      initialPosition: this.#n
-    })), this.#c(
+      initialPosition: this.#s
+    })), this.#l(
       this.camera,
       e.coords.longitude,
       e.coords.latitude
     ), this.#o?.sendData("/gps/accepted", {
-      gpsCount: this.#l,
+      gpsCount: this.#d,
       cameraX: this.camera.position.x,
       cameraZ: this.camera.position.z,
       session: this.#r,
@@ -214,9 +307,9 @@ class H extends E {
    *
    * Taken from original A-Frame AR.js location-based components
    */
-  #u(e, i) {
-    const t = u.MathUtils.degToRad(i.longitude - e.longitude), l = u.MathUtils.degToRad(i.latitude - e.latitude), c = Math.sin(l / 2) * Math.sin(l / 2) + Math.cos(u.MathUtils.degToRad(e.latitude)) * Math.cos(u.MathUtils.degToRad(i.latitude)) * (Math.sin(t / 2) * Math.sin(t / 2));
-    return 2 * Math.atan2(Math.sqrt(c), Math.sqrt(1 - c)) * 6371e3;
+  static haversineDist(e, i) {
+    const t = u.MathUtils.degToRad(i.longitude - e.longitude), o = u.MathUtils.degToRad(i.latitude - e.latitude), l = Math.sin(o / 2) * Math.sin(o / 2) + Math.cos(u.MathUtils.degToRad(e.latitude)) * Math.cos(u.MathUtils.degToRad(i.latitude)) * (Math.sin(t / 2) * Math.sin(t / 2));
+    return 2 * Math.atan2(Math.sqrt(l), Math.sqrt(1 - l)) * 6371e3;
   }
   /**
    * Obtain the last known GPS location.
@@ -227,8 +320,8 @@ class H extends E {
     return this.#t;
   }
 }
-const b = "locar-device-orientation-permission-modal", M = "locar-device-orientation-permission-button", _ = "locar-device-orientation-permission-message", D = "locar-device-orientation-permission-inner", P = "locar-device-orientation-permission-button-inner", O = "This immersive website requires access to your device motion sensors.", p = navigator.userAgent.match(/iPhone|iPad|iPod/i) || /Macintosh/i.test(navigator.userAgent) && navigator.maxTouchPoints != null && navigator.maxTouchPoints > 1, N = new T(0, 0, 1), y = new w(), S = new f(), x = new f(-Math.sqrt(0.5), 0, 0, Math.sqrt(0.5)), I = 0.5 * Math.PI;
-class q extends A {
+const _ = "locar-device-orientation-permission-modal", H = "locar-device-orientation-permission-button", L = "locar-device-orientation-permission-message", N = "locar-device-orientation-permission-inner", S = "locar-device-orientation-permission-button-inner", b = "This immersive website requires access to your device motion sensors.", E = navigator.userAgent.match(/iPhone|iPad|iPod/i) || /Macintosh/i.test(navigator.userAgent) && navigator.maxTouchPoints != null && navigator.maxTouchPoints > 1, W = new D(0, 0, 1), I = new T(), F = new O(), V = new O(-Math.sqrt(0.5), 0, 0, Math.sqrt(0.5)), A = 0.5 * Math.PI;
+class z extends P {
   /**
    * Create an instance of DeviceOrientationControls.
    * @param {Object} object - the object to attach the controls to
@@ -245,55 +338,55 @@ class q extends A {
         code: "LOCAR_DEVICE_ORIENTATION_NO_HTTPS",
         message: "DeviceOrientationEvent is only available in secure contexts (https)"
       }) : typeof window.DeviceOrientationEvent.requestPermission == "function" && this.enablePermissionDialog ? this.obtainPermissionGesture() : this.eventEmitter.emit("deviceorientationgranted", { target: this });
-    }, this.eventEmitter = new E();
+    }, this.eventEmitter = new w();
     const t = this;
-    this.object = e, this.object.rotation.reorder("YXZ"), this.enabled = !0, this.deviceOrientation = null, this.screenOrientation = 0, this.alphaOffset = 0, this.orientationOffset = 0, this.initialOffset = null, this.lastQuaternion = null, this.orientationChangeEventName = "ondeviceorientationabsolute" in window ? "deviceorientationabsolute" : "deviceorientation", this.smoothingFactor = i.smoothingFactor || 1, this.enablePermissionDialog = i.enablePermissionDialog ?? !0, this.enableInlineStyling = i.enableStyling ?? !0, this.preferConfirmDialog = i.preferConfirmDialog ?? !1, this.orientationChangeThreshold = i.orientationChangeThreshold ?? 0;
-    const l = (s) => {
-      let { alpha: n, beta: a, gamma: r, webkitCompassHeading: o } = s;
-      if (n = n ?? 0, a = a ?? 0, r = r ?? 0, o = o ?? 0, p) {
-        const d = 360 - o;
-        t.alphaOffset = h.degToRad(d - n), t.deviceOrientation = { alpha: n, beta: a, gamma: r, webkitCompassHeading: o };
+    this.object = e, this.object.rotation.reorder("YXZ"), this.enabled = !0, this.deviceOrientation = null, this.screenOrientation = 0, this.alphaOffset = 0, this.orientationOffset = 0, this.initialOffset = null, this.lastQuaternion = null, this.orientationChangeEventName = "ondeviceorientationabsolute" in window ? "deviceorientationabsolute" : "deviceorientation", this.smoothingFactor = i.smoothingFactor || 0.2, this.enablePermissionDialog = i.enablePermissionDialog ?? !0, this.enableInlineStyling = i.enableStyling ?? !0, this.preferConfirmDialog = i.preferConfirmDialog ?? !1, this.orientationChangeThreshold = i.orientationChangeThreshold ?? 0;
+    const o = (n) => {
+      let { alpha: s, beta: d, gamma: c, webkitCompassHeading: a } = n;
+      if (s = s ?? 0, d = d ?? 0, c = c ?? 0, a = a ?? 0, E) {
+        const h = 360 - a;
+        t.alphaOffset = p.degToRad(h - s), t.deviceOrientation = { alpha: s, beta: d, gamma: c, webkitCompassHeading: a };
       } else
-        n < 0 && (n += 360), t.deviceOrientation = { alpha: n, beta: a, gamma: r };
+        s < 0 && (s += 360), t.deviceOrientation = { alpha: s, beta: d, gamma: c };
       window.dispatchEvent(
         new CustomEvent("camera-rotation-change", {
           detail: { cameraRotation: e.rotation }
         })
       );
-    }, c = () => {
-      t.screenOrientation = window.screen.orientation?.angle ?? 0, p && (t.screenOrientation === 90 ? t.orientationOffset = -I : t.screenOrientation === -90 ? t.orientationOffset = I : t.orientationOffset = 0);
-    }, v = (s, n, a, r, o) => {
-      y.set(a, n, -r, "YXZ"), s.setFromEuler(y), s.multiply(x), s.multiply(S.setFromAxisAngle(N, -o));
+    }, l = () => {
+      t.screenOrientation = window.screen.orientation?.angle ?? 0, E && (t.screenOrientation === 90 ? t.orientationOffset = -A : t.screenOrientation === -90 ? t.orientationOffset = A : t.orientationOffset = 0);
+    }, m = (n, s, d, c, a) => {
+      I.set(d, s, -c, "YXZ"), n.setFromEuler(I), n.multiply(V), n.multiply(F.setFromAxisAngle(W, -a));
     };
     this.connect = () => {
-      c(), window.addEventListener(
+      l(), window.addEventListener(
         "orientationchange",
-        c
+        l
       ), window.addEventListener(
         t.orientationChangeEventName,
-        l
+        o
       ), t.enabled = !0;
     }, this.disconnect = () => {
       window.removeEventListener(
         "orientationchange",
-        c
+        l
       ), window.removeEventListener(
         t.orientationChangeEventName,
-        l
+        o
       ), t.enabled = !1, t.initialOffset = !1, t.deviceOrientation = null, t.lastQuaternion = null;
     }, this.requestOrientationPermissions = () => {
-      window.DeviceOrientationEvent !== void 0 && typeof window.DeviceOrientationEvent.requestPermission == "function" ? window.DeviceOrientationEvent.requestPermission().then((s) => {
-        s === "granted" ? this.eventEmitter.emit("deviceorientationgranted", {
+      window.DeviceOrientationEvent !== void 0 && typeof window.DeviceOrientationEvent.requestPermission == "function" ? window.DeviceOrientationEvent.requestPermission().then((n) => {
+        n === "granted" ? this.eventEmitter.emit("deviceorientationgranted", {
           target: this
         }) : this.eventEmitter.emit("deviceorientationerror", {
           code: "LOCAR_DEVICE_ORIENTATION_PERMISSION_DENIED",
           message: "Permission for device orientation denied - AR will not work correctly"
         });
-      }).catch((s) => {
+      }).catch((n) => {
         this.eventEmitter.emit("deviceorientationerror", {
           code: "LOCAR_DEVICE_ORIENTATION_PERMISSION_FAILED",
           message: "Permission request for device orientation failed - AR will not work correctly",
-          error: JSON.stringify(s, null, 2)
+          error: JSON.stringify(n, null, 2)
         });
       }) : this.eventEmitter.emit("deviceorientationerror", {
         code: "LOCAR_DEVICE_ORIENTATION_INTERNAL_ERROR",
@@ -301,28 +394,28 @@ class q extends A {
       });
     }, this.update = () => {
       if (t.enabled === !1) return;
-      const s = t.deviceOrientation;
-      if (s) {
-        let n = s.alpha ? h.degToRad(s.alpha) + t.alphaOffset : 0, a = s.beta ? h.degToRad(s.beta) : 0, r = s.gamma ? h.degToRad(s.gamma) : 0;
-        const o = t.screenOrientation ? h.degToRad(t.screenOrientation) : 0, d = new f();
-        if (p) {
-          v(d, n, a, r, o);
-          const g = new w().setFromQuaternion(
-            d,
+      const n = t.deviceOrientation;
+      if (n) {
+        let s = n.alpha ? p.degToRad(n.alpha) + t.alphaOffset : 0, d = n.beta ? p.degToRad(n.beta) : 0, c = n.gamma ? p.degToRad(n.gamma) : 0;
+        const a = t.screenOrientation ? p.degToRad(t.screenOrientation) : 0, h = new O();
+        if (E) {
+          m(h, s, d, c, a);
+          const g = new T().setFromQuaternion(
+            h,
             "YXZ"
-          ), C = h.degToRad(
-            360 - (s.webkitCompassHeading ?? 0)
+          ), f = p.degToRad(
+            360 - (n.webkitCompassHeading ?? 0)
           );
-          g.y = C + (t.orientationOffset || 0), d.setFromEuler(g);
+          g.y = f + (t.orientationOffset || 0), h.setFromEuler(g);
         } else
-          v(d, n, a, r, o);
-        if (t.lastQuaternion && t.orientationChangeThreshold > 0 && d.angleTo(t.lastQuaternion) < t.orientationChangeThreshold)
+          m(h, s, d, c, a);
+        if (t.lastQuaternion && t.orientationChangeThreshold > 0 && h.angleTo(t.lastQuaternion) < t.orientationChangeThreshold)
           return;
         if (t.smoothingFactor < 1 && t.lastQuaternion) {
           const g = 1 - t.smoothingFactor;
-          t.object.quaternion.slerp(d, g);
+          t.object.quaternion.slerp(h, g);
         } else
-          t.object.quaternion.copy(d);
+          t.object.quaternion.copy(h);
         t.lastQuaternion = t.object.quaternion.clone(), window.dispatchEvent(
           new CustomEvent("camera-rotation-change", {
             detail: { cameraRotation: t.object.rotation }
@@ -330,49 +423,49 @@ class q extends A {
         );
       }
     }, this.getCorrectedHeading = () => {
-      const { deviceOrientation: s } = t;
-      if (!s) return 0;
-      let n = 0;
-      return p ? (n = 360 - (s.webkitCompassHeading ?? 0), t.orientationOffset && (n += t.orientationOffset * (180 / Math.PI), n = (n + 360) % 360)) : (s.absolute === !0 || t.orientationChangeEventName, n = s.alpha ? s.alpha : 0, n = (360 - n) % 360, n < 0 && (n += 360)), n;
+      const { deviceOrientation: n } = t;
+      if (!n) return 0;
+      let s = 0;
+      return E ? (s = 360 - (n.webkitCompassHeading ?? 0), t.orientationOffset && (s += t.orientationOffset * (180 / Math.PI), s = (s + 360) % 360)) : (n.absolute === !0 || t.orientationChangeEventName, s = n.alpha ? n.alpha : 0, s = (360 - s) % 360, s < 0 && (s += 360)), s;
     }, this.updateAlphaOffset = () => {
       t.initialOffset = !1;
     }, this.dispose = () => {
       t.disconnect();
     }, this.getAlpha = () => {
-      const { deviceOrientation: s } = t;
-      return s && s.alpha ? h.degToRad(s.alpha) + t.alphaOffset : 0;
+      const { deviceOrientation: n } = t;
+      return n && n.alpha ? p.degToRad(n.alpha) + t.alphaOffset : 0;
     }, this.getBeta = () => {
-      const { deviceOrientation: s } = t;
-      return s && s.beta ? h.degToRad(s.beta) : 0;
+      const { deviceOrientation: n } = t;
+      return n && n.beta ? p.degToRad(n.beta) : 0;
     }, this.getGamma = () => {
-      const { deviceOrientation: s } = t;
-      return s && s.gamma ? h.degToRad(s.gamma) : 0;
+      const { deviceOrientation: n } = t;
+      return n && n.gamma ? p.degToRad(n.gamma) : 0;
     }, this.createObtainPermissionGestureDialog = () => {
-      const s = document.createElement("div");
-      s.classList.add(b);
       const n = document.createElement("div");
-      n.classList.add(D);
-      const a = document.createElement("div");
-      a.classList.add(_);
-      const r = document.createElement("div");
-      r.classList.add(P);
-      const o = document.createElement("button");
-      o.classList.add(M), document.body.appendChild(s), this.enableInlineStyling === !0 && (s.style.fontFamily = "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'", s.style.display = "flex", s.style.position = "fixed", s.style.zIndex = "100000", s.style.justifyContent = "center", s.style.alignItems = "center", s.style.backgroundColor = "rgba(0,0,0,0.2)", s.style.inset = "0", s.style.padding = "20px", n.style.backgroundColor = "rgba(220, 220, 220, 0.85)", n.style.padding = "6px 0", n.style.borderRadius = "10px", n.style.width = "100%", n.style.maxWidth = "400px", a.style.padding = "10px 12px", a.style.textAlign = "center", a.style.fontWeight = "400", a.style.fontSize = "13px", a.style.display = "flex", a.style.justifyContent = "center", a.style.alignItems = "center", r.style.display = "block", r.style.textAlign = "center", r.style.textDecoration = "none", r.style.borderTop = "rgb(180,180,180) solid 1px", o.style.display = "block", o.style.width = "100%", o.style.textAlign = "center", o.style.appearance = "none", o.style.background = "none", o.style.border = "none", o.style.outline = "none", o.style.padding = "10px", o.style.fontWeight = "400", o.style.fontSize = "16px", o.style.color = "#2e7cf1", o.style.cursor = "pointer"), s.appendChild(n), n.appendChild(a), n.appendChild(r), a.appendChild(
-        document.createTextNode(O)
+      n.classList.add(_);
+      const s = document.createElement("div");
+      s.classList.add(N);
+      const d = document.createElement("div");
+      d.classList.add(L);
+      const c = document.createElement("div");
+      c.classList.add(S);
+      const a = document.createElement("button");
+      a.classList.add(H), document.body.appendChild(n), this.enableInlineStyling === !0 && (n.style.fontFamily = "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'", n.style.display = "flex", n.style.position = "fixed", n.style.zIndex = "100000", n.style.justifyContent = "center", n.style.alignItems = "center", n.style.backgroundColor = "rgba(0,0,0,0.2)", n.style.inset = "0", n.style.padding = "20px", s.style.backgroundColor = "rgba(220, 220, 220, 0.85)", s.style.padding = "6px 0", s.style.borderRadius = "10px", s.style.width = "100%", s.style.maxWidth = "400px", d.style.padding = "10px 12px", d.style.textAlign = "center", d.style.fontWeight = "400", d.style.fontSize = "13px", d.style.display = "flex", d.style.justifyContent = "center", d.style.alignItems = "center", c.style.display = "block", c.style.textAlign = "center", c.style.textDecoration = "none", c.style.borderTop = "rgb(180,180,180) solid 1px", a.style.display = "block", a.style.width = "100%", a.style.textAlign = "center", a.style.appearance = "none", a.style.background = "none", a.style.border = "none", a.style.outline = "none", a.style.padding = "10px", a.style.fontWeight = "400", a.style.fontSize = "16px", a.style.color = "#2e7cf1", a.style.cursor = "pointer"), n.appendChild(s), s.appendChild(d), s.appendChild(c), d.appendChild(
+        document.createTextNode(b)
       );
-      const d = () => {
-        this.requestOrientationPermissions(), s.style.display = "none";
+      const h = () => {
+        this.requestOrientationPermissions(), n.style.display = "none";
       };
-      o.addEventListener("click", d), o.appendChild(document.createTextNode("OK")), r.appendChild(o), document.body.appendChild(s);
+      a.addEventListener("click", h), a.appendChild(document.createTextNode("OK")), c.appendChild(a), document.body.appendChild(n);
     }, this.obtainPermissionGesture = () => {
-      this.preferConfirmDialog === !0 ? window.confirm(O) && this.requestOrientationPermissions() : this.createObtainPermissionGestureDialog();
+      this.preferConfirmDialog === !0 ? window.confirm(b) && this.requestOrientationPermissions() : this.createObtainPermissionGestureDialog();
     };
   }
   on(e, i) {
     this.eventEmitter.on(e, i);
   }
 }
-class F {
+class G {
   /**
    * Create a ClickHandler.
    * @param {THREE.WebGLRenderer} - The Three.js renderer on which the click
@@ -403,7 +496,7 @@ class F {
     return [];
   }
 }
-class j extends E {
+class q extends w {
   #e;
   /**
    * Create a Webcam.
@@ -414,15 +507,18 @@ class j extends E {
    * undefined), a video element will be created.
    */
   constructor(e = { video: { facingMode: "environment" } }, i) {
-    super(), this.sceneWebcam = new u.Scene(), i ? this.#e = document.querySelector(i) : (this.#e = document.createElement("video"), this.#e.setAttribute("autoplay", "true"), this.#e.setAttribute("playsinline", "true"), this.#e.style.display = "none", document.body.appendChild(this.#e)), this.texture = this.#e ? new u.VideoTexture(this.#e) : null, navigator.mediaDevices && navigator.mediaDevices.getUserMedia ? navigator.mediaDevices.getUserMedia(e).then((t) => {
+    super(), this.sceneWebcam = new u.Scene(), i ? this.#e = document.querySelector(i) : (this.#e = document.createElement("video"), this.#e.setAttribute("autoplay", "true"), this.#e.setAttribute("playsinline", "true"), this.#e.style.cssText += `
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        background: black;
+        position: absolute;
+        top: 0px;
+        left: 0px;
+	      z-index: -100;  
+      `, document.body.appendChild(this.#e)), navigator.mediaDevices && navigator.mediaDevices.getUserMedia ? navigator.mediaDevices.getUserMedia(e).then((t) => {
       this.#e?.addEventListener("loadedmetadata", () => {
-        this.#e?.setAttribute(
-          "width",
-          this.#e?.videoWidth.toString() ?? "0"
-        ), this.#e?.setAttribute(
-          "height",
-          this.#e?.videoHeight.toString() ?? "0"
-        ), this.#e?.play(), this.emit("webcamstarted", { texture: this.texture });
+        this.#e.play(), this.emit("webcamstarted", { videoWidth: this.#e.videoWidth, videoHeight: this.#e.videoHeight });
       }), this.#e && (this.#e.srcObject = t);
     }).catch((t) => {
       this.emit("webcamerror", {
@@ -434,21 +530,16 @@ class j extends E {
       message: "Media devices API not supported"
     });
   }
-  /**
-   * Free up the memory associated with the webcam.
-   * Should be called when your application closes.
-   */
-  dispose() {
-    this.texture?.dispose();
+  getVideoDimensions() {
+    return `w ${this.#e.videoWidth}, h ${this.#e.videoHeight}`;
   }
 }
-const k = "0.1.8";
 export {
-  F as ClickHandler,
-  q as DeviceOrientationControls,
-  E as EventEmitter,
-  H as LocationBased,
-  R as SphMercProjection,
-  j as Webcam,
-  k as version
+  j as App,
+  G as ClickHandler,
+  z as DeviceOrientationControls,
+  w as EventEmitter,
+  y as LocAR,
+  x as SphMercProjection,
+  q as Webcam
 };

package/dist/locar.umd.js

@@ -1 +1,10 @@
-(function(d,a){typeof exports=="object"&&typeof module<"u"?a(exports,require("three")):typeof define=="function"&&define.amd?define(["exports","three"],a):(d=typeof globalThis<"u"?globalThis:d||self,a(d.locar={},d.THREE))})(this,(function(d,a){"use strict";function b(h){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(h){for(const i in h)if(i!=="default"){const t=Object.getOwnPropertyDescriptor(h,i);Object.defineProperty(e,i,t.get?t:{enumerable:!0,get:()=>h[i]})}}return e.default=h,Object.freeze(e)}const m=b(a);class y{constructor(){this.project=(e,i)=>[this.#e(e),this.#t(i)],this.unproject=e=>[this.#i(e[0]),this.#n(e[1])],this.#e=e=>e/180*this.HALF_EARTH,this.#t=e=>{var i=Math.log(Math.tan((90+e)*Math.PI/360))/(Math.PI/180);return i*this.HALF_EARTH/180},this.#i=e=>e/this.HALF_EARTH*180,this.#n=e=>{var i=e/this.HALF_EARTH*180;return i=180/Math.PI*(2*Math.atan(Math.exp(i*Math.PI/180))-Math.PI/2),i},this.getID=()=>"epsg:3857",this.EARTH=4007501668e-2,this.HALF_EARTH=2003750834e-2}#e;#t;#i;#n}class f{constructor(){this.on=(e,i)=>{this.eventHandlers[e]===void 0&&(this.eventHandlers[e]=[]),this.eventHandlers[e].push(i)},this.emit=(e,...i)=>{this.eventHandlers[e]?.forEach(t=>{t(...i)})},this.off=(e,i)=>{if(this.eventHandlers[e]){const t=this.eventHandlers[e].indexOf(i);t>-1&&this.eventHandlers[e].splice(t,1)}},this.eventHandlers={}}}class w extends f{#e;#t;#i;#n;#a;#s;#l;#r;#o;constructor(e,i,t={},c=null){super(),this.scene=e,this.camera=i,this.#e=new y,this.#t=null,this.#i=0,this.#n=100,this.#a=null,this.setGpsOptions(t),this.#s=null,this.#l=0,this.#r=0,this.#o=c}setProjection(e){this.#e=e}setGpsOptions(e={}){e.gpsMinDistance!==void 0&&(this.#i=e.gpsMinDistance),e.gpsMinAccuracy!==void 0&&(this.#n=e.gpsMinAccuracy)}async startGps(){if(this.#o){const i=await(await this.#o.sendData("/gps/start",{gpsMinDistance:this.#i,gpsMinAccuracy:this.#n})).json();this.#r=i.session}return this.#a===null?(this.#a=navigator.geolocation.watchPosition(e=>{this.#d(e)},e=>{this.emit("gpserror",e)},{enableHighAccuracy:!0}),!0):!1}stopGps(){return this.#a!==null?(navigator.geolocation.clearWatch(this.#a),this.#a=null,!0):!1}fakeGps(e,i,t=null,c=0){t!==null&&this.setElevation(t),this.#d({coords:{longitude:e,latitude:i,accuracy:c}})}lonLatToWorldCoords(e,i){const t=this.#e.project(e,i);if(this.#s)t[0]-=this.#s[0],t[1]-=this.#s[1];else throw"No initial position determined";return[t[0],-t[1]]}add(e,i,t,c,u={}){e.properties=u,this.#c(e,i,t,c),this.scene.add(e),this.#o?.sendData("/object/new",{position:e.position,x:e.position.x,z:e.position.z,session:this.#r,properties:u})}#c(e,i,t,c){const u=this.lonLatToWorldCoords(i,t);c!==void 0&&(e.position.y=c),[e.position.x,e.position.z]=u}setElevation(e){this.camera.position.y=e}#h(e,i){this.#s=this.#e.project(e,i)}#d(e){let i=Number.MAX_VALUE;this.#l++,this.#o?.sendData("/gps/new",{gpsCount:this.#l,lat:e.coords.latitude,lon:e.coords.longitude,acc:e.coords.accuracy,session:this.#r}),e.coords.accuracy<=this.#n&&(this.#t===null?this.#t={latitude:e.coords.latitude,longitude:e.coords.longitude}:i=this.#u(this.#t,e.coords),i>=this.#i&&(this.#t.longitude=e.coords.longitude,this.#t.latitude=e.coords.latitude,this.#s||(this.#h(e.coords.longitude,e.coords.latitude),this.#o?.sendData("/worldorigin/new",{gpsCount:this.#l,lat:e.coords.latitude,lon:e.coords.longitude,session:this.#r,initialPosition:this.#s})),this.#c(this.camera,e.coords.longitude,e.coords.latitude),this.#o?.sendData("/gps/accepted",{gpsCount:this.#l,cameraX:this.camera.position.x,cameraZ:this.camera.position.z,session:this.#r,distMoved:i}),this.emit("gpsupdate",{position:e,distMoved:i})))}#u(e,i){const t=m.MathUtils.degToRad(i.longitude-e.longitude),c=m.MathUtils.degToRad(i.latitude-e.latitude),u=Math.sin(c/2)*Math.sin(c/2)+Math.cos(m.MathUtils.degToRad(e.latitude))*Math.cos(m.MathUtils.degToRad(i.latitude))*(Math.sin(t/2)*Math.sin(t/2));return 2*Math.atan2(Math.sqrt(u),Math.sqrt(1-u))*6371e3}getLastKnownLocation(){return this.#t}}const C="locar-device-orientation-permission-modal",A="locar-device-orientation-permission-button",_="locar-device-orientation-permission-message",P="locar-device-orientation-permission-inner",D="locar-device-orientation-permission-button-inner",E="This immersive website requires access to your device motion sensors.",v=navigator.userAgent.match(/iPhone|iPad|iPod/i)||/Macintosh/i.test(navigator.userAgent)&&navigator.maxTouchPoints!=null&&navigator.maxTouchPoints>1,T=new a.Vector3(0,0,1),I=new a.Euler,R=new a.Quaternion,S=new a.Quaternion(-Math.sqrt(.5),0,0,Math.sqrt(.5)),M=.5*Math.PI;class N extends a.EventDispatcher{constructor(e,i={}){super(),this.init=()=>{window.DeviceOrientationEvent===void 0?this.eventEmitter.emit("deviceorientationerror",{code:"LOCAR_DEVICE_ORIENTATION_NOT_SUPPORTED",message:"Device orientation API not supported"}):window.isSecureContext===!1?this.eventEmitter.emit("deviceorientationerror",{code:"LOCAR_DEVICE_ORIENTATION_NO_HTTPS",message:"DeviceOrientationEvent is only available in secure contexts (https)"}):typeof window.DeviceOrientationEvent.requestPermission=="function"&&this.enablePermissionDialog?this.obtainPermissionGesture():this.eventEmitter.emit("deviceorientationgranted",{target:this})},this.eventEmitter=new f;const t=this;this.object=e,this.object.rotation.reorder("YXZ"),this.enabled=!0,this.deviceOrientation=null,this.screenOrientation=0,this.alphaOffset=0,this.orientationOffset=0,this.initialOffset=null,this.lastQuaternion=null,this.orientationChangeEventName="ondeviceorientationabsolute"in window?"deviceorientationabsolute":"deviceorientation",this.smoothingFactor=i.smoothingFactor||1,this.enablePermissionDialog=i.enablePermissionDialog??!0,this.enableInlineStyling=i.enableStyling??!0,this.preferConfirmDialog=i.preferConfirmDialog??!1,this.orientationChangeThreshold=i.orientationChangeThreshold??0;const c=n=>{let{alpha:s,beta:r,gamma:l,webkitCompassHeading:o}=n;if(s=s??0,r=r??0,l=l??0,o=o??0,v){const g=360-o;t.alphaOffset=a.MathUtils.degToRad(g-s),t.deviceOrientation={alpha:s,beta:r,gamma:l,webkitCompassHeading:o}}else s<0&&(s+=360),t.deviceOrientation={alpha:s,beta:r,gamma:l};window.dispatchEvent(new CustomEvent("camera-rotation-change",{detail:{cameraRotation:e.rotation}}))},u=()=>{t.screenOrientation=window.screen.orientation?.angle??0,v&&(t.screenOrientation===90?t.orientationOffset=-M:t.screenOrientation===-90?t.orientationOffset=M:t.orientationOffset=0)},O=(n,s,r,l,o)=>{I.set(r,s,-l,"YXZ"),n.setFromEuler(I),n.multiply(S),n.multiply(R.setFromAxisAngle(T,-o))};this.connect=()=>{u(),window.addEventListener("orientationchange",u),window.addEventListener(t.orientationChangeEventName,c),t.enabled=!0},this.disconnect=()=>{window.removeEventListener("orientationchange",u),window.removeEventListener(t.orientationChangeEventName,c),t.enabled=!1,t.initialOffset=!1,t.deviceOrientation=null,t.lastQuaternion=null},this.requestOrientationPermissions=()=>{window.DeviceOrientationEvent!==void 0&&typeof window.DeviceOrientationEvent.requestPermission=="function"?window.DeviceOrientationEvent.requestPermission().then(n=>{n==="granted"?this.eventEmitter.emit("deviceorientationgranted",{target:this}):this.eventEmitter.emit("deviceorientationerror",{code:"LOCAR_DEVICE_ORIENTATION_PERMISSION_DENIED",message:"Permission for device orientation denied - AR will not work correctly"})}).catch(n=>{this.eventEmitter.emit("deviceorientationerror",{code:"LOCAR_DEVICE_ORIENTATION_PERMISSION_FAILED",message:"Permission request for device orientation failed - AR will not work correctly",error:JSON.stringify(n,null,2)})}):this.eventEmitter.emit("deviceorientationerror",{code:"LOCAR_DEVICE_ORIENTATION_INTERNAL_ERROR",message:"Internal error: no requestPermission() found although requestOrientationPermissions() was called - please raise an issue on GitHub"})},this.update=()=>{if(t.enabled===!1)return;const n=t.deviceOrientation;if(n){let s=n.alpha?a.MathUtils.degToRad(n.alpha)+t.alphaOffset:0,r=n.beta?a.MathUtils.degToRad(n.beta):0,l=n.gamma?a.MathUtils.degToRad(n.gamma):0;const o=t.screenOrientation?a.MathUtils.degToRad(t.screenOrientation):0,g=new a.Quaternion;if(v){O(g,s,r,l,o);const p=new a.Euler().setFromQuaternion(g,"YXZ"),U=a.MathUtils.degToRad(360-(n.webkitCompassHeading??0));p.y=U+(t.orientationOffset||0),g.setFromEuler(p)}else O(g,s,r,l,o);if(t.lastQuaternion&&t.orientationChangeThreshold>0&&g.angleTo(t.lastQuaternion)<t.orientationChangeThreshold)return;if(t.smoothingFactor<1&&t.lastQuaternion){const p=1-t.smoothingFactor;t.object.quaternion.slerp(g,p)}else t.object.quaternion.copy(g);t.lastQuaternion=t.object.quaternion.clone(),window.dispatchEvent(new CustomEvent("camera-rotation-change",{detail:{cameraRotation:t.object.rotation}}))}},this.getCorrectedHeading=()=>{const{deviceOrientation:n}=t;if(!n)return 0;let s=0;return v?(s=360-(n.webkitCompassHeading??0),t.orientationOffset&&(s+=t.orientationOffset*(180/Math.PI),s=(s+360)%360)):(n.absolute===!0||t.orientationChangeEventName,s=n.alpha?n.alpha:0,s=(360-s)%360,s<0&&(s+=360)),s},this.updateAlphaOffset=()=>{t.initialOffset=!1},this.dispose=()=>{t.disconnect()},this.getAlpha=()=>{const{deviceOrientation:n}=t;return n&&n.alpha?a.MathUtils.degToRad(n.alpha)+t.alphaOffset:0},this.getBeta=()=>{const{deviceOrientation:n}=t;return n&&n.beta?a.MathUtils.degToRad(n.beta):0},this.getGamma=()=>{const{deviceOrientation:n}=t;return n&&n.gamma?a.MathUtils.degToRad(n.gamma):0},this.createObtainPermissionGestureDialog=()=>{const n=document.createElement("div");n.classList.add(C);const s=document.createElement("div");s.classList.add(P);const r=document.createElement("div");r.classList.add(_);const l=document.createElement("div");l.classList.add(D);const o=document.createElement("button");o.classList.add(A),document.body.appendChild(n),this.enableInlineStyling===!0&&(n.style.fontFamily="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",n.style.display="flex",n.style.position="fixed",n.style.zIndex="100000",n.style.justifyContent="center",n.style.alignItems="center",n.style.backgroundColor="rgba(0,0,0,0.2)",n.style.inset="0",n.style.padding="20px",s.style.backgroundColor="rgba(220, 220, 220, 0.85)",s.style.padding="6px 0",s.style.borderRadius="10px",s.style.width="100%",s.style.maxWidth="400px",r.style.padding="10px 12px",r.style.textAlign="center",r.style.fontWeight="400",r.style.fontSize="13px",r.style.display="flex",r.style.justifyContent="center",r.style.alignItems="center",l.style.display="block",l.style.textAlign="center",l.style.textDecoration="none",l.style.borderTop="rgb(180,180,180) solid 1px",o.style.display="block",o.style.width="100%",o.style.textAlign="center",o.style.appearance="none",o.style.background="none",o.style.border="none",o.style.outline="none",o.style.padding="10px",o.style.fontWeight="400",o.style.fontSize="16px",o.style.color="#2e7cf1",o.style.cursor="pointer"),n.appendChild(s),s.appendChild(r),s.appendChild(l),r.appendChild(document.createTextNode(E));const g=()=>{this.requestOrientationPermissions(),n.style.display="none"};o.addEventListener("click",g),o.appendChild(document.createTextNode("OK")),l.appendChild(o),document.body.appendChild(n)},this.obtainPermissionGesture=()=>{this.preferConfirmDialog===!0?window.confirm(E)&&this.requestOrientationPermissions():this.createObtainPermissionGestureDialog()}}on(e,i){this.eventEmitter.on(e,i)}}class L{constructor(e){this.raycaster=new m.Raycaster,this.normalisedMousePosition=null,e.domElement.addEventListener("click",i=>{this.normalisedMousePosition=new m.Vector2(i.clientX/e.domElement.clientWidth*2-1,-(i.clientY/e.domElement.clientHeight*2)+1)})}raycast(e,i){if(this.normalisedMousePosition!==null){this.raycaster.setFromCamera(this.normalisedMousePosition,e);const t=this.raycaster.intersectObjects(i.children,!1);return this.normalisedMousePosition=null,t}return[]}}class x extends f{#e;constructor(e={video:{facingMode:"environment"}},i){super(),this.sceneWebcam=new m.Scene,i?this.#e=document.querySelector(i):(this.#e=document.createElement("video"),this.#e.setAttribute("autoplay","true"),this.#e.setAttribute("playsinline","true"),this.#e.style.display="none",document.body.appendChild(this.#e)),this.texture=this.#e?new m.VideoTexture(this.#e):null,navigator.mediaDevices&&navigator.mediaDevices.getUserMedia?navigator.mediaDevices.getUserMedia(e).then(t=>{this.#e?.addEventListener("loadedmetadata",()=>{this.#e?.setAttribute("width",this.#e?.videoWidth.toString()??"0"),this.#e?.setAttribute("height",this.#e?.videoHeight.toString()??"0"),this.#e?.play(),this.emit("webcamstarted",{texture:this.texture})}),this.#e&&(this.#e.srcObject=t)}).catch(t=>{this.emit("webcamerror",{code:t.name,message:t.message})}):this.emit("webcamerror",{code:"LOCAR_NO_MEDIA_DEVICES_API",message:"Media devices API not supported"})}dispose(){this.texture?.dispose()}}const j="0.1.8";d.ClickHandler=L,d.DeviceOrientationControls=N,d.EventEmitter=f,d.LocationBased=w,d.SphMercProjection=y,d.Webcam=x,d.version=j,Object.defineProperty(d,Symbol.toStringTag,{value:"Module"})}));
+(function(g,u){typeof exports=="object"&&typeof module<"u"?u(exports,require("three")):typeof define=="function"&&define.amd?define(["exports","three"],u):(g=typeof globalThis<"u"?globalThis:g||self,u(g.locar={},g.THREE))})(this,(function(g,u){"use strict";function _(f){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(f){for(const i in f)if(i!=="default"){const t=Object.getOwnPropertyDescriptor(f,i);Object.defineProperty(e,i,t.get?t:{enumerable:!0,get:()=>f[i]})}}return e.default=f,Object.freeze(e)}const m=_(u);class w{constructor(){this.on=(e,i)=>{this.eventHandlers[e]===void 0&&(this.eventHandlers[e]=[]),this.eventHandlers[e].push(i)},this.emit=(e,...i)=>{this.eventHandlers[e]?.forEach(t=>{t(...i)})},this.off=(e,i)=>{if(this.eventHandlers[e]){const t=this.eventHandlers[e].indexOf(i);t>-1&&this.eventHandlers[e].splice(t,1)}},this.eventHandlers={}}}class T extends w{constructor({cameraOptions:e,canvas:i,gpsOptions:t,videoConstraints:o,deviceOrientationOptions:l,serverLogger:p,projection:n}){super(),this.origHfov=e?.hFov||80;const s=0;this.cameraFeedDimensions=null;const d=window.innerWidth/window.innerHeight;this.camera=new m.PerspectiveCamera(this.origHfov/d,d,e?.near||.001,e?.far||1e3),i?(this.renderer=new m.WebGLRenderer({canvas:i,alpha:!0}),this.renderer.setClearColor(65280,s)):(this.renderer=new m.WebGLRenderer({alpha:!0}),this.renderer.setClearColor(65280,s),document.body.appendChild(this.renderer.domElement)),this.renderer.setSize(window.innerWidth,window.innerHeight),this.scene=new m.Scene;const c=l||{enabled:!0};window.addEventListener("resize",()=>{this.renderer.setSize(window.innerWidth,window.innerHeight);const a=window.innerWidth/window.innerHeight;if(this.camera.aspect=a,this.cameraFeedDimensions!==null){const h=a>1?this.cameraFeedDimensions.landWidth:this.cameraFeedDimensions.landHeight,v=a>1?this.cameraFeedDimensions.landHeight:this.cameraFeedDimensions.landWidth;this.#e(h,v,a)}this.camera.updateProjectionMatrix()}),this.locar=new y(this.scene,this.camera,t,p,n),this.webcam=new D(o),this.deviceOrientationControls=c.enabled===!0?new A(this.camera,c):null,this.renderer.setAnimationLoop(()=>{this.deviceOrientationControls?.update(),this.renderer.render(this.scene,this.camera)})}start(){return new Promise((i,t)=>{this.webcam.on("webcamstarted",o=>{const l=o.videoWidth>o.videoHeight;this.cameraFeedDimensions={landWidth:l?o.videoWidth:o.videoHeight,landHeight:l?o.videoHeight:o.videoWidth},this.#e(o.videoWidth,o.videoHeight,window.innerWidth/window.innerHeight),this.camera.updateProjectionMatrix()}),this.webcam.on("webcamerror",o=>{t({code:o.code,message:o.message})}),this.deviceOrientationControls===null?i(this.locar):(this.deviceOrientationControls?.on("deviceorientationgranted",o=>{o.target.connect(),i(this.locar)}),this.deviceOrientationControls.on("deviceorientationerror",o=>{t({code:o.code,message:o.message})}),this.deviceOrientationControls.init())})}#e(e,i,t){const o=e/i;if(t<o){const l=e*(window.innerHeight/i),p=this.origHfov*(window.innerWidth/l);this.camera.fov=p/t}else this.camera.fov=this.origHfov/t}}class b{constructor(){this.project=(e,i)=>[this.#e(e),this.#t(i)],this.unproject=e=>[this.#i(e[0]),this.#n(e[1])],this.#e=e=>e/180*this.HALF_EARTH,this.#t=e=>{var i=Math.log(Math.tan((90+e)*Math.PI/360))/(Math.PI/180);return i*this.HALF_EARTH/180},this.#i=e=>e/this.HALF_EARTH*180,this.#n=e=>{var i=e/this.HALF_EARTH*180;return i=180/Math.PI*(2*Math.atan(Math.exp(i*Math.PI/180))-Math.PI/2),i},this.getID=()=>"epsg:3857",this.EARTH=4007501668e-2,this.HALF_EARTH=2003750834e-2}#e;#t;#i;#n}class y extends w{#e;#t;#i;#n;#a;#s;#d;#r;#o;constructor(e,i,t={},o=null,l=new b){super(),this.scene=e,this.camera=i,this.#e=l,this.#t=null,this.#i=0,this.#n=100,this.#a=null,this.setGpsOptions(t),this.#s=null,this.#d=0,this.#r=0,this.#o=o}setProjection(e){this.#e=e}setGpsOptions(e={}){e.gpsMinDistance!==void 0&&(this.#i=e.gpsMinDistance),e.gpsMinAccuracy!==void 0&&(this.#n=e.gpsMinAccuracy)}async startGps(){if(this.#o){const i=await(await this.#o.sendData("/gps/start",{gpsMinDistance:this.#i,gpsMinAccuracy:this.#n})).json();this.#r=i.session}return this.#a===null?(this.#a=navigator.geolocation.watchPosition(e=>{this.#c(e)},e=>{this.emit("gpserror",e)},{enableHighAccuracy:!0}),!0):!1}stopGps(){return this.#a!==null?(navigator.geolocation.clearWatch(this.#a),this.#a=null,!0):!1}fakeGps(e,i,t=null,o=0){t!==null&&this.setElevation(t),this.#c({coords:{longitude:e,latitude:i,accuracy:o}})}lonLatToWorldCoords(e,i){const t=this.#e.project(e,i);if(this.#s)t[0]-=this.#s[0],t[1]-=this.#s[1];else throw"No initial position determined";return[t[0],-t[1]]}add(e,i,t,o,l={}){e.properties=l,this.#l(e,i,t,o||0),this.scene.add(e),this.#o?.sendData("/object/new",{position:e.position,x:e.position.x,z:e.position.z,session:this.#r,properties:l})}addGeoLine(e,i,t=1){const o=e.map((n=>{const[s,d]=this.lonLatToWorldCoords(n[0],n[1]);return new m.Vector3(s,n[2]||0,d)})),l=this.#h(o,t);i.setValues({side:m.DoubleSide});const p=new m.Mesh(l,i);this.scene.add(p)}#h(e,i){let t,o,l,p,n=0,s=0,d=[],c;const a=e.length-1,h=[];for(let r=0;r<a;r++)t=e[r+1].x-e[r].x,o=e[r+1].z-e[r].z,l=e[r+1].y-e[r].y,p=Math.sqrt(t*t+l*l+o*o),n=-(o*(i/2))/p,s=t*(i/2)/p,c=[e[r].x-n,e[r].y,e[r].z-s,e[r].x+n,e[r].y,e[r].z+s],r>0&&c.forEach((P,V)=>{P=(P+d[V])/2}),h.push(...c),d=[e[r+1].x-n,e[r+1].y,e[r+1].z-s,e[r+1].x+n,e[r+1].y,e[r+1].z+s];h.push(e[a].x-n),h.push(e[a].y),h.push(e[a].z-s),h.push(e[a].x+n),h.push(e[a].y),h.push(e[a].z+s);let v=[];for(let r=0;r<a;r++)v.push(r*2,r*2+1,r*2+2),v.push(r*2+1,r*2+3,r*2+2);let O=new m.BufferGeometry,z=new Float32Array(h);return O.setIndex(v),O.setAttribute("position",new m.BufferAttribute(z,3)),O.computeBoundingBox(),O}#l(e,i,t,o){const l=this.lonLatToWorldCoords(i,t);o!==void 0&&(e.position.y=o),[e.position.x,e.position.z]=l}setElevation(e){this.camera.position.y=e}#u(e,i){this.#s=this.#e.project(e,i)}#c(e){let i=Number.MAX_VALUE;this.#d++,this.#o?.sendData("/gps/new",{gpsCount:this.#d,lat:e.coords.latitude,lon:e.coords.longitude,acc:e.coords.accuracy,session:this.#r}),e.coords.accuracy<=this.#n&&(this.#t===null?this.#t={latitude:e.coords.latitude,longitude:e.coords.longitude}:i=y.haversineDist(this.#t,e.coords),i>=this.#i&&(this.#t.longitude=e.coords.longitude,this.#t.latitude=e.coords.latitude,this.#s||(this.#u(e.coords.longitude,e.coords.latitude),this.#o?.sendData("/worldorigin/new",{gpsCount:this.#d,lat:e.coords.latitude,lon:e.coords.longitude,session:this.#r,initialPosition:this.#s})),this.#l(this.camera,e.coords.longitude,e.coords.latitude),this.#o?.sendData("/gps/accepted",{gpsCount:this.#d,cameraX:this.camera.position.x,cameraZ:this.camera.position.z,session:this.#r,distMoved:i}),this.emit("gpsupdate",{position:e,distMoved:i})))}static haversineDist(e,i){const t=m.MathUtils.degToRad(i.longitude-e.longitude),o=m.MathUtils.degToRad(i.latitude-e.latitude),l=Math.sin(o/2)*Math.sin(o/2)+Math.cos(m.MathUtils.degToRad(e.latitude))*Math.cos(m.MathUtils.degToRad(i.latitude))*(Math.sin(t/2)*Math.sin(t/2));return 2*Math.atan2(Math.sqrt(l),Math.sqrt(1-l))*6371e3}getLastKnownLocation(){return this.#t}}const R="locar-device-orientation-permission-modal",x="locar-device-orientation-permission-button",L="locar-device-orientation-permission-message",S="locar-device-orientation-permission-inner",N="locar-device-orientation-permission-button-inner",C="This immersive website requires access to your device motion sensors.",E=navigator.userAgent.match(/iPhone|iPad|iPod/i)||/Macintosh/i.test(navigator.userAgent)&&navigator.maxTouchPoints!=null&&navigator.maxTouchPoints>1,H=new u.Vector3(0,0,1),M=new u.Euler,W=new u.Quaternion,F=new u.Quaternion(-Math.sqrt(.5),0,0,Math.sqrt(.5)),I=.5*Math.PI;class A extends u.EventDispatcher{constructor(e,i={}){super(),this.init=()=>{window.DeviceOrientationEvent===void 0?this.eventEmitter.emit("deviceorientationerror",{code:"LOCAR_DEVICE_ORIENTATION_NOT_SUPPORTED",message:"Device orientation API not supported"}):window.isSecureContext===!1?this.eventEmitter.emit("deviceorientationerror",{code:"LOCAR_DEVICE_ORIENTATION_NO_HTTPS",message:"DeviceOrientationEvent is only available in secure contexts (https)"}):typeof window.DeviceOrientationEvent.requestPermission=="function"&&this.enablePermissionDialog?this.obtainPermissionGesture():this.eventEmitter.emit("deviceorientationgranted",{target:this})},this.eventEmitter=new w;const t=this;this.object=e,this.object.rotation.reorder("YXZ"),this.enabled=!0,this.deviceOrientation=null,this.screenOrientation=0,this.alphaOffset=0,this.orientationOffset=0,this.initialOffset=null,this.lastQuaternion=null,this.orientationChangeEventName="ondeviceorientationabsolute"in window?"deviceorientationabsolute":"deviceorientation",this.smoothingFactor=i.smoothingFactor||.2,this.enablePermissionDialog=i.enablePermissionDialog??!0,this.enableInlineStyling=i.enableStyling??!0,this.preferConfirmDialog=i.preferConfirmDialog??!1,this.orientationChangeThreshold=i.orientationChangeThreshold??0;const o=n=>{let{alpha:s,beta:d,gamma:c,webkitCompassHeading:a}=n;if(s=s??0,d=d??0,c=c??0,a=a??0,E){const h=360-a;t.alphaOffset=u.MathUtils.degToRad(h-s),t.deviceOrientation={alpha:s,beta:d,gamma:c,webkitCompassHeading:a}}else s<0&&(s+=360),t.deviceOrientation={alpha:s,beta:d,gamma:c};window.dispatchEvent(new CustomEvent("camera-rotation-change",{detail:{cameraRotation:e.rotation}}))},l=()=>{t.screenOrientation=window.screen.orientation?.angle??0,E&&(t.screenOrientation===90?t.orientationOffset=-I:t.screenOrientation===-90?t.orientationOffset=I:t.orientationOffset=0)},p=(n,s,d,c,a)=>{M.set(d,s,-c,"YXZ"),n.setFromEuler(M),n.multiply(F),n.multiply(W.setFromAxisAngle(H,-a))};this.connect=()=>{l(),window.addEventListener("orientationchange",l),window.addEventListener(t.orientationChangeEventName,o),t.enabled=!0},this.disconnect=()=>{window.removeEventListener("orientationchange",l),window.removeEventListener(t.orientationChangeEventName,o),t.enabled=!1,t.initialOffset=!1,t.deviceOrientation=null,t.lastQuaternion=null},this.requestOrientationPermissions=()=>{window.DeviceOrientationEvent!==void 0&&typeof window.DeviceOrientationEvent.requestPermission=="function"?window.DeviceOrientationEvent.requestPermission().then(n=>{n==="granted"?this.eventEmitter.emit("deviceorientationgranted",{target:this}):this.eventEmitter.emit("deviceorientationerror",{code:"LOCAR_DEVICE_ORIENTATION_PERMISSION_DENIED",message:"Permission for device orientation denied - AR will not work correctly"})}).catch(n=>{this.eventEmitter.emit("deviceorientationerror",{code:"LOCAR_DEVICE_ORIENTATION_PERMISSION_FAILED",message:"Permission request for device orientation failed - AR will not work correctly",error:JSON.stringify(n,null,2)})}):this.eventEmitter.emit("deviceorientationerror",{code:"LOCAR_DEVICE_ORIENTATION_INTERNAL_ERROR",message:"Internal error: no requestPermission() found although requestOrientationPermissions() was called - please raise an issue on GitHub"})},this.update=()=>{if(t.enabled===!1)return;const n=t.deviceOrientation;if(n){let s=n.alpha?u.MathUtils.degToRad(n.alpha)+t.alphaOffset:0,d=n.beta?u.MathUtils.degToRad(n.beta):0,c=n.gamma?u.MathUtils.degToRad(n.gamma):0;const a=t.screenOrientation?u.MathUtils.degToRad(t.screenOrientation):0,h=new u.Quaternion;if(E){p(h,s,d,c,a);const v=new u.Euler().setFromQuaternion(h,"YXZ"),O=u.MathUtils.degToRad(360-(n.webkitCompassHeading??0));v.y=O+(t.orientationOffset||0),h.setFromEuler(v)}else p(h,s,d,c,a);if(t.lastQuaternion&&t.orientationChangeThreshold>0&&h.angleTo(t.lastQuaternion)<t.orientationChangeThreshold)return;if(t.smoothingFactor<1&&t.lastQuaternion){const v=1-t.smoothingFactor;t.object.quaternion.slerp(h,v)}else t.object.quaternion.copy(h);t.lastQuaternion=t.object.quaternion.clone(),window.dispatchEvent(new CustomEvent("camera-rotation-change",{detail:{cameraRotation:t.object.rotation}}))}},this.getCorrectedHeading=()=>{const{deviceOrientation:n}=t;if(!n)return 0;let s=0;return E?(s=360-(n.webkitCompassHeading??0),t.orientationOffset&&(s+=t.orientationOffset*(180/Math.PI),s=(s+360)%360)):(n.absolute===!0||t.orientationChangeEventName,s=n.alpha?n.alpha:0,s=(360-s)%360,s<0&&(s+=360)),s},this.updateAlphaOffset=()=>{t.initialOffset=!1},this.dispose=()=>{t.disconnect()},this.getAlpha=()=>{const{deviceOrientation:n}=t;return n&&n.alpha?u.MathUtils.degToRad(n.alpha)+t.alphaOffset:0},this.getBeta=()=>{const{deviceOrientation:n}=t;return n&&n.beta?u.MathUtils.degToRad(n.beta):0},this.getGamma=()=>{const{deviceOrientation:n}=t;return n&&n.gamma?u.MathUtils.degToRad(n.gamma):0},this.createObtainPermissionGestureDialog=()=>{const n=document.createElement("div");n.classList.add(R);const s=document.createElement("div");s.classList.add(S);const d=document.createElement("div");d.classList.add(L);const c=document.createElement("div");c.classList.add(N);const a=document.createElement("button");a.classList.add(x),document.body.appendChild(n),this.enableInlineStyling===!0&&(n.style.fontFamily="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",n.style.display="flex",n.style.position="fixed",n.style.zIndex="100000",n.style.justifyContent="center",n.style.alignItems="center",n.style.backgroundColor="rgba(0,0,0,0.2)",n.style.inset="0",n.style.padding="20px",s.style.backgroundColor="rgba(220, 220, 220, 0.85)",s.style.padding="6px 0",s.style.borderRadius="10px",s.style.width="100%",s.style.maxWidth="400px",d.style.padding="10px 12px",d.style.textAlign="center",d.style.fontWeight="400",d.style.fontSize="13px",d.style.display="flex",d.style.justifyContent="center",d.style.alignItems="center",c.style.display="block",c.style.textAlign="center",c.style.textDecoration="none",c.style.borderTop="rgb(180,180,180) solid 1px",a.style.display="block",a.style.width="100%",a.style.textAlign="center",a.style.appearance="none",a.style.background="none",a.style.border="none",a.style.outline="none",a.style.padding="10px",a.style.fontWeight="400",a.style.fontSize="16px",a.style.color="#2e7cf1",a.style.cursor="pointer"),n.appendChild(s),s.appendChild(d),s.appendChild(c),d.appendChild(document.createTextNode(C));const h=()=>{this.requestOrientationPermissions(),n.style.display="none"};a.addEventListener("click",h),a.appendChild(document.createTextNode("OK")),c.appendChild(a),document.body.appendChild(n)},this.obtainPermissionGesture=()=>{this.preferConfirmDialog===!0?window.confirm(C)&&this.requestOrientationPermissions():this.createObtainPermissionGestureDialog()}}on(e,i){this.eventEmitter.on(e,i)}}class j{constructor(e){this.raycaster=new m.Raycaster,this.normalisedMousePosition=null,e.domElement.addEventListener("click",i=>{this.normalisedMousePosition=new m.Vector2(i.clientX/e.domElement.clientWidth*2-1,-(i.clientY/e.domElement.clientHeight*2)+1)})}raycast(e,i){if(this.normalisedMousePosition!==null){this.raycaster.setFromCamera(this.normalisedMousePosition,e);const t=this.raycaster.intersectObjects(i.children,!1);return this.normalisedMousePosition=null,t}return[]}}class D extends w{#e;constructor(e={video:{facingMode:"environment"}},i){super(),this.sceneWebcam=new m.Scene,i?this.#e=document.querySelector(i):(this.#e=document.createElement("video"),this.#e.setAttribute("autoplay","true"),this.#e.setAttribute("playsinline","true"),this.#e.style.cssText+=`
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        background: black;
+        position: absolute;
+        top: 0px;
+        left: 0px;
+	      z-index: -100;  
+      `,document.body.appendChild(this.#e)),navigator.mediaDevices&&navigator.mediaDevices.getUserMedia?navigator.mediaDevices.getUserMedia(e).then(t=>{this.#e?.addEventListener("loadedmetadata",()=>{this.#e.play(),this.emit("webcamstarted",{videoWidth:this.#e.videoWidth,videoHeight:this.#e.videoHeight})}),this.#e&&(this.#e.srcObject=t)}).catch(t=>{this.emit("webcamerror",{code:t.name,message:t.message})}):this.emit("webcamerror",{code:"LOCAR_NO_MEDIA_DEVICES_API",message:"Media devices API not supported"})}getVideoDimensions(){return`w ${this.#e.videoWidth}, h ${this.#e.videoHeight}`}}g.App=T,g.ClickHandler=j,g.DeviceOrientationControls=A,g.EventEmitter=w,g.LocAR=y,g.SphMercProjection=b,g.Webcam=D,Object.defineProperty(g,Symbol.toStringTag,{value:"Module"})}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "locar",
-  "version": "0.1.9",
+  "version": "0.2.1",
   "description": "Location-based AR from AR.js.",
   "files": [
     "dist"
@@ -20,7 +20,7 @@
     "lint:fix": "prettier --write ./lib && eslint ./lib --ext .js,.json,.css --fix",
     "typecheck": "tsc --noEmit",
     "build": "npm run lint && npm run typecheck && vite build && npm pack",
-    "makedocs": "jsdoc -r lib -d docs/api"
+    "makedocs": "typedoc --out docs/api lib/three/main.ts"
   },
   "devDependencies": {
     "@eslint/css": "^0.11.0",
@@ -29,17 +29,18 @@
     "@types/three": "^0.181.0",
     "eslint": "^9.38.0",
     "globals": "^16.4.0",
-    "jsdoc": "^4.0.4",
+    "typedoc": "^0.28.19",
+    "minimatch": "^9.0.7",
     "prettier-eslint": "^16.4.2",
-    "typescript": "^5.7.2",
-    "vite": "^7.1.3",
+    "typescript": "^5.9.3",
+    "vite": "^7.3.2",
     "vite-plugin-dts": "^4.5.4"
   },
   "dependencies": {
     "minimatch": "^9.0.7",
     "three": "^0.180.0"
   },
-  "overrides": {
+  "overrides" : {
     "prettier-eslint": {
       "minimatch": "$minimatch"
     }