@aibee/owlly 1.0.25

package/src/owlly/utils/camera.ts

@@ -0,0 +1,72 @@
+import { Externals, NS_THREE } from '../stage/externals';
+import { Camera as CameraElement } from '../element/camera';
+
+/**
+ * 相机相关的工具, 提供各类相机的工具函数
+ */
+class Camera {
+  /**
+   * 根据 Spherical Coordinate 确定 lookAt 坐标
+   * @param param0 相机坐标
+   * @param yaw 相机当前 yaw
+   * @param pitch 相机当前 pitch
+   * @returns 看向的方向与俯瞰时与 X 轴的夹角
+   */
+  static getCameraLookAtPositionByYawPitch(
+    { x, y, z }: { x: number; y: number; z: number },
+    yaw: number,
+    pitch: number,
+  ): {
+    position: NS_THREE.Vector3;
+    degree: number;
+  } {
+    /**
+     * up = (0, 0, 1)
+     * ( pitch,   yaw) => (x, y, z)
+     * (     0,     0) => (1, 0, 0)
+     * (  pi/2,     0) => (0, 0, 1)
+     * (     0,  pi/2) => (1, 0, 0)
+     */
+    const xyLen = Math.cos(pitch / 180 * Math.PI);
+    const dx = xyLen * Math.sin(-yaw / 180 * Math.PI);
+    const dy = xyLen * Math.cos(yaw / 180 * Math.PI);
+    const dz = Math.sin(pitch / 180 * Math.PI);
+    const { THREE } = Externals.getInstance();
+
+    return {
+      position: new THREE.Vector3(
+        x + dx,
+        y + dy,
+        z + dz,
+      ),
+      degree: yaw,
+    };
+  }
+
+  /**
+   * 根据 yaw pitch 设置相机的朝向
+   * @param camera 相机元素
+   */
+  static setCameraLookAtByYawPitch(camera: CameraElement): void {
+    const { position } = Camera.getCameraLookAtPositionByYawPitch(
+      camera.position.clone(),
+      camera.getYaw(),
+      camera.getPitch(),
+    );
+
+    camera.lookAt(position, 0, 0, false);
+  }
+
+  /**
+   * 根据相机朝向获取 yaw pitch
+   * @param v 方向向量
+   * @returns yaw 与 pitch
+   */
+  static getYawPitchFromCameraLookVector(v: NS_THREE.Vector3): { yaw: number; pitch: number } {
+    const pitch = Math.asin(v.z) / Math.PI * 180;
+    const yaw = -Math.atan2(v.x, v.y) / Math.PI * 180;
+    return { yaw, pitch };
+  }
+}
+
+export { Camera };

package/src/owlly/utils/cube-texture-cache.ts

