@aibee/owlly 1.0.25

package/src/owlly/stage/owlly.ts

@@ -0,0 +1,223 @@
+import TWEEN from '@tweenjs/tween.js';
+// #if WEB_ONLY
+// import Stats from 'stats.js';
+// #endif
+
+import { TimeProfiler } from '../utils/time-profiler';
+import { Stage } from './stage';
+// #if WEB_ONLY
+import { Owlly2D } from '../owlly-2d';
+// #endif
+import { EventHub } from '../utils/event-hub';
+import { Events } from '../utils/events';
+import { EnvironmentUtils, Env } from '../utils/environment-utils';
+import { Screen } from '../screen/screen';
+import { Controller } from '../controller/controller';
+
+let frameTime: number;
+let timeSaver: number;
+let now: number;
+
+class Owlly {
+  private static SHARED_INSTANCE: Owlly | null;
+
+  private static RequestAnimationFrame: Function;
+
+  private stages: Set<Stage>;
+
+  private screens: Set<Screen>;
+
+  private controllers: Set<Controller>;
+
+  private timeProfiler: TimeProfiler;
+
+  // #if WEB_ONLY
+  // private stats: Stats;
+  // #endif
+
+  private statsEnabled: boolean;
+
+  private selfManageTick: boolean;
+
+  private forceRender: boolean;
+
+  private listeners: {
+    windowResizeListener: EventListener;
+    windowUnloadListener: EventListener;
+    onTick: FrameRequestCallback;
+  };
+
+  private constructor() {
+    this.stages = new Set();
+    this.screens = new Set();
+    this.controllers = new Set();
+    this.timeProfiler = new TimeProfiler();
+    this.selfManageTick = true;
+
+    // #if WEB_ONLY
+    // if (EnvironmentUtils.GetEnv() === Env.Web) {
+    //   this.stats = new Stats();
+    //   this.stats.showPanel(0);
+    //   this.stats.dom.style.setProperty('display', 'none');
+    //   this.statsEnabled = false;
+
+    //   if (document) document.body.appendChild(this.stats.dom);
+    // }
+    // #endif
+
+    this.listeners = {
+      windowResizeListener: (): void => { this.onWindowResize(); },
+      windowUnloadListener: (): void => { this.beforeWindowUnload(); },
+      onTick: this.tick.bind(this),
+    };
+    this.registerEvents();
+
+    if (EnvironmentUtils.GetEnv() === Env.Web && (requestAnimationFrame as unknown)) {
+      this.setRequestAnimationFrameFunction(requestAnimationFrame);
+    }
+  }
+
+  static GetSharedInstance(): Owlly {
+    if (!this.SHARED_INSTANCE) this.SHARED_INSTANCE = new Owlly();
+    return this.SHARED_INSTANCE;
+  }
+
+  /**
+   * 时钟函数
+   * @param time 距离上一帧的时间, ms
+   */
+  public tick(time: number): void {
+    this.timeProfiler.tick(time);
+    // EventHub.emit(Events.FPS_UPDATED, this.timeProfiler.getFPS());
+    EventHub.emit(Events.TICK);
+
+    const screenNeedsUpdate = Array.from(this.screens).reduce((tf, screen) => (screen.update() || tf), false);
+    const controllersNeedsUpdate = Array.from(this.controllers).reduce(
+      (tf, controller) => (controller.update() || tf),
+      false,
+    );
+    const elementsNeedsUpdate = Array.from(this.stages).reduce((tf, stage) => (stage.tick() || tf), false);
+
+    if (this.forceRender || screenNeedsUpdate || controllersNeedsUpdate || elementsNeedsUpdate) {
+      this.screens.forEach((screen) => {
+        screen.renderScreen();
+      });
+    }
+
+    TWEEN.update();
+    // #if WEB_ONLY
+    // if (this.statsEnabled) {
+    //   this.stats.end();
+    //   this.stats.begin();
+    // }
+    // #endif
+    if (this.selfManageTick) Owlly.RequestAnimationFrame(this.listeners.onTick);
+  }
+
+  private registerEvents(): void {
+    if (EnvironmentUtils.GetEnv() === Env.Web) window.addEventListener('resize', this.listeners.windowResizeListener);
+  }
+
+  private onWindowResize(): void {
+    this.screens.forEach((screen) => {
+      screen.resize(window.innerWidth, window.innerHeight);
+    });
+    // #if WEB_ONLY
+    if (Owlly2D.initialized) Owlly2D.resize();
+    // #endif
+  }
+
+  private beforeWindowUnload(): void {
+    Array.from(this.stages).forEach((s) => {
+      s.dispose();
+    });
+    if (window) window.removeEventListener('resize', this.listeners.windowResizeListener);
+    // #if WEB_ONLY
+    if (Owlly2D.initialized) Owlly2D.dispose();
+    // if (document) document.body.removeChild(this.stats.dom);
+    // #endif
+  }
+
+  registerStage(stage: Stage): void {
+    this.stages.add(stage);
+  }
+
+  unregisterStage(stage: Stage): void {
+    this.stages.delete(stage);
+  }
+
+  registerScreen(screen: Screen): void {
+    this.screens.add(screen);
+  }
+
+  unregisterScreen(screen: Screen): void {
+    this.screens.delete(screen);
+  }
+
+  registerController(controller: Controller): void {
+    this.controllers.add(controller);
+  }
+
+  unregisterController(controller: Controller): void {
+    this.controllers.delete(controller);
+  }
+
+  setStatsEnabled(value: boolean): void {
+    if (EnvironmentUtils.GetEnv() !== Env.Web) return;
+    // #if WEB_ONLY
+    this.statsEnabled = value;
+    // this.stats.dom.style.setProperty('display', value ? 'block' : 'none');
+    // #endif
+  }
+
+  setRequestAnimationFrameFunction(requestAnimationFrame: Function): void {
+    // if (Owlly.RequestAnimationFrame) return;
+    Owlly.RequestAnimationFrame = requestAnimationFrame.bind(
+      // TODO: 此处小程序可能存在问题
+      // eslint-disable-next-line no-nested-ternary
+      EnvironmentUtils.GetEnv() === Env.Web
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        ? ((window as any).IS_DELEGATE ? (window as any).delegateWindow : window) : this,
+    );
+    if (this.selfManageTick) Owlly.RequestAnimationFrame(this.listeners.onTick);
+  }
+
+  toggleTickSelfManagement(value: boolean): void {
+    if (this.selfManageTick === value) return;
+    this.selfManageTick = value;
+    if (this.selfManageTick) Owlly.RequestAnimationFrame(this.listeners.onTick);
+  }
+
+  renderNextFrame(): void {
+    this.forceRender = true;
+  }
+}
+
+function updateTick(): void {
+  const owlly = Owlly.GetSharedInstance();
+  if (!timeSaver) {
+    frameTime = 0;
+    timeSaver = Date.now();
+  }
+  now = Date.now();
+  frameTime += now - timeSaver;
+  owlly.tick(frameTime);
+  timeSaver = now;
+}
+
+function forceRender(): void {
+  const owlly = Owlly.GetSharedInstance();
+  owlly.renderNextFrame();
+}
+
+// only for debugging
+
+// declare global {
+//   interface Window {
+//     Owlly: any; // eslint-disable-line
+//   }
+// }
+
+// if (window) window.Owlly = Owlly;
+
+export { Owlly, updateTick, forceRender };

