locar 0.2.1 → 0.2.3

package/README.md

@@ -42,7 +42,7 @@ import * as LocAR from 'locar';
 as long as you include `locar` as a dependency, e.g. in your `package.json`:
 ```
 "dependencies": {
-   "locar" : "^0.1.8",
+   "locar" : "^0.2.3",
    "three" : "^0.175.0"
 }
 ```

package/dist/locar.d.ts

@@ -263,7 +263,19 @@ export declare class LocAR extends EventEmitter {
      * @param {number} lat - The latitude.
      * @return {Array} a two member array containing the WebGL x and z coordinates
      */
-    lonLatToWorldCoords(lon: number, lat: number): number[];
+    lonLatToWorldCoords(lon: number, lat: number): [number, number];
+    /**
+     * Convert projected east/north coordinates to three.js/WebGL world coordinates.
+     * Negates the northing (in typical projections, northings increase northwards,
+     * but in the WebGL coordinate system, we face negative z if the camera is at
+     * the origin with default rotation).
+     * Must not be called until an initial position is determined.
+     * It is assumed that the projected position is in the correct projection - no check
+     * for this is made.
+     * @param {Array} projectedPos - the projected position.
+     * @return {Array} a two member array containing the WebGL x and z coordinates
+     */
+    eastNorthToWorldCoords(projectedPos: [number, number]): [number, number];
     /**
      * Add a new AR object at a given latitude, longitude and elevation.
      * @param {THREE.Mesh} object the object
@@ -275,7 +287,7 @@ export declare class LocAR extends EventEmitter {
      * the contents of the GeoJSON properties field).
      */
     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;
+    addGeoLine(points: Array<[number, number, number?]>, material: THREE.Material, lineWidth?: number): THREE.Mesh;
     /**
      * Set the elevation (y coordinate) of the camera.
      * @param {number} elev - the elevation in metres.

package/dist/locar.es.js

@@ -1,545 +1,370 @@
-import * as u from "three";
-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);
-    }, 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 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;
-  #n;
-  #a;
-  #s;
-  #d;
-  #r;
-  #o;
-  /**
-   * @param {THREE.Scene} scene - The Three.js scene to use.
-   * @param {THREE.Camera} camera - The Three.js camera to use. Should usually
-   * be a THREE.PerspectiveCamera.
-   * @param {Object} options - Initialisation options for the GPS; see
-   * 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 = {}, 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.
-   * @param {Object} any object which includes a project() method
-   * taking longitude and latitude as arguments and returning an array
-   * containing easting and northing.
-   */
-  setProjection(e) {
-    this.#e = e;
-  }
-  /**
-   * Set the GPS options.
-   * @param {Object} object containing gpsMinDistance and/or gpsMinAccuracy
-   * properties. The former specifies the number of metres which the device
-   * must move to process a new GPS reading, and the latter specifies the
-   * 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.#n = e.gpsMinAccuracy);
-  }
-  /**
-   * Start the GPS on a real device
-   * @return {boolean} code indicating whether the GPS was started successfully.
-   * GPS errors can be handled by handling the gpserror event.
-   */
-  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;
-  }
-  /**
-   * Stop the GPS on a real device
-   * @return {boolean} true if the GPS was stopped, false if it could not be
-   * stopped (i.e. it was never started).
-   */
-  stopGps() {
-    return this.#a !== null ? (navigator.geolocation.clearWatch(this.#a), this.#a = null, !0) : !1;
-  }
-  /**
-   * Send a fake GPS signal. Useful for testing on a desktop or laptop.
-   * @param {number} lon - The longitude.
-   * @param {number} lat - The latitude.
-   * @param {number} elev - The elevation in metres. (optional, set to null
-   * for no elevation).
-   * @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, o = 0) {
-    t !== null && this.setElevation(t), this.#c({
-      coords: {
-        longitude: e,
-        latitude: i,
-        accuracy: o
-      }
-    });
-  }
-  /**
-   * Convert longitude and latitude to three.js/WebGL world coordinates.
-   * Uses the specified projection, and negates the northing (in typical
-   * projections, northings increase northwards, but in the WebGL coordinate
-   * system, we face negative z if the camera is at the origin with default
-   * rotation).
-   * Must not be called until an initial position is determined.
-   * @param {number} lon - The longitude.
-   * @param {number} lat - The latitude.
-   * @return {Array} a two member array containing the WebGL x and z coordinates
-   */
-  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 a new AR object at a given latitude, longitude and elevation.
-   * @param {THREE.Mesh} object the object
-   * @param {number} lon - the longitude.
-   * @param {number} lat - the latitude.
-   * @param {number} elev - the elevation in metres
-   * (if not specified, 0 is assigned)
-   * @param {Object} properties - properties describing the object (for example,
-   * the contents of the GeoJSON properties field).
-   */
-  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 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.
-   * @param {number} elev - the elevation in metres.
-   */
-  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 })));
-  }
-  /**
-   * Calculate haversine distance between two lat/lon pairs.
-   *
-   * Taken from original A-Frame AR.js location-based components
-   */
-  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.
-   *
-   * @return {Object} object containing latitude and longitude fields, or null if no previous GPS location.
-   */
-  getLastKnownLocation() {
-    return this.#t;
-  }
-}
-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
-   * (usually your Three.js camera)
-   * @param {Object} options - options for DeviceOrientationControls:
-   * currently accepts smoothingFactor (< 1), enablePermissionDialog, orientationChangeThreshold (radians)
-   */
-  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 || 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
-        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 = -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 = () => {
-      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 ? 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"
-          ), f = p.degToRad(
-            360 - (n.webkitCompassHeading ?? 0)
-          );
-          g.y = f + (t.orientationOffset || 0), h.setFromEuler(g);
-        } else
-          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(h, g);
-        } 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 ? p.degToRad(n.alpha) + t.alphaOffset : 0;
-    }, this.getBeta = () => {
-      const { deviceOrientation: n } = t;
-      return n && n.beta ? p.degToRad(n.beta) : 0;
-    }, this.getGamma = () => {
-      const { deviceOrientation: n } = t;
-      return n && n.gamma ? p.degToRad(n.gamma) : 0;
-    }, this.createObtainPermissionGestureDialog = () => {
-      const n = document.createElement("div");
-      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 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(b) && this.requestOrientationPermissions() : this.createObtainPermissionGestureDialog();
-    };
-  }
-  on(e, i) {
-    this.eventEmitter.on(e, i);
-  }
-}
-class G {
-  /**
-   * Create a ClickHandler.
-   * @param {THREE.WebGLRenderer} - The Three.js renderer on which the click
-   * events will be handled.
-   */
-  constructor(e) {
-    this.raycaster = new u.Raycaster(), this.normalisedMousePosition = null, e.domElement.addEventListener("click", (i) => {
-      this.normalisedMousePosition = new u.Vector2(
-        i.clientX / e.domElement.clientWidth * 2 - 1,
-        -(i.clientY / e.domElement.clientHeight * 2) + 1
-      );
-    });
-  }
-  /**
-   * Cast a ray into the scene to detect objects.
-   * @param {THREE.Camera} - The active Three.js camera, from which the ray
-   * will be cast.
-   * @param {THREE.Scene} - The active Three.js scene, which the ray will be
-   * cast into.
-   * @return {Array} - array of all intersected objects.
-   */
-  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 q extends w {
-  #e;
-  /**
-   * Create a Webcam.
-   * @param constraints {Object} - options to use for initialising the camera.
-   * This is the same constraints object as used by standard MediaDevices API.
-   * @param {string} videoElementSelector - selector to obtain the HTML video
-   * element to render the webcam feed. If a falsy value (e.g. null or
-   * 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.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}`;
-  }
-}
-export {
-  j as App,
-  G as ClickHandler,
-  z as DeviceOrientationControls,
-  w as EventEmitter,
-  y as LocAR,
-  x as SphMercProjection,
-  q as Webcam
+import * as e from "three";
+import { Euler as t, EventDispatcher as n, MathUtils as r, Quaternion as i, Vector3 as a } from "three";
+//#region lib/three/event-emitter.ts
+var o = class {
+	constructor() {
+		this.on = (e, t) => {
+			this.eventHandlers[e] === void 0 && (this.eventHandlers[e] = []), this.eventHandlers[e].push(t);
+		}, this.emit = (e, ...t) => {
+			this.eventHandlers[e]?.forEach((e) => {
+				e(...t);
+			});
+		}, this.off = (e, t) => {
+			if (this.eventHandlers[e]) {
+				let n = this.eventHandlers[e].indexOf(t);
+				n > -1 && this.eventHandlers[e].splice(n, 1);
+			}
+		}, this.eventHandlers = {};
+	}
+}, s = class extends o {
+	constructor({ cameraOptions: t, canvas: n, gpsOptions: r, videoConstraints: i, deviceOrientationOptions: a, serverLogger: o, projection: s }) {
+		super(), this.origHfov = t?.hFov || 80, this.cameraFeedDimensions = null;
+		let c = window.innerWidth / window.innerHeight;
+		this.camera = new e.PerspectiveCamera(this.origHfov / c, c, t?.near || .001, t?.far || 1e3), n ? (this.renderer = new e.WebGLRenderer({
+			canvas: n,
+			alpha: !0
+		}), this.renderer.setClearColor(65280, 0)) : (this.renderer = new e.WebGLRenderer({ alpha: !0 }), this.renderer.setClearColor(65280, 0), document.body.appendChild(this.renderer.domElement)), this.renderer.setSize(window.innerWidth, window.innerHeight), this.scene = new e.Scene();
+		let u = a || { enabled: !0 };
+		window.addEventListener("resize", () => {
+			this.renderer.setSize(window.innerWidth, window.innerHeight);
+			let e = window.innerWidth / window.innerHeight;
+			if (this.camera.aspect = e, this.cameraFeedDimensions !== null) {
+				let t = e > 1 ? this.cameraFeedDimensions.landWidth : this.cameraFeedDimensions.landHeight, n = e > 1 ? this.cameraFeedDimensions.landHeight : this.cameraFeedDimensions.landWidth;
+				this.#e(t, n, e);
+			}
+			this.camera.updateProjectionMatrix();
+		}), this.locar = new l(this.scene, this.camera, r, o, s), this.webcam = new w(i), this.deviceOrientationControls = u.enabled === !0 ? new S(this.camera, u) : null, this.renderer.setAnimationLoop(() => {
+			this.deviceOrientationControls?.update(), this.renderer.render(this.scene, this.camera);
+		});
+	}
+	start() {
+		return new Promise((e, t) => {
+			this.webcam.on("webcamstarted", (e) => {
+				let t = e.videoWidth > e.videoHeight;
+				this.cameraFeedDimensions = {
+					landWidth: t ? e.videoWidth : e.videoHeight,
+					landHeight: t ? e.videoHeight : e.videoWidth
+				}, this.#e(e.videoWidth, e.videoHeight, window.innerWidth / window.innerHeight), this.camera.updateProjectionMatrix();
+			}), this.webcam.on("webcamerror", (e) => {
+				t({
+					code: e.code,
+					message: e.message
+				});
+			}), this.deviceOrientationControls === null ? e(this.locar) : (this.deviceOrientationControls?.on("deviceorientationgranted", (t) => {
+				t.target.connect(), e(this.locar);
+			}), this.deviceOrientationControls.on("deviceorientationerror", (e) => {
+				t({
+					code: e.code,
+					message: e.message
+				});
+			}), this.deviceOrientationControls.init());
+		});
+	}
+	#e(e, t, n) {
+		if (n < e / t) {
+			let r = e * (window.innerHeight / t), i = this.origHfov * (window.innerWidth / r);
+			this.camera.fov = i / n;
+		} else this.camera.fov = this.origHfov / n;
+	}
+}, c = class {
+	constructor() {
+		this.project = (e, t) => [this.#e(e), this.#t(t)], this.unproject = (e) => [this.#n(e[0]), this.#r(e[1])], this.#e = (e) => e / 180 * this.HALF_EARTH, this.#t = (e) => Math.log(Math.tan((90 + e) * Math.PI / 360)) / (Math.PI / 180) * this.HALF_EARTH / 180, this.#n = (e) => e / this.HALF_EARTH * 180, this.#r = (e) => {
+			var t = e / this.HALF_EARTH * 180;
+			return t = 180 / Math.PI * (2 * Math.atan(Math.exp(t * Math.PI / 180)) - Math.PI / 2), t;
+		}, this.getID = () => "epsg:3857", this.EARTH = 40075016.68, this.HALF_EARTH = 20037508.34;
+	}
+	#e;
+	#t;
+	#n;
+	#r;
+}, l = class t extends o {
+	#e;
+	#t;
+	#n;
+	#r;
+	#i;
+	#a;
+	#o;
+	#s;
+	#c;
+	constructor(e, t, n = {}, r = null, i = new c()) {
+		super(), this.scene = e, this.camera = t, this.#e = i, this.#t = null, this.#n = 0, this.#r = 100, this.#i = null, this.setGpsOptions(n), this.#a = null, this.#o = 0, this.#s = 0, this.#c = r;
+	}
+	setProjection(e) {
+		this.#e = e;
+	}
+	setGpsOptions(e = {}) {
+		e.gpsMinDistance !== void 0 && (this.#n = e.gpsMinDistance), e.gpsMinAccuracy !== void 0 && (this.#r = e.gpsMinAccuracy);
+	}
+	async startGps() {
+		if (this.#c) {
+			let e = await (await this.#c.sendData("/gps/start", {
+				gpsMinDistance: this.#n,
+				gpsMinAccuracy: this.#r
+			})).json();
+			this.#s = e.session;
+		}
+		return this.#i === null ? (this.#i = navigator.geolocation.watchPosition((e) => {
+			this.#f(e);
+		}, (e) => {
+			this.emit("gpserror", e);
+		}, { enableHighAccuracy: !0 }), !0) : !1;
+	}
+	stopGps() {
+		return this.#i === null ? !1 : (navigator.geolocation.clearWatch(this.#i), this.#i = null, !0);
+	}
+	fakeGps(e, t, n = null, r = 0) {
+		n !== null && this.setElevation(n), this.#f({ coords: {
+			longitude: e,
+			latitude: t,
+			accuracy: r
+		} });
+	}
+	lonLatToWorldCoords(e, t) {
+		let n = this.#e.project(e, t);
+		return this.eastNorthToWorldCoords(n);
+	}
+	eastNorthToWorldCoords(e) {
+		if (this.#a) e[0] -= this.#a[0], e[1] -= this.#a[1];
+		else throw "No initial position determined";
+		return [e[0], -e[1]];
+	}
+	add(e, t, n, r, i = {}) {
+		e.properties = i, this.#u(e, t, n, r || 0), this.scene.add(e), this.#c?.sendData("/object/new", {
+			position: e.position,
+			x: e.position.x,
+			z: e.position.z,
+			session: this.#s,
+			properties: i
+		});
+	}
+	addGeoLine(t, n, r = 1) {
+		let i = t.map(((t) => {
+			let [n, r] = this.lonLatToWorldCoords(t[0], t[1]);
+			return new e.Vector3(n, t[2] || 0, r);
+		})), a = this.#l(i, r);
+		n.setValues({ side: e.DoubleSide });
+		let o = new e.Mesh(a, n);
+		return this.scene.add(o), o;
+	}
+	#l(t, n) {
+		let r, i, a, o, s = 0, c = 0, l = [], u, d = t.length - 1, f = [];
+		for (let e = 0; e < d; e++) r = t[e + 1].x - t[e].x, i = t[e + 1].z - t[e].z, a = t[e + 1].y - t[e].y, o = Math.sqrt(r * r + a * a + i * i), s = -(n / 2 * i) / o, c = n / 2 * r / o, u = [
+			t[e].x - s,
+			t[e].y,
+			t[e].z - c,
+			t[e].x + s,
+			t[e].y,
+			t[e].z + c
+		], e > 0 && u.forEach((e, t) => {
+			e = (e + l[t]) / 2;
+		}), f.push(...u), l = [
+			t[e + 1].x - s,
+			t[e + 1].y,
+			t[e + 1].z - c,
+			t[e + 1].x + s,
+			t[e + 1].y,
+			t[e + 1].z + c
+		];
+		f.push(t[d].x - s), f.push(t[d].y), f.push(t[d].z - c), f.push(t[d].x + s), f.push(t[d].y), f.push(t[d].z + c);
+		let p = [];
+		for (let e = 0; e < d; e++) p.push(e * 2, e * 2 + 1, e * 2 + 2), p.push(e * 2 + 1, e * 2 + 3, e * 2 + 2);
+		let m = new e.BufferGeometry(), h = new Float32Array(f);
+		return m.setIndex(p), m.setAttribute("position", new e.BufferAttribute(h, 3)), m.computeBoundingBox(), m;
+	}
+	#u(e, t, n, r) {
+		let i = this.lonLatToWorldCoords(t, n);
+		r !== void 0 && (e.position.y = r), [e.position.x, e.position.z] = i;
+	}
+	setElevation(e) {
+		this.camera.position.y = e;
+	}
+	#d(e, t) {
+		this.#a = this.#e.project(e, t);
+	}
+	#f(e) {
+		let n = Number.MAX_VALUE;
+		this.#o++, this.#c?.sendData("/gps/new", {
+			gpsCount: this.#o,
+			lat: e.coords.latitude,
+			lon: e.coords.longitude,
+			acc: e.coords.accuracy,
+			session: this.#s
+		}), e.coords.accuracy <= this.#r && (this.#t === null ? this.#t = {
+			latitude: e.coords.latitude,
+			longitude: e.coords.longitude
+		} : n = t.haversineDist(this.#t, e.coords), n >= this.#n && (this.#t.longitude = e.coords.longitude, this.#t.latitude = e.coords.latitude, this.#a || (this.#d(e.coords.longitude, e.coords.latitude), this.#c?.sendData("/worldorigin/new", {
+			gpsCount: this.#o,
+			lat: e.coords.latitude,
+			lon: e.coords.longitude,
+			session: this.#s,
+			initialPosition: this.#a
+		})), this.#u(this.camera, e.coords.longitude, e.coords.latitude), this.#c?.sendData("/gps/accepted", {
+			gpsCount: this.#o,
+			cameraX: this.camera.position.x,
+			cameraZ: this.camera.position.z,
+			session: this.#s,
+			distMoved: n
+		}), this.emit("gpsupdate", {
+			position: e,
+			distMoved: n
+		})));
+	}
+	static haversineDist(t, n) {
+		let r = e.MathUtils.degToRad(n.longitude - t.longitude), i = e.MathUtils.degToRad(n.latitude - t.latitude), a = Math.sin(i / 2) * Math.sin(i / 2) + Math.cos(e.MathUtils.degToRad(t.latitude)) * Math.cos(e.MathUtils.degToRad(n.latitude)) * (Math.sin(r / 2) * Math.sin(r / 2));
+		return 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a)) * 6371e3;
+	}
+	getLastKnownLocation() {
+		return this.#t;
+	}
+}, u = "locar-device-orientation-permission-modal", d = "locar-device-orientation-permission-button", f = "locar-device-orientation-permission-message", p = "locar-device-orientation-permission-inner", m = "locar-device-orientation-permission-button-inner", h = "This immersive website requires access to your device motion sensors.", g = navigator.userAgent.match(/iPhone|iPad|iPod/i) || /Macintosh/i.test(navigator.userAgent) && navigator.maxTouchPoints != null && navigator.maxTouchPoints > 1, _ = new a(0, 0, 1), v = new t(), y = new i(), b = new i(-Math.sqrt(.5), 0, 0, Math.sqrt(.5));
+2 * Math.PI;
+var x = .5 * Math.PI, S = class extends n {
+	constructor(e, n = {}) {
+		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 o();
+		let a = 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 = n.smoothingFactor || .2, this.enablePermissionDialog = n.enablePermissionDialog ?? !0, this.enableInlineStyling = n.enableStyling ?? !0, this.preferConfirmDialog = n.preferConfirmDialog ?? !1, this.orientationChangeThreshold = n.orientationChangeThreshold ?? 0;
+		let s = (t) => {
+			let { alpha: n, beta: i, gamma: o, webkitCompassHeading: s } = t;
+			if (n ??= 0, i ??= 0, o ??= 0, s ??= 0, g) {
+				let e = 360 - s;
+				a.alphaOffset = r.degToRad(e - n), a.deviceOrientation = {
+					alpha: n,
+					beta: i,
+					gamma: o,
+					webkitCompassHeading: s
+				};
+			} else n < 0 && (n += 360), a.deviceOrientation = {
+				alpha: n,
+				beta: i,
+				gamma: o
+			};
+			window.dispatchEvent(new CustomEvent("camera-rotation-change", { detail: { cameraRotation: e.rotation } }));
+		}, c = () => {
+			a.screenOrientation = window.screen.orientation?.angle ?? 0, g && (a.screenOrientation === 90 ? a.orientationOffset = -x : a.screenOrientation === -90 ? a.orientationOffset = x : a.orientationOffset = 0);
+		}, l = (e, t, n, r, i) => {
+			v.set(n, t, -r, "YXZ"), e.setFromEuler(v), e.multiply(b), e.multiply(y.setFromAxisAngle(_, -i));
+		};
+		this.connect = () => {
+			c(), window.addEventListener("orientationchange", c), window.addEventListener(a.orientationChangeEventName, s), a.enabled = !0;
+		}, this.disconnect = () => {
+			window.removeEventListener("orientationchange", c), window.removeEventListener(a.orientationChangeEventName, s), a.enabled = !1, a.initialOffset = !1, a.deviceOrientation = null, a.lastQuaternion = null;
+		}, this.requestOrientationPermissions = () => {
+			window.DeviceOrientationEvent !== void 0 && typeof window.DeviceOrientationEvent.requestPermission == "function" ? window.DeviceOrientationEvent.requestPermission().then((e) => {
+				e === "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((e) => {
+				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(e, 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 (a.enabled === !1) return;
+			let e = a.deviceOrientation;
+			if (e) {
+				let n = e.alpha ? r.degToRad(e.alpha) + a.alphaOffset : 0, o = e.beta ? r.degToRad(e.beta) : 0, s = e.gamma ? r.degToRad(e.gamma) : 0, c = a.screenOrientation ? r.degToRad(a.screenOrientation) : 0, u = new i();
+				if (g) {
+					l(u, n, o, s, c);
+					let i = new t().setFromQuaternion(u, "YXZ");
+					i.y = r.degToRad(360 - (e.webkitCompassHeading ?? 0)) + (a.orientationOffset || 0), u.setFromEuler(i);
+				} else l(u, n, o, s, c);
+				if (a.lastQuaternion && a.orientationChangeThreshold > 0 && u.angleTo(a.lastQuaternion) < a.orientationChangeThreshold) return;
+				if (a.smoothingFactor < 1 && a.lastQuaternion) {
+					let e = 1 - a.smoothingFactor;
+					a.object.quaternion.slerp(u, e);
+				} else a.object.quaternion.copy(u);
+				a.lastQuaternion = a.object.quaternion.clone(), window.dispatchEvent(new CustomEvent("camera-rotation-change", { detail: { cameraRotation: a.object.rotation } }));
+			}
+		}, this.getCorrectedHeading = () => {
+			let { deviceOrientation: e } = a;
+			if (!e) return 0;
+			let t = 0;
+			return g ? (t = 360 - (e.webkitCompassHeading ?? 0), a.orientationOffset && (t += a.orientationOffset * (180 / Math.PI), t = (t + 360) % 360)) : (e.absolute === !0 || a.orientationChangeEventName, t = e.alpha ? e.alpha : 0, t = (360 - t) % 360, t < 0 && (t += 360)), t;
+		}, this.updateAlphaOffset = () => {
+			a.initialOffset = !1;
+		}, this.dispose = () => {
+			a.disconnect();
+		}, this.getAlpha = () => {
+			let { deviceOrientation: e } = a;
+			return e && e.alpha ? r.degToRad(e.alpha) + a.alphaOffset : 0;
+		}, this.getBeta = () => {
+			let { deviceOrientation: e } = a;
+			return e && e.beta ? r.degToRad(e.beta) : 0;
+		}, this.getGamma = () => {
+			let { deviceOrientation: e } = a;
+			return e && e.gamma ? r.degToRad(e.gamma) : 0;
+		}, this.createObtainPermissionGestureDialog = () => {
+			let e = document.createElement("div");
+			e.classList.add(u);
+			let t = document.createElement("div");
+			t.classList.add(p);
+			let n = document.createElement("div");
+			n.classList.add(f);
+			let r = document.createElement("div");
+			r.classList.add(m);
+			let i = document.createElement("button");
+			i.classList.add(d), document.body.appendChild(e), this.enableInlineStyling === !0 && (e.style.fontFamily = "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'", e.style.display = "flex", e.style.position = "fixed", e.style.zIndex = "100000", e.style.justifyContent = "center", e.style.alignItems = "center", e.style.backgroundColor = "rgba(0,0,0,0.2)", e.style.inset = "0", e.style.padding = "20px", t.style.backgroundColor = "rgba(220, 220, 220, 0.85)", t.style.padding = "6px 0", t.style.borderRadius = "10px", t.style.width = "100%", t.style.maxWidth = "400px", n.style.padding = "10px 12px", n.style.textAlign = "center", n.style.fontWeight = "400", n.style.fontSize = "13px", n.style.display = "flex", n.style.justifyContent = "center", n.style.alignItems = "center", r.style.display = "block", r.style.textAlign = "center", r.style.textDecoration = "none", r.style.borderTop = "rgb(180,180,180) solid 1px", i.style.display = "block", i.style.width = "100%", i.style.textAlign = "center", i.style.appearance = "none", i.style.background = "none", i.style.border = "none", i.style.outline = "none", i.style.padding = "10px", i.style.fontWeight = "400", i.style.fontSize = "16px", i.style.color = "#2e7cf1", i.style.cursor = "pointer"), e.appendChild(t), t.appendChild(n), t.appendChild(r), n.appendChild(document.createTextNode(h)), i.addEventListener("click", () => {
+				this.requestOrientationPermissions(), e.style.display = "none";
+			}), i.appendChild(document.createTextNode("OK")), r.appendChild(i), document.body.appendChild(e);
+		}, this.obtainPermissionGesture = () => {
+			this.preferConfirmDialog === !0 ? window.confirm(h) && this.requestOrientationPermissions() : this.createObtainPermissionGestureDialog();
+		};
+	}
+	on(e, t) {
+		this.eventEmitter.on(e, t);
+	}
+}, C = class {
+	constructor(t) {
+		this.raycaster = new e.Raycaster(), this.normalisedMousePosition = null, t.domElement.addEventListener("click", (n) => {
+			this.normalisedMousePosition = new e.Vector2(n.clientX / t.domElement.clientWidth * 2 - 1, -(n.clientY / t.domElement.clientHeight * 2) + 1);
+		});
+	}
+	raycast(e, t) {
+		if (this.normalisedMousePosition !== null) {
+			this.raycaster.setFromCamera(this.normalisedMousePosition, e);
+			let n = this.raycaster.intersectObjects(t.children, !1);
+			return this.normalisedMousePosition = null, n;
+		}
+		return [];
+	}
+}, w = class extends o {
+	#e;
+	constructor(t = { video: { facingMode: "environment" } }, n) {
+		super(), this.sceneWebcam = new e.Scene(), n ? this.#e = document.querySelector(n) : (this.#e = document.createElement("video"), this.#e.setAttribute("autoplay", "true"), this.#e.setAttribute("playsinline", "true"), this.#e.style.cssText += "\n        width: 100%;\n        height: 100%;\n        object-fit: cover;\n        background: black;\n        position: absolute;\n        top: 0px;\n        left: 0px;\n	      z-index: -100;  \n      ", document.body.appendChild(this.#e)), navigator.mediaDevices && navigator.mediaDevices.getUserMedia ? navigator.mediaDevices.getUserMedia(t).then((e) => {
+			this.#e?.addEventListener("loadedmetadata", () => {
+				this.#e.play(), this.emit("webcamstarted", {
+					videoWidth: this.#e.videoWidth,
+					videoHeight: this.#e.videoHeight
+				});
+			}), this.#e && (this.#e.srcObject = e);
+		}).catch((e) => {
+			this.emit("webcamerror", {
+				code: e.name,
+				message: e.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}`;
+	}
 };
+//#endregion
+export { s as App, C as ClickHandler, S as DeviceOrientationControls, o as EventEmitter, l as LocAR, c as SphMercProjection, w as Webcam };

package/dist/locar.umd.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "locar",
-  "version": "0.2.1",
+  "version": "0.2.3",
   "description": "Location-based AR from AR.js.",
   "files": [
     "dist"
@@ -27,13 +27,14 @@
     "@eslint/js": "^9.35.0",
     "@eslint/json": "^0.13.2",
     "@types/three": "^0.181.0",
+    "esbuild":"^0.28.1",
     "eslint": "^9.38.0",
     "globals": "^16.4.0",
     "typedoc": "^0.28.19",
     "minimatch": "^9.0.7",
     "prettier-eslint": "^16.4.2",
     "typescript": "^5.9.3",
-    "vite": "^7.3.2",
+    "vite": "^8.0.16",
     "vite-plugin-dts": "^4.5.4"
   },
   "dependencies": {
@@ -43,6 +44,9 @@
   "overrides" : {
     "prettier-eslint": {
       "minimatch": "$minimatch"
+    },
+    "vite": {
+      "esbuild": "$esbuild"
     }
   }
 }