@@ -0,0 +1,155 @@
+import { Externals, NS_THREE } from '../stage/externals';
+import { LruCache } from './lru-cache';
+import { TextureCache } from './texture-cache';
+
+class CubeTextureCache {
+  private cubeTextureCache: LruCache<NS_THREE.CubeTexture>;
+
+  private workingTasks: Map<string, Promise<NS_THREE.CubeTexture> >;
+
+  public static sharedInstance: CubeTextureCache = new CubeTextureCache(3);
+
+  public static disposeAll(): void {
+    this.sharedInstance.dispose();
+  }
+
+  dispose(): void {
+    this.cubeTextureCache.clear((key: string, value: NS_THREE.CubeTexture) => {
+      value.dispose();
+    });
+  }
+
+  constructor(capacity: number) {
+    this.cubeTextureCache = new LruCache<NS_THREE.CubeTexture>(capacity);
+    this.workingTasks = new Map<string, Promise<NS_THREE.CubeTexture> >();
+  }
+
+  /**
+   * @ignore
+   * 获取立方体贴图，先从缓存中获取，若未命中则异步加载立方体贴图
+   * @param cubeTextureURLs 立方体贴图六个面的图像URL数组
+   */
+  // public async loadCubeTexture(cubeTextureURLs: string[], cacheAnyway: boolean|undefined = true): Promise<CubeTexture> {
+  //   const cubeTexture = this.cubeTextureCache.get(cubeTextureURLs[0]);
+  //   if (cubeTexture) {
+  //     // console.log(`#PanoCtrl# Use cached CubeTexture:${cubeTextureURLs[0]}`);
+  //     return cubeTexture;
+  //   }
+
+  //   let workingTask = this.workingTasks.get(cubeTextureURLs[0]);
+  //   if (!workingTask) {
+  //     workingTask = new Promise((resolve, reject) => {
+  //       // console.log(`#PanoCtrl# Will load CubeTexture:${cubeTextureURLs[0]}`);
+  //       new CubeTextureLoader().load(cubeTextureURLs,
+  //         (texture) => {
+  //           // console.log(`#PanoCtrl# CubeTexture loaded for key '${cubeTextureURLs[0]}'`);
+  //           // console.log(`#PanoCtrl# cacheAnyway=${cacheAnyway}`);
+  //           this.cubeTextureCache.put(cubeTextureURLs[0], texture, (k: string, v: CubeTexture) => {
+  //             // 销毁立方体贴图资源
+  //             // console.log(`#PanoCtrl# By evicting cubeTexture with key '${k}', dispose it`);
+  //             v.dispose();
+  //           }, !cacheAnyway);
+  //           this.workingTasks.delete(cubeTextureURLs[0]);
+  //           resolve(texture);
+  //         },
+  //         () => {},
+  //         (event: ErrorEvent) => {
+  //           // console.log(`#PanoCtrl# Error with key '${cubeTextureURLs[0]}', event=${event}`);
+  //           this.workingTasks.delete(cubeTextureURLs[0]);
+  //           reject(event);
+  //         });
+  //     });
+  //     this.workingTasks.set(cubeTextureURLs[0], workingTask);
+  //   }
+  //   return workingTask;
+  // }
+  public async loadCubeTexture(cubeTextureURLs: string[],
+    cacheAnyway?: boolean,
+    recycleIntermediateTextures?: boolean): Promise<NS_THREE.CubeTexture> {
+    const cubeTexture = this.cubeTextureCache.get(cubeTextureURLs[0]);
+    if (cubeTexture) {
+      // console.log(`#PanoCtrl# Use cached CubeTexture:${cubeTextureURLs[0]}`);
+      return cubeTexture;
+    }
+
+    const { THREE } = Externals.getInstance();
+    let workingTask = this.workingTasks.get(cubeTextureURLs[0]);
+    if (!workingTask) {
+      // eslint-disable-next-line no-async-promise-executor
+      workingTask = new Promise(async (resolve) => {
+        // console.log(`#TextureLeak# CubeTextureCache.loadCubeTexture  Before preloadTextures: LD.totalCost=${TextureCache.ldFaceTexturesCache.getTotalCost()}`);
+        const faceTextures = await TextureCache.ldFaceTexturesCache.preloadTextures(
+          cubeTextureURLs, cubeTextureURLs.length,
+        );
+        // console.log(`#TextureLeak# CubeTextureCache.loadCubeTexture  After preloadTextures: LD.totalCost=${TextureCache.ldFaceTexturesCache.getTotalCost()}`);
+        const images = faceTextures.map((tex: NS_THREE.Texture) => tex.image);
+        const texture = new THREE.CubeTexture(images);
+        texture.needsUpdate = true;
+        // console.log(`#TextureLeak# CubeTextureCache.loadCubeTexture  Before recycling textures: LD.totalCost=${TextureCache.ldFaceTexturesCache.getTotalCost()}`);
+        // let recycledCount = 0;
+        if (recycleIntermediateTextures === true) {
+          cubeTextureURLs.forEach((key: string) => {
+            TextureCache.ldFaceTexturesCache.recycleTexture(key);
+            // if (TextureCache.ldFaceTexturesCache.recycleTexture(key)) { // /#TextureLeak#
+            //   recycledCount += 1;
+            // }
+          });
+        }
+        // console.log(`#TextureLeak# CubeTextureCache.loadCubeTexture  After recycling ${recycledCount} textures: LD.totalCost=${TextureCache.ldFaceTexturesCache.getTotalCost()}`);
+        // console.log(`#PanoCtrl# cacheAnyway=${cacheAnyway}`);
+        this.cubeTextureCache.put(cubeTextureURLs[0], texture, (k: string, v: THREE.CubeTexture) => {
+          // 销毁立方体贴图资源
+          // console.log(`#PanoCtrl# By evicting cubeTexture with key '${k}', dispose it`);
+          v.dispose();
+        }, !cacheAnyway);
+        this.workingTasks.delete(cubeTextureURLs[0]);
+        resolve(texture);
+      });
+      this.workingTasks.set(cubeTextureURLs[0], workingTask);
+    }
+    return workingTask;
+  }
+
+  /**
+   * 获取一组立方体贴图，若没命中则异步加载
+   * @param textureURLsArray 需要获取的立方体贴图URL数组，其每个元素是一个6元素的数组，表示一个立方体贴图的六个面
+   * @param waitForReadyCount 指定函数必须在textureURLsArray中的前多少个立方体贴图获取到以后才能返回
+   * 比如在即将显示一个全景点时，指定必须等指定全景点的立方体贴图获取到后才能返回，而其周围全景点可以同时预加载但不用等
+   */
+  public async preloadCubeTextures(
+    textureURLsArray: (string[]|undefined)[],
+    waitForReadyCount: number,
+    recycleIntermediateTextures?: boolean[],
+  ): Promise<NS_THREE.CubeTexture[]> {
+    const waitCount = waitForReadyCount > textureURLsArray.length ? textureURLsArray.length : waitForReadyCount;
+    const promises: (Promise<NS_THREE.CubeTexture>|undefined)[] = textureURLsArray.map(
+      (textureURLs: string[], index: number) => {
+        if (textureURLs) {
+          if (recycleIntermediateTextures) {
+            return this.loadCubeTexture(textureURLs, index < waitCount, recycleIntermediateTextures[index]);
+          }
+          return this.loadCubeTexture(textureURLs, index < waitCount);
+        }
+        return undefined;
+      },
+    );
+    const mustPromises: Promise<NS_THREE.CubeTexture>[] = [];
+    for (let i = 0; i < waitCount; i += 1) {
+      const promise = promises[i];
+      if (promise) {
+        mustPromises.push(promise);
+      }
+    }
+    return Promise.all(mustPromises);
+  }
+
+  public recycleCubeTexture(cubeTextureURLs: string[]): void {
+    this.cubeTextureCache.recycle(cubeTextureURLs[0], (key: string, value: NS_THREE.CubeTexture) => {
+      value.dispose();
+    });
+  }
+
+  public getCapacity(): number { return this.cubeTextureCache.getCapacity(); }
+}
+
+export { CubeTextureCache };