package/src/owlly/stage/stage.ts

@@ -0,0 +1,274 @@
+import { Externals, NS_THREE } from './externals';
+import { Element, ElementFrameContext } from '../element/element';
+import { View } from '../view';
+import { Controller } from '../controller';
+import { EventHub } from '../utils/event-hub';
+import { OwllyEvents, Events } from '../utils/events';
+import { Owlly } from './owlly';
+
+/**
+ * 场景类, 所有元素应当置于场景中, 视图与场景绑定后可渲染内容
+ */
+class Stage {
+  // Only one scene should be in a stage
+  /**
+   * Stage 所使用的 THREE Scene
+   */
+  public scene: NS_THREE.Scene;
+
+  private elements: Set<Element>;
+
+  private lights: NS_THREE.Group;
+
+  private axesHelper: NS_THREE.AxesHelper;
+
+  private stageListeners: {
+    onDisposeElement: Function;
+    onElementLoaded: Function;
+  };
+
+  private disposed: boolean;
+
+  constructor() {
+    const { THREE } = Externals.getInstance();
+
+    this.scene = new THREE.Scene();
+    this.elements = new Set<Element>();
+    this.lights = new THREE.Group();
+
+    this.initLights();
+    this.scene.add(this.lights);
+
+    this.axesHelper = new THREE.AxesHelper(10);
+    this.axesHelper.visible = false;
+    this.scene.add(this.axesHelper);
+
+    this.disposed = false;
+
+    this.stageListeners = {
+      onDisposeElement: (element: Element | Element[]): void => {
+        if (Array.isArray(element)) {
+          element.forEach((e) => { this.stageListeners.onDisposeElement(e); });
+        } else {
+          this.disposeElement(element);
+        }
+      },
+      onElementLoaded: (element: Element): void => {
+        EventHub.emit(Events.ELEMENT_LOADED, element);
+      },
+    };
+    this.registerEvents();
+
+    Owlly.GetSharedInstance().registerStage(this);
+  }
+
+  private registerEvents(): void {
+    EventHub.on(OwllyEvents.DISPOSE_ELEMENT, this.stageListeners.onDisposeElement);
+    EventHub.on(OwllyEvents.ELEMENT_LOADED, this.stageListeners.onElementLoaded);
+  }
+
+  private initLights(): void {
+    const { THREE } = Externals.getInstance();
+    const hemisphereLight = new THREE.HemisphereLight(0xffffff, 0xffffff, 0.75);
+    // hemisphereLight.color.setHSL(0.6, 0.75, 0.5);
+    // hemisphereLight.groundColor.setHSL(0.095, 0.5, 0.5);
+    hemisphereLight.position.set(0, 50, 0);
+    this.lights.add(hemisphereLight);
+    const directionalLight = new THREE.DirectionalLight(0xffffff, 0.23);
+    directionalLight.color.setHSL(0.1, 1, 0.95);
+    directionalLight.position.set(-0.5, 1, 0.75);
+    directionalLight.position.multiplyScalar(50);
+    // directionalLight.position.set(-50, 60, 50);
+    // directionalLight.castShadow = true;
+    // directionalLight.shadow.camera.bottom = -200;
+    // directionalLight.shadow.camera.top = 200;
+    // directionalLight.shadow.camera.left = -200;
+    // directionalLight.shadow.camera.right = 200;
+    this.lights.add(directionalLight);
+    this.lights.add(directionalLight.target);
+    directionalLight.target.updateMatrixWorld();
+    const directionalLight2 = new THREE.DirectionalLight(0xffffff, 0.23);
+    directionalLight2.color.setHSL(0.1, 1, 0.95);
+    directionalLight2.position.set(0.5, -1, 0.75);
+    directionalLight2.position.multiplyScalar(50);
+    this.lights.add(directionalLight2);
+    this.lights.add(directionalLight2.target);
+    directionalLight2.target.updateMatrixWorld();
+  }
+
+  /**
+   * 旧的时钟函数, 后期应删除
+   * @deprecated
+   */
+  tick(): boolean {
+    return this.update();
+  }
+
+  /**
+   * 时钟钩子函数
+   * @returns 是否需要重新渲染
+   */
+  update(): boolean {
+    if (this.disposed) return false;
+
+    const elements = Array.from(this.elements);
+    const elementsNeedsUpdate = elements.reduce(
+      (tf, e) => (this.handleElementUpdate(e.update()) || tf),
+      false,
+    );
+
+    return elementsNeedsUpdate;
+  }
+
+  private handleElementUpdate(context: ElementFrameContext): boolean {
+    if (context.shouldPlaceElement) {
+      this.scene.add(context.element);
+    }
+    return context.needUpdate;
+  }
+
+  /**
+   * 绑定视图至场景
+   * @param view 需要添加的视图
+   */
+  public bindView(view: View): void {
+    view.bindStage(this);
+  }
+
+  /**
+   * 销毁视图
+   * @param view 需要销毁的视图
+   */
+  public disposeView(view: View): void {
+    view.dispose();
+  }
+
+  /**
+   * 绑定一个新的控制器到场景
+   * @param controller 添加的控制器
+   */
+  public bindController(controller: Controller): void {
+    if (controller.initWithScene) controller.initWithScene(this.scene);
+  }
+
+  /**
+   * 销毁控制器
+   * @param controller 销毁的控制器
+   */
+  public async disposeController(controller?: Controller): Promise<void> { // eslint-disable-line
+  }
+
+  /**
+   * 绑定元素至场景
+   * @param element 需要绑定的元素
+   */
+  public bindElement(element: Element): void {
+    this.elements.add(element);
+    // if (element.resize) this.forceResize();
+  }
+
+  /**
+   * 销毁元素
+   * @param element 需要销毁的元素
+   */
+  public disposeElement(element: Element): void {
+    this.unbindElement(element);
+    if (element) element.dispose();
+  }
+
+  /**
+   * 解绑元素, 元素仅会从 Stage 中移除而非销毁
+   * @param element 需要解绑的元素
+   */
+  public unbindElement(element: Element): void {
+    if (!this.elements.has(element)) return;
+    this.scene.remove(element);
+    this.elements.delete(element);
+  }
+
+  /**
+   * (调试用) 开关性能统计
+   * @param value 开关值
+   */
+  public setStatsEnabled(value: boolean): void {
+    Owlly.GetSharedInstance().setStatsEnabled(value);
+  }
+
+  /**
+   * (调试用) 开关场景xyz轴指示器
+   * @param value 开关值
+   */
+  public setAxesEnabled(value: boolean): void {
+    this.axesHelper.visible = value;
+  }
+
+  /**
+   * 强制渲染
+   * @deprecated
+   */
+  public render(): void {
+    throw new Error('[Owlly] This function is no longer being used. Use forceRender() exported from Owlly directly instead.');
+  }
+
+  /**
+   * 销毁场景
+   */
+  public dispose(): void {
+    const elements = Array.from(this.elements);
+    elements.forEach((e) => {
+      this.elements.delete(e);
+      e.dispose();
+    });
+    EventHub.off(OwllyEvents.DISPOSE_ELEMENT, this.stageListeners.onDisposeElement);
+    EventHub.off(OwllyEvents.ELEMENT_LOADED, this.stageListeners.onElementLoaded);
+    this.disposed = true;
+
+    Owlly.GetSharedInstance().unregisterStage(this);
+  }
+
+  public resizeElements(viewWidth: number, viewHeight: number): void {
+    this.elements.forEach((element) => {
+      if (element.resize) element.resize(viewWidth, viewHeight);
+    });
+  }
+
+  public renderElements(): void{
+    this.elements.forEach((element) => {
+      if (element.render) element.render();
+    });
+  }
+
+  /**
+   * 强制重新计算绘制区域
+   * @deprecated
+   */
+  public forceResize(): void {
+    throw new Error('[Owlly] This function is no longer being used. Use Screen.resize() instead.');
+  }
+
+  /**
+   * 设置全场景背景色
+   * @param hexColor 颜色, 可以使用字符串
+   */
+  public setBackgroundColor(hexColor: number | string): void {
+    const { THREE } = Externals.getInstance();
+    this.scene.background = new THREE.Color(hexColor);
+  }
+
+  /**
+   * 设置帧函数
+   * @param requestAnimationFrame
+   */
+  public setFrameTickFunction(requestAnimationFrame: Function): void {
+    Owlly.GetSharedInstance().setRequestAnimationFrameFunction(requestAnimationFrame);
+  }
+
+  /**
+   * @ignore
+   */
+  public toggleTickSelfManagement(value: boolean): void {
+    Owlly.GetSharedInstance().toggleTickSelfManagement(value);
+  }
+}
+
+export { Stage };

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