package/src/owlly/utils/device-utils.ts

@@ -0,0 +1,53 @@
+/**
+ * 设备信息工具类
+ */
+class DeviceUtils {
+  static GetVersion(match: RegExp, token: string): {
+    major: number;
+    minor: number;
+    patch: number;
+  } {
+    let matches = window.navigator.userAgent.match(match);
+    matches = matches ? matches[1].split(token) : [];
+    return {
+      major: parseInt(matches[0], 10) || 0,
+      minor: parseInt(matches[1], 10) || 0,
+      patch: parseInt(matches[2], 10) || 0,
+    };
+  }
+
+  static DetectWeChat(): boolean {
+    const matches = window.navigator.userAgent.toLowerCase();
+    return !!matches && matches.toString() === 'micromessenger';
+  }
+
+  static DetectIOS(): boolean {
+    return this.DetectIPhone() || this.DetectIPad() || this.DetectIPod();
+  }
+
+  static DetectIPad(): boolean {
+    const { userAgent } = window.navigator;
+    return /iPad/.test(userAgent);
+  }
+
+  static DetectIPod(): boolean {
+    const { userAgent } = window.navigator;
+    return /iPod/.test(userAgent);
+  }
+
+  static DetectIPhone(): boolean {
+    const { userAgent } = window.navigator;
+    return /iPhone/.test(userAgent);
+  }
+
+  static DetectAndroid(): boolean {
+    return window.navigator.userAgent.indexOf('Android') !== -1;
+  }
+
+  static DetectAndroidMobile(): boolean {
+    const { userAgent } = window.navigator;
+    return this.DetectAndroid() && userAgent.indexOf('Mobile') !== -1;
+  }
+}
+
+export { DeviceUtils };

package/src/owlly/utils/environment-utils.ts

@@ -0,0 +1,81 @@
+/**
+ * 环境值
+ */
+enum Env {
+  /** 浏览器 */
+  Web,
+  /** 小程序 */
+  Miniapp,
+}
+
+declare const wx: any; // eslint-disable-line
+
+/**
+ * 环境信息工具类
+ */
+class EnvironmentUtils {
+  private static ENV: Env;
+
+  private static DPR: number;
+
+  /**
+   * 设置运行环境(浏览器或小程序)
+   * @param env 环境值
+   */
+  static SetEnv(env: Env): void {
+    EnvironmentUtils.ENV = env;
+  }
+
+  /**
+   * 获得运行环境
+   * @returns 环境值
+   */
+  static GetEnv(): Env {
+    if (EnvironmentUtils.ENV === undefined) {
+      try {
+        if (wx) {
+          EnvironmentUtils.ENV = Env.Web; // 小程序环境判断有点问题，先写死
+        } else {
+          EnvironmentUtils.ENV = Env.Web;
+        }
+      } catch (error) {
+        // do nothing
+      } finally {
+        if (EnvironmentUtils.ENV === undefined) {
+          EnvironmentUtils.ENV = Env.Web;
+        }
+      }
+    }
+
+    return EnvironmentUtils.ENV;
+  }
+
+  /**
+   * 设置全局 dpr
+   * @param dpr 设备像素密度倍数
+   */
+  static SetGlobalDPR(dpr: number): void {
+    EnvironmentUtils.DPR = dpr;
+  }
+
+  /**
+   * 获取全局 dpr
+   * @returns 设备像素密度倍数
+   */
+  static GetGlobalDPR(): number {
+    if (!EnvironmentUtils.DPR) {
+      let dpr;
+      if (EnvironmentUtils.GetEnv() === Env.Miniapp) {
+        const sys = wx.getSystemInfoSync();
+        dpr = sys.pixelRatio;
+      } else {
+        dpr = window.devicePixelRatio;
+      }
+      EnvironmentUtils.DPR = dpr;
+    }
+
+    return EnvironmentUtils.DPR;
+  }
+}
+
+export { Env, EnvironmentUtils };

package/src/owlly/utils/event-hub.ts

@@ -0,0 +1,120 @@
+/**
+ * 事件管理器
+ */
+class EventHub {
+  private static hub: EventHub;
+
+  private eventMap: Map<string, Set<Function>>;
+
+  constructor() {
+    this.eventMap = new Map<string, Set<Function>>();
+  }
+
+  private on(event: string, callback: Function): void {
+    if (!this.eventMap.has(event)) this.eventMap.set(event, new Set<Function>());
+    const callbacks = this.eventMap.get(event);
+    if (callbacks) {
+      callbacks.add(callback);
+      this.eventMap.set(
+        event,
+        callbacks,
+      );
+    }
+  }
+
+  private emit(event: string, ...args: unknown[]): void {
+    const callbacks = this.eventMap.get(event);
+    if (callbacks) {
+      callbacks.forEach((callback) => { callback(...args); });
+    }
+  }
+
+  private off(event: string, callback: Function): void {
+    const callbacks = this.eventMap.get(event);
+    if (!callbacks) return;
+    callbacks.delete(callback);
+  }
+
+  /**
+   * 注册事件监听
+   * @param event 事件名
+   * @param callback 回调函数
+   */
+  static on(event: string, callback: Function): void {
+    if (!EventHub.hub) { EventHub.hub = new EventHub(); }
+    EventHub.hub.on(event, callback);
+  }
+
+  /** @ignore */
+  static emit(event: string, ...args: unknown[]): void {
+    if (!EventHub.hub) { EventHub.hub = new EventHub(); }
+    EventHub.hub.emit(event, ...args);
+  }
+
+  /**
+   * 注销事件监听
+   * @param event 事件名
+   * @param callback 回调函数
+   */
+  static off(event: string, callback: Function): void {
+    if (!EventHub.hub) { EventHub.hub = new EventHub(); }
+    EventHub.hub.off(event, callback);
+  }
+
+  /**
+   * @deprecated
+   * 注销事件监听, 请使用EventHub.off代替
+   * @param event 事件名
+   * @param callback 回调函数
+   */
+  static remove(event: string, callback: Function): void {
+    console.warn('EventHub.remove() will be removed in future releases. Use EventHub.off() instead.'); // eslint-disable-line
+    EventHub.off(event, callback);
+  }
+}
+
+class EventHubClassic {
+  protected eventMap: Map<string, Set<Function>>;
+
+  constructor() {
+    this.eventMap = new Map<string, Set<Function>>();
+  }
+
+  /**
+   * 注册事件监听
+   * @param event 事件名
+   * @param callback 回调函数
+   */
+  on(event: string, callback: Function): void {
+    if (!this.eventMap.has(event)) this.eventMap.set(event, new Set<Function>());
+    const callbacks = this.eventMap.get(event);
+    if (callbacks) {
+      callbacks.add(callback);
+      this.eventMap.set(
+        event,
+        callbacks,
+      );
+    }
+  }
+
+  protected emit(event: string, ...args: unknown[]): void {
+    const callbacks = this.eventMap.get(event);
+    if (callbacks) {
+      callbacks.forEach((callback) => { callback(...args); });
+    }
+    EventHub.emit(event, ...args);
+  }
+
+  /**
+   * 注销事件监听
+   * @param event 事件名
+   * @param callback 回调函数
+   */
+  off(event: string, callback: Function): void {
+    const callbacks = this.eventMap.get(event);
+    if (!callbacks) return;
+    callbacks.delete(callback);
+  }
+}
+
+export { EventHub, EventHubClassic };