@@ -0,0 +1,84 @@
+import { Externals } from '../stage/externals';
+import { View } from '../view/view';
+
+class AlignmentUtils {
+  /**
+   * 获取2d与3d之间的对齐参数
+   * @param view 基准视图
+   * @param baseImageScale 底图缩放等级, 绝对值
+   * @param offset 底图整体偏移, 结构为 [ number, number ], 对应x, y轴偏移值
+   * @param imageSize 底图图片尺寸, 结构为 [ number, number ], 对应宽度, 高度
+   * @returns { upTrans: number[]; downTrans: number[]; matrixWorld: number[]; } 三个矩阵,
+   *  uptrans: 2d转3d, downTrans: 3d转2d, matrixWorld: 相机自身参数, 重设时使用
+   */
+  static getTransformMatrices(
+    view: View,
+    baseImageScale: number,
+    offset: [number, number],
+    imageSize: [number, number],
+  ): {
+    upTransOrigin: number[];
+    downTransOrigin: number[];
+    upTrans: number[];
+    downTrans: number[];
+    matrixWorld: number[];
+  } {
+    if (!view.camera || !view.renderer) throw new Error('Cannot find Camera or Renderer object in view');
+    const c = view.camera;
+    const r = view.renderer;
+
+    const { THREE } = Externals.getInstance();
+
+    const raycaster = new THREE.Raycaster();
+    raycaster.setFromCamera({ x: -1, y: -1 }, c);
+    const from = raycaster.ray.origin.clone().x;
+    raycaster.setFromCamera({ x: 1, y: 1 }, c);
+    const to = raycaster.ray.origin.clone().x;
+
+    const ratio = Math.abs(to - from) / r.domElement.clientWidth * baseImageScale; // * r.getPixelRatio()
+    const camera = new THREE.Camera();
+    const rotation = new THREE.Euler().setFromQuaternion(c.quaternion.clone()).z;
+    const offsetX = ratio * (offset[0] * Math.cos(rotation) + offset[1] * Math.sin(rotation));
+    const offsetY = ratio * (-offset[0] * Math.sin(rotation) + offset[1] * Math.cos(rotation));
+
+    camera.copy(c);
+    camera.position.add(new THREE.Vector3(offsetX, -offsetY, 0));
+    camera.updateMatrixWorld();
+
+    const preScaleMatrix = new THREE.Matrix4();
+    const preScaleArray = new Array(16).fill(0);
+    preScaleArray[0] = 1 / baseImageScale;
+    preScaleArray[5] = 1 / baseImageScale;
+    preScaleArray[10] = 1;
+    preScaleArray[15] = 1;
+    preScaleMatrix.fromArray(preScaleArray);
+
+    const postTransformMatrix = new THREE.Matrix4();
+    const postTransformArray = new Array(16).fill(0);
+    postTransformArray[0] = imageSize[0] / 2;
+    postTransformArray[5] = -imageSize[1] / 2;
+    postTransformArray[10] = 1;
+    postTransformArray[12] = imageSize[0] / 2;
+    postTransformArray[13] = imageSize[1] / 2;
+    postTransformArray[15] = 1;
+    postTransformMatrix.fromArray(postTransformArray);
+
+    const downTransOrigin = camera.projectionMatrix.clone()
+      .multiply(preScaleMatrix)
+      .multiply(camera.matrixWorldInverse);
+    const upTransOrigin = downTransOrigin.clone().invert();
+    const downTrans = postTransformMatrix.clone().multiply(downTransOrigin);
+    const upTrans = downTrans.clone().invert();
+    const matrixWorld = camera.matrixWorld.elements.slice();
+
+    return {
+      upTransOrigin: upTransOrigin.elements.slice(),
+      downTransOrigin: downTransOrigin.elements.slice(),
+      upTrans: upTrans.elements.slice(),
+      downTrans: downTrans.elements.slice(),
+      matrixWorld,
+    };
+  }
+}
+
+export { AlignmentUtils };