@realsee/five 6.8.0-alpha.2 → 6.8.0-alpha.21

package/docs/media/five.ts

@@ -1,2881 +0,0 @@
-import * as THREE from "three";
-import { Camera } from "../core/camera";
-import { Scene } from "../core/scene";
-import { InternalWebGLRenderer } from "../core/internalWebGLRenderer";
-import { noop } from "../utils/noop";
-import { uuid } from "../utils/uuid";
-import { clamp } from "../utils/clamp";
-import { Pano, PanoId, panoStringify, panoEqual } from "../utils/pano";
-import { pick, omitUndefinedFields } from "../utils/pick";
-import { notSimilarValue, notSimilarVector3 } from "../utils/isSimilar";
-import { AnimationFrameLoop } from "../utils/animationFrameLoop";
-import { ModelScene, Model, Models, ModelOptions } from "../model";
-import { now } from "../utils/now";
-import { imageURL, ImageURLOptions } from "../utils/imageURL";
-import { Fetcher, NetworkSubscribe } from "../utils/ajax";
-import { stepNumber, stepCoordinates, stepVector } from "../utils/calculateProgress";
-import { isPromise } from "../utils/isPromise";
-import { Subscribe } from "../utils/subscribe";
-import { isMobile } from "../utils/detector";
-import { defineProperty } from "../utils/defineProperty";
-import { createEvent, StateEvent, WorksEvent, ModelEvent, ModelSceneEvent, ModeChangeEvent, RenderEvent, ObjectEvent, NetworkResourceEvent } from "../utils/event";
-import { requestDeviceOrientationPermission, requestXRSessionPermission } from "../utils/requestPermission";
-import { Works, createWorks, Work, LooseWork, parseWork, LooseWorkWithExtrinsics } from "../work";
-import { registerFetcher, getFetcher } from "../work/workFetcher";
-import { verifyURL } from "../work/verify";
-import { assignState, stateEqual } from "../utils/stateUtils";
-import { assignPose } from "../utils/poseUtils";
-import { ImageOptions, TextureOptions } from "../types/imageOptions";
-import { Pose } from "../types/pose";
-import { State } from "../types/state";
-import { Viewport } from "../types/viewport";
-import { MovePanoEffect } from "../types/movePanoEffect";
-import { MovePanoOptions } from "../types/movePanoOptions";
-import { Controllers } from "./controllers";
-import { Mode } from "./mode";
-import {
-  ControllerType, ControllerInitType, ControllerCustomInitTypes,
-  BaseControllerInitType, ControllerInstanceType
-} from "./controllers";
-import { FiveRenderer, type Pass, EyeDomeLightingPass, AdaptiveLuminancePass } from '../renderer';
-import { PROXY_CONTROLLER_EVENT_NAMES, EventTypes } from "./events";
-import { initLegacyEvent } from "./events-legacy";
-import { generateDefaultVideoElement } from "./generateDefaultVideoElement";
-import { initLights } from "./initLights";
-import { FivePluginInstance } from "../types/plugin";
-import type { FiveInitArgs } from "./fiveInitArgs";
-import type { FiveLoadOptions } from "./fiveLoadOptions";
-import { getViewportScale } from "./getViewportScale";
-import { renderPoweredByRealsee } from "./renderPoweredByRealsee";
-import { Analysis } from "./analysis";
-import { draco } from '../utils/draco';
-import { ktx2 } from '../utils/ktx2';
-import { useNativeImageBitmap, canUseNativeImageBitmap } from '../texture/imageBitmap';
-import { PBMGSRenderMesh } from '../model/objects/pbmGSRenderMesh';
-/** 默认模态间切换动画时长 */
-const DEFAULT_MODE_CHANGE_DURATION = 1000;
-
-/** 默认相机FOV */
-const DEFAULT_CAMERA_FOV = 90;
-
-/** 默认代理 */
-const DEFAULT_REQUEST_PROXY = (url: string) => {
-  return url
-    .replace('//vrlab-public.ljcdn.com/', '//vr-public.realsee-cdn.cn/')
-    .replace('//vrlab-image4.ljcdn.com/', '//vr-image-4.realsee-cdn.cn/')
-    .replace('//vrlab-image3.ljcdn.com/', '//vr-image-3.realsee-cdn.cn/')
-    .replace('//vrlab-image2.ljcdn.com/', '//vr-image-2.realsee-cdn.cn/')
-    .replace('//vrlab-image1.ljcdn.com/', '//vr-image-1.realsee-cdn.cn/');
-};
-
-/* 一些共用的临时对象 */
-const scratchSphere = new THREE.Sphere();
-const scratchBox3 = new THREE.Box3();
-const scratchViewport = new THREE.Vector4();
-const scratchScissor = new THREE.Vector4();
-const scratchClearColor = new THREE.Color();
-const scratchRenderSize = new THREE.Vector2();
-
-const worksMap = new WeakMap<Five, Works>();
-const emptyWorks = createWorks([ parseWork(null) ]);
-
-const Five_Instances: Record<string, Five> = {};
-
-/**
- * 如视 VR Web展示器
- *
- * @example
- * ```
- * // 初始化构造函数
- * const five = new Five();
- * // 将绘制区域添加到页面上
- * five.appendTo(document.body);
- * // 加载 Work 数据
- * five.load({...});
- * ```
- */
-class Five extends Subscribe<EventTypes> {
-
-  static get version(): string {
-    //@ts-ignore
-    return process.env.FIVE_VERSION;
-  }
-
-  static get dracoPath(): string {
-    return draco.decoderPath;
-  }
-
-  static set dracoPath(path: string) {
-    draco.setDecoderPath(path);
-  }
-
-  static get ktx2Path(): string {
-    return ktx2.transcoderPath;
-  }
-
-  static set ktx2Path(path: string) {
-    ktx2.setTranscoderPath(path);
-  }
-
-  static get useNativeImageBitmap() {
-    return canUseNativeImageBitmap();
-  }
-
-  static set useNativeImageBitmap(enable: boolean) {
-    useNativeImageBitmap(enable);
-  }
-
-  /**
-   * Five 的显示模式，可以通过 `five.changeMode` `five.setState` 来切换
-   * @description
-   * ```text
-   * Panorama 全景图游走模式
-   * Model 模型游走模式
-   * Floorplan 模型查看模式
-   * Topview 户型图模式
-   * VRPanorama VR眼镜模式
-   * XRPanorama VR硬件模式
-   * ```
-   */
-  static Mode = {
-    Panorama: "Panorama",
-    Model: "Model",
-    Floorplan: "Floorplan",
-    Topview: "Topview",
-    Mapview: "Mapview",
-    VRPanorama: "VRPanorama",
-    XRPanorama: "XRPanorama",
-  } as const;
-
-  /**
-   * 自动播放状态是否暂停
-   * @description
-   * 可以通过 `five.play` `five.pause` 方法播放或暂停
-   */
-  public paused: boolean;
-
-  /** 当前点位序号 */
-  public pano: Pano;
-
-  /** 当前展示的模式 */
-  public currentMode: Mode;
-
-  /** 非模型部分使用的 `THREE.Scene` */
-  public scene: Scene;
-  /** 内部模型部分使用的 `THREE.Scene` */
-  public modelScene: ModelScene;
-
-  /** 供外部放置需要在xr场景下产生遮挡的物体们*/
-  public xrCustomObjectsScene: THREE.Scene;
-
-  /** 内部使用的 `Camera` */
-  public camera: Camera;
-
-  /**
-   * 当前设置的 `viewport`
-   * @description
-   * 可通过初始化，或者 setScissor 方式设置
-   * `viewport` 是将屏幕中的内容渲染到 `renderer` 的指定区域。
-   * 页面整体长宽均为 `1`。通过类似 css 的 `left` `bottom` `width` `height` 来确定区域。
-   * @example
-   * ```
-   * viewport: { left: 0.75, bottom: 0, width: 0.25, height: 1 }
-   * ```
-   */
-  public viewport: Viewport;
-
-  /**
-   * 当前使用的 THREE.WebGLRenderer。
-   * @description
-   * 如果初始化时传入了 `renderer` 则直接时该值
-   * 否则会通过 `preserveDrawingBuffer` `backgroundColor` `backgroundAlpha` `antialias` 创建一个 `THREE.WebGLRenderer`
-   */
-  public renderer?: THREE.WebGLRenderer;
-
-  /**
-   * 是否需要渲染
-   * @description
-   * 如果初始化设置了 `onlyRenderIfNeeds: true`, 则会激活按需渲染
-   * 可以通过设置 `five.needsRender = true` 来告知，five 会在下一帧渲染画面。
-   */
-  public needsRender: boolean;
-
-  /**
-   * 是否按需渲染
-   */
-  public onlyRenderIfNeeds: boolean;
-
-  /** 是否显示 Powered By Realsee */
-  public poweredByRealsee: boolean;
-
-  /** 背景颜色 */
-  public backgroundColor: THREE.Color;
-
-  /** 背景透明度 */
-  public backgroundAlpha: number;
-
-  /**
-   * 全景图的配置参数
-   * @description
-   * 可以动态对配置在 `work` 数据中的全景图片在 runtime 做 url 调整。
-   * 平衡加载时间和图片质量
-   */
-  public imageOptions: ImageOptions;
-
-  /**
-   * 模型贴图的配置参数
-   * @description
-   * 可以动态对配置在 `work` 数据中的模型贴图在 runtime 做 url 调整。
-   * 平衡加载时间和图片质量
-   */
-  public textureOptions: TextureOptions;
-
-  /**
-   * 模型贴图的配置参数
-   * @description
-   * 可以动态对配置在 `work` 数据中的模型贴图在 runtime 做 url 调整。
-   * 平衡加载时间和图片质量
-   */
-  public videoTexture: THREE.VideoTexture;
-
-  /**
-   * 当前状态
-   * @description
-   * ```text
-   * five 设置了以下状态
-   *
-   * - mode: Mode
-   * - panoIndex: number
-   * - longitude: number
-   * - latitude: number
-   * - fov: number
-   * - offset: THREE.Vector3
-   *
-   * 可以通过 five.state 和 five.setState 来获取和设置。
-   * 通过 state 设置后，five 会通过合适的动画运动来达到设置的位置。
-   * 来迎合一些通过数据驱动的场景。
-   * ```
-   */
-  public state: State;
-
-  /** 插件暴露的方法 */
-  public plugins: { [key: string]: FivePluginInstance<any> };
-
-  public readonly fiveId: string;
-
-  private stopAnimationLoop?: () => void;
-  private fps: { testTime: number, testCount: number };
-  private helperGroup: THREE.Group;
-  private modeChangeDuration: number;
-  private enableWheel: boolean;
-  private controller?: ControllerInstanceType;
-  private destroyed: boolean;
-  private stateSynced: boolean;
-  private controllerInits: { [P in Mode]: ControllerCustomInitTypes[P] };
-  private extraElements: HTMLElement[];
-  private getPixelsRenderTarget: THREE.WebGLRenderTarget;
-  private readyCallbacks: ((() => void) & { tile: boolean })[];
-  private syncingState: boolean;
-
-
-  private loadWorkTask: Promise<void>;
-  private requestProxy: (url: string, referer: string) => string | Promise<string>;
-  private networkSubscribe: NetworkSubscribe;
-  private analysis?: Analysis;
-  private currentUpdateArgs: { time: number, args: any[] };
-
-  private fiveRenderer: FiveRenderer;
-  private adaptiveLuminancePass: AdaptiveLuminancePass;
-  private eyeDomeLightingPass: EyeDomeLightingPass;
-
-
-  private pbmGSRenderMesh: PBMGSRenderMesh | null = null;
-  constructor(initArgs: FiveInitArgs = {}) {
-    super();
-
-    this.fiveId = uuid();
-    Five_Instances[this.fiveId] = this;
-
-    this.currentUpdateArgs = { time: now(), args: [] };
-    this.currentMode = 'Panorama';
-    this.pano = {
-      workCode: '',
-      panoIndex: 0,
-    };
-    this.needsRender = false;
-    this.onlyRenderIfNeeds = initArgs.onlyRenderIfNeeds ?? true;
-    this.imageOptions = { ...(initArgs.imageOptions ?? {}) };
-    this.textureOptions = { ...(initArgs.textureOptions ?? {}) };
-    this.poweredByRealsee = initArgs.poweredByRealsee ?? true;
-    this.backgroundColor = new THREE.Color(initArgs.backgroundColor ?? 0x181A1C);
-    this.backgroundAlpha = initArgs.backgroundAlpha ?? 1;
-
-    this.extraElements = [];
-
-    this.controllerInits = {
-      Panorama: Object.assign({}, initArgs.panorama),
-      Model: Object.assign({}, initArgs.model),
-      Floorplan: Object.assign({}, initArgs.floorplan),
-      Topview: Object.assign({}, initArgs.topview),
-      Mapview: Object.assign({}, initArgs.mapview),
-      VRPanorama: Object.assign({}, initArgs.vrPanorama),
-      XRPanorama: Object.assign({}, initArgs.xrPanorama),
-    };
-
-    this.fps = { testCount: 0, testTime: now() };
-
-    this.modeChangeDuration = initArgs.modeChangeDuration ?? DEFAULT_MODE_CHANGE_DURATION;
-    this.enableWheel = initArgs.enableWheel ?? true;
-    if (typeof window !== "undefined") {
-      if ('renderer' in initArgs) {
-        if (initArgs.renderer instanceof InternalWebGLRenderer) {
-          this.throwError(new Error("cannot render a internal renderer"));
-        }
-        this.renderer = initArgs.renderer;
-      } else {
-        try {
-          this.renderer = new InternalWebGLRenderer({
-            preserveDrawingBuffer: initArgs.preserveDrawingBuffer,
-            antialias: initArgs.antialias,
-            webgl2: initArgs.webgl2,
-            logarithmicDepthBuffer: initArgs.logarithmicDepthBuffer,
-            precision: initArgs.precision,
-            powerPreference: initArgs.powerPreference,
-          });
-          const viewportScale = getViewportScale();
-          this.renderer.setPixelRatio(viewportScale === 1 ? window.devicePixelRatio : 1);
-          this.renderer.setSize(512, 512);
-          this.renderer.setClearColor(this.backgroundColor, this.backgroundAlpha);
-        } catch (anyError) {
-          const error = anyError instanceof Error ? anyError : new Error(String(anyError));
-          this.throwError(error);
-        }
-      }
-    }
-
-    this.getPixelsRenderTarget = new THREE.WebGLRenderTarget(1, 1, {
-      encoding: this.renderer?.outputEncoding ?? THREE.sRGBEncoding,
-      generateMipmaps: false,
-    });
-
-    this.viewport = Object.assign({ left: 0, bottom: 0, width: 1, height: 1 }, initArgs.viewport);
-    this.camera = new Camera(DEFAULT_CAMERA_FOV);
-    this.scene = new Scene();
-    this.xrCustomObjectsScene = new THREE.Scene();
-    this.scene.add(this.xrCustomObjectsScene);
-    this.scene.matrixAutoUpdate = false;
-    this.loadWorkTask = Promise.resolve();
-
-    this.requestProxy = initArgs.requestProxy ?? DEFAULT_REQUEST_PROXY;
-    this.networkSubscribe = new NetworkSubscribe();
-    this.networkSubscribe.on("network", (source, type, state, detail) => {
-      this.emit('network.resource', createEvent<NetworkResourceEvent>('network.resource', {
-        source,
-        requestType: type,
-        requestState: state,
-        detail,
-      }));
-      this.analysis?.network(this.works, source, type, state, detail);
-    });
-
-    this.readyCallbacks = [];
-    this.syncingState = false;
-
-    this.helperGroup = new THREE.Group();
-    this.helperGroup.name = "helper";
-    this.helperGroup.matrixAutoUpdate = false;
-    this.scene.add(this.helperGroup);
-
-    worksMap.set(this, emptyWorks);
-
-    this.modelScene = new ModelScene({
-      fiveId: this.fiveId,
-    });
-
-    this.modelScene.addEventListener('model.create', event => {
-      this.bindModel(event.model);
-    });
-    this.scene.add(this.modelScene);
-
-    const [ emptyModel ] = this.modelScene.setModels(emptyWorks, { forceReplaceImmediately: true });
-    // 认为 emptyModel 是 loaded 的情况。
-    // 防止 emptyModel 触发 model load 事件
-    // this.modelScene.loaded = true;
-    // 兼容业务的奇怪规则
-    // 认为 emptyModel 永远不会 loaded
-    defineProperty(emptyModel, 'loaded', {
-      get() {
-        return false;
-      },
-      set(_value) {},
-    })
-
-    this.videoTexture = new THREE.VideoTexture(initArgs.videoInstance || generateDefaultVideoElement());
-
-    const lights = initLights();
-    this.scene.add(lights);
-
-    this.state = {
-      mode: this.currentMode,
-      workCode: this.pano.workCode,
-      panoIndex: this.pano.panoIndex,
-      longitude: this.camera.pose.longitude,
-      latitude: this.camera.pose.latitude,
-      fov: this.camera.pose.fov,
-      offset: this.camera.pose.offset.clone(),
-      distance: this.camera.pose.distance,
-    };
-    this.stateSynced = false;
-
-
-    this.destroyed = false;
-    this.paused = true;
-    if (typeof window !== "undefined") {
-      if (initArgs.play !== false) {
-        this.play();
-      }
-      this.stopAnimationLoop = AnimationFrameLoop.shared.add((time, deltaTime, ...args: any[]) => {
-        this.updateTime(time, deltaTime, ...args);
-      }, false, 0, 10);
-    }
-
-    const fullscreenchange = () => {
-      if (typeof document !== "undefined" && document.fullscreenElement === null && this.currentMode === "VRPanorama") {
-        (this.controller as ControllerInstanceType<"VRPanorama">).emit("vr.requestExit", createEvent('vr.requestExit', {}));
-      }
-    };
-    const webglcontextrestored = () => {
-      this.needsRender = true;
-    };
-    if (typeof document !== "undefined") {
-      document.addEventListener("fullscreenchange", fullscreenchange, false);
-    }
-    if (this.renderer) {
-      this.renderer.domElement.addEventListener('webglcontextrestored', webglcontextrestored, false);
-    }
-    this.removeEventListeners = () => {
-      if (typeof document !== "undefined") {
-        document.removeEventListener("fullscreenchange", fullscreenchange, false);
-      }
-      if (this.renderer) {
-        this.renderer.domElement.removeEventListener('webglcontextrestored', webglcontextrestored, false);
-      }
-    }
-
-    // 加载插件
-    this.plugins = {};
-    if (initArgs.plugins && initArgs.plugins.length) {
-      for (const pluginInit of initArgs.plugins) {
-        if (typeof pluginInit === "function") {
-          pluginInit(this)
-        } else if (Array.isArray(pluginInit)) {
-          const [factory, instanceName, parameters] = pluginInit;
-          if (typeof factory === "function") {
-            const instance = factory(this, parameters);
-            if (typeof instanceName === "string") {
-              if (this.plugins[instanceName]) {
-                this.throwError(new Error(`plugin name ${instanceName} is exists.`));
-              } else {
-                this.plugins[instanceName] = instance;
-              }
-            }
-          }
-        }
-      }
-    }
-
-    initLegacyEvent(this);
-
-    this.fiveRenderer = new FiveRenderer();
-
-    this.adaptiveLuminancePass = new AdaptiveLuminancePass();
-    this.adaptiveLuminancePass.enabled = false;
-    this.fiveRenderer.composer.addPass(this.adaptiveLuminancePass);
-
-    this.eyeDomeLightingPass = new EyeDomeLightingPass(this.camera);
-    this.eyeDomeLightingPass.enabled = false;
-    this.fiveRenderer.composer.addPass(this.eyeDomeLightingPass);
-    //3dgs,只有在webgl2下才能开启
-    if(initArgs.webgl2) {
-      this.pbmGSRenderMesh = new PBMGSRenderMesh();
-      this.scene.add(this.pbmGSRenderMesh);
-    }else{
-      console.warn("未开启webgl2,3dgs功能不可用");
-    }
-  }
-
-  get ident() {
-    return this.fiveId;
-  }
-
-  get panoIndex(): number {
-    return this.pano.panoIndex;
-  }
-
-  /**
-   * 析构 five 对象。
-   * @description
-   * 一旦调用了析构方法，则不能再使用当前 five 对象了。
-   * 你可以新建一个新的。
-   */
-  public dispose(): void {
-    if (this.destroyed === true) return;
-
-    delete Five_Instances[this.fiveId];
-
-    this.emit("dispose");
-
-    this.destroyed = true;
-    this.pause();
-    if (this.stopAnimationLoop) {
-      this.stopAnimationLoop()
-      this.stopAnimationLoop = undefined;
-    }
-
-    this.off();
-    this.networkSubscribe.off();
-    if (this.controller) {
-      this.controller.destroy();
-      this.controller = undefined;
-    }
-    const element = this.getElement();
-    if (element && element.parentNode) {
-      element.parentNode.removeChild(element);
-    }
-
-    const parameter = this.modelScene.parameter;
-    if (parameter.pano0) {
-      parameter.pano0.map.dispose();
-    }
-    if (parameter.pano1 && parameter.pano1.map !== parameter.pano0?.map) {
-      parameter.pano1.map.dispose();
-    }
-    parameter.reset('pano0', 'pano1');
-
-    this.modelScene.dispose();
-    this.scene.dispose();
-    this.xrCustomObjectsScene.dispose();
-
-    worksMap.set(this, emptyWorks);
-
-    if (this.renderer) {
-      this.renderer.render(new THREE.Scene(), new THREE.Camera());
-    }
-
-    this.fiveRenderer.dispose();
-
-    if (this.renderer instanceof InternalWebGLRenderer) {
-      if (this.renderer.forceContextLoss) {
-        this.renderer.forceContextLoss();
-      }
-      this.renderer.dispose();
-    }
-  }
-
-  /**
-   * 设置 `viewport`
-   * @param viewport - 指定区域
-   * `scissor` 是将屏幕中的内容渲染到 `renderer` 的指定区域。
-   * 请确保在 five 初始化时传入 `renderer` 对象
-   * 页面整体长宽均为 `1`。通过类似 css 的 `left` `bottom` `width` `height` 来确定区域。
-   * @example
-   * ```
-   * five.setViewport({ left: 0.75, bottom: 0, width: 0.25, height: 1 })
-   * ```
-   */
-  public setViewport(viewport: Viewport): void {
-    Object.assign(this.viewport, viewport);
-    this.needsRender = true;
-  }
-
-  /**
-   * 获取 boundingMesh
-   */
-  public get boundingMesh() {
-    return this.modelScene.boundingMesh;
-  }
-
-  /**
-   * 帮助元素显示/隐藏
-   */
-  public get helperVisible() {
-    return this.helperGroup.visible;
-  }
-  public set helperVisible(visible: boolean) {
-    if (this.helperGroup.visible !== visible) {
-      this.helperGroup.visible = visible;
-      this.emit('helpers.visible', createEvent<ObjectEvent>('helpers.visible', {
-        object: this.helperGroup,
-      }));
-      this.needsRender = true;
-
-    }
-  }
-
-  public updateConfiguration(args: Pick<FiveInitArgs, "panorama" | "model" | "floorplan" | "topview" | "mapview" | "vrPanorama" | "imageOptions" | "textureOptions">, refresh: boolean = true) {
-    let needsUpdateController = false;
-    let forceUpdateController = false;
-    if (args.panorama) {
-      Object.assign(this.controllerInits["Panorama"], omitUndefinedFields(args.panorama));
-      if (this.currentMode === "Panorama") {
-        needsUpdateController = true;
-      }
-    }
-    if (args.model) {
-      Object.assign(this.controllerInits["Model"], omitUndefinedFields(args.model));
-      if (this.currentMode === "Model") {
-        needsUpdateController = true;
-      }
-    }
-    if (args.floorplan) {
-      Object.assign(this.controllerInits["Floorplan"], omitUndefinedFields(args.floorplan));
-      if (this.currentMode === "Floorplan") {
-        needsUpdateController = true;
-      }
-    }
-    if (args.topview) {
-      Object.assign(this.controllerInits["Topview"], omitUndefinedFields(args.topview));
-      if (this.currentMode === "Topview") {
-        needsUpdateController = true;
-      }
-    }
-    if (args.mapview) {
-      Object.assign(this.controllerInits["Mapview"], omitUndefinedFields(args.mapview));
-      if (this.currentMode === "Mapview") {
-        needsUpdateController = true;
-      }
-    }
-    if (args.vrPanorama) {
-      Object.assign(this.controllerInits["VRPanorama"], omitUndefinedFields(args.vrPanorama));
-      if (this.currentMode === "VRPanorama") {
-        needsUpdateController = true;
-      }
-    }
-    if (args.imageOptions) {
-      Object.assign(this.imageOptions, args.imageOptions);
-      if (this.currentMode === "Panorama" || this.currentMode === "VRPanorama") {
-        forceUpdateController = true;
-        needsUpdateController = true;
-      }
-    }
-    if (args.textureOptions) {
-      Object.assign(this.textureOptions, args.textureOptions);
-    }
-    if (refresh && needsUpdateController && this.controller && this.currentMode) {
-      const result = this.controller.updateConfiguration(this.controllerInits[this.currentMode]);
-      if (!result || forceUpdateController) {
-        this.changeMode(this.currentMode, this.getCurrentState(), 0, false, true);
-      }
-    }
-  }
-
-  /**
-   * 将显示区域加载到页面 DOM 中
-   * @description
-   * 如果你是传入的 `renderer`. 则你需要自行来方式显示区域该方法并不生效
-   *
-   * @param element - 加载到页面的 DOM 元素
-   * @param size - 显示区域尺寸 默认铺满这个 DOM 元素
-   */
-  public appendTo(element: HTMLElement, size: { width?: number, height?: number } = {}): void {
-    if (!this.renderer) return;
-    if (!(this.renderer instanceof InternalWebGLRenderer)) {
-      this.throwError(new Error("cannot call appendTo method when render a external renderer"));
-      return;
-    }
-    const renderElement = this.getElement();
-    if (!renderElement) return;
-    element.appendChild(renderElement);
-    this.refresh(size);
-    const positionType = window.getComputedStyle(element).position;
-    if (
-      positionType !== "relative" &&
-      positionType !== "absolute" &&
-      positionType !== "fixed" &&
-      positionType !== "sticky"
-    ) {
-      element.style.position = "relative";
-    }
-  }
-
-  /**
-   * 设置显示区域尺寸
-   * @description
-   * 如果你是传入的 `renderer`. 则你需要自行来设置显示区域尺寸，该方法并不生效
-   *
-   * @param size - 显示区域尺寸 默认铺满这个 DOM 元素
-   * @param pixelRatio - 像素比 默认继承之前的设置
-   */
-  public refresh(size: { width?: number, height?: number } = {}, pixelRatio?: number): void {
-    if (!this.renderer) return;
-
-    const element = this.renderer.domElement;
-    const container = element.parentNode as (HTMLElement | null);
-
-    let { width = container?.offsetWidth ?? 512, height = container?.offsetHeight ?? 512 } = size;
-
-    width = Math.max(1, width);
-    height = Math.max(1, height);
-
-    if (!pixelRatio) {
-      const viewportScale = getViewportScale();
-      const devicePixelRatio = typeof window !== 'undefined' ? window.devicePixelRatio : 1;
-      pixelRatio = (viewportScale === 1 ? devicePixelRatio : 1) ?? 1;
-      if (pixelRatio > 1) {
-        const maxSize = Math.max(width, height) * pixelRatio;
-        const maxTextureSize = Math.min(this.renderer.capabilities.maxTextureSize, 4096);
-        if (maxSize > maxTextureSize) {
-          pixelRatio = Math.max(pixelRatio / maxSize * maxTextureSize, 1);
-          pixelRatio = Math.floor(pixelRatio * 100) / 100;
-        }
-      }
-    }
-
-    this.renderer.setPixelRatio(pixelRatio);
-    this.renderer.setSize(width, height);
-
-    this.needsRender = true;
-
-    const time = now();
-    const deltaTime = time - this.currentUpdateArgs.time;
-    const args = this.currentUpdateArgs.args;
-    this.updateTime(time, deltaTime, ...args);
-  }
-
-  /**
-   * 绑定一个额外 DOM 区域，接受触控/鼠标事件
-   * @returns 解除该绑定
-   */
-  public addExtraElement(element: HTMLElement): () => void {
-    if (this.extraElements.indexOf(element) === -1) {
-      this.extraElements.push(element);
-      if (this.controller) {
-        this.controller.bindExtraElement(element);
-      }
-    }
-    return () => this.removeExtraElement(element);
-  }
-
-  /**
-   * 解除绑定的一个额外 DOM 区域
-   */
-  public removeExtraElement(element: HTMLElement): void {
-    const index = this.extraElements.indexOf(element);
-    if (index === -1) return;
-    this.extraElements.splice(index, 1);
-    if (this.controller) {
-      this.controller.unbindExtraElement(element);
-    }
-  }
-
-  public getSize(target: THREE.Vector2): THREE.Vector2 {
-    if (!this.renderer) {
-      throw new Error("renderer is not initialized");
-    }
-    this.renderer.getSize(target);
-    target.x *= this.viewport.width;
-    target.y *= this.viewport.height;
-    return target;
-  }
-
-  public getDrawingBufferSize(target: THREE.Vector2): THREE.Vector2 {
-    if (!this.renderer) {
-      throw new Error("renderer is not initialized");
-    }
-    this.renderer.getDrawingBufferSize(target);
-    target.x *= this.viewport.width;
-    target.y *= this.viewport.height;
-    return target;
-  }
-
-  /**
-   * 移动相机。（不触发点位移动）
-   * @description
-   * 如果动画中途被打断（用户触发行为，或者调用 setState, load, changeMode）的等
-   * 会 Promise.reject。运动完成则 Promise.resolve
-   * @param pose - 相机目标位置
-   * @param duration - 动画触发的时常
-   * @param userAction - 是否用户触发
-   * @returns Promise 是否移动成功
-   */
-  public updateCamera(pose: Partial<Pose>, duration: number, userAction: boolean = true): Promise<void> {
-    if (!this.controller) {
-      throw new Error('controller is not initialized.');
-    }
-    return this.controller.updateCamera(pose, duration, userAction);
-  }
-
-  /**
-   * 通过帧动画移动相机。（不触发点位移动）
-   * @description
-   * 如果动画中途被打断（用户触发行为，或者调用 setState, load, changeMode）的等
-   * 会 Promise.reject。运动完成则 Promise.resolve
-   * @param keyframes - 动画帧
-   * @param duration - 动画触发的时常
-   * @param userAction - 是否用户触发
-   * @returns Promise 是否移动成功
-   */
-  public updateCameraWithKeyframes(keyframes: { progress: number; value: Pose; key?: string; }[], duration: number, userAction: boolean = true): Promise<void> {
-    if (!this.controller) {
-      throw new Error('controller is not initialized.');
-    }
-    return this.controller.updateCameraWithKeyframes(keyframes, duration, userAction);
-  }
-
-  /** 当前加载的 work 数据 */
-  public get works(): Works {
-    const works = worksMap.get(this);
-    if (!works) {
-      return emptyWorks;
-    }
-    return works;
-  }
-
-  public get work(): Work {
-    return this.works[0];
-  }
-
-  public get observers() {
-    return this.work.observers;
-  }
-
-  public get models(): Models {
-    return this.modelScene.models;
-  }
-
-  public get model(): Model {
-    return this.modelScene.models[0];
-  }
-
-  /**
-   * 加载 Work 数据
-   * @param inputWork - Work 数据
-   * @param state - 初始化姿态
-   *  - "inherit" 使用当前姿态
-   *  - "initial" 使用 Work 数据中的 initial 姿态
-   *  - State 自定义姿态
-   * @param options - 切换时间, 切换效果
-   */
-  public load(
-    inputWork: string | Work | LooseWork | string[] | Work[] | LooseWork[] | LooseWorkWithExtrinsics[] | Promise<Work | LooseWork | Work[] | LooseWork[] | LooseWorkWithExtrinsics[]>,
-    state?: "inherit" | "initial" | Partial<State>,
-    options?: number | FiveLoadOptions,
-    userAction: boolean = true,
-  ): Promise<void>  {
-    if (!this.renderer) {
-      throw new Error("renderer is not initialized");
-    }
-    const task = this.loadWorkTask.then(() => {
-      if (isPromise(inputWork)) {
-        return inputWork.then(inputWork => {
-          return this.load_(inputWork, state, options, userAction);
-        });
-      } else {
-        return this.load_(inputWork, state, options, userAction);
-      }
-    });
-    this.loadWorkTask = task.catch(error => {
-      this.throwError(error);
-    });
-    return task;
-  }
-
-  private load_(
-    inputWork: string | Work | LooseWork | string[] | Work[] | LooseWork[] | LooseWorkWithExtrinsics[],
-    state?: "inherit" | "initial" | Partial<State>,
-    options?: number | FiveLoadOptions,
-    userAction: boolean = true,
-  ): Promise<void> {
-    const loadOptions: FiveLoadOptions = {};
-    if (typeof options === 'number') {
-      loadOptions.duration = options;
-    } else if (typeof options === 'object') {
-      Object.assign(loadOptions, options);
-    }
-
-    if (this.works === emptyWorks) {
-      if (loadOptions.duration === undefined) {
-        loadOptions.duration = 0;
-      }
-      if (loadOptions.effect === undefined) {
-        loadOptions.effect = 'instant';
-      }
-    }
-
-    const modelOptions: ModelOptions = {};
-    Object.assign(modelOptions, loadOptions.model);
-
-    // 处理历史 alias
-    if (!modelOptions["3d-tiles"] && loadOptions["3d-tiles"]) {
-      modelOptions["3d-tiles"] = loadOptions["3d-tiles"];
-    }
-    if (!modelOptions.textureOptions && loadOptions.textureOptions) {
-      modelOptions.textureOptions = loadOptions.textureOptions;
-    }
-    if (!modelOptions.textureOptions && this.textureOptions) {
-      modelOptions.textureOptions = this.textureOptions;
-    }
-
-    let workArray: Work[] = [];
-    if (Array.isArray(inputWork)) {
-      for (const input of inputWork) {
-        if (input instanceof Work) {
-          workArray.push(input);
-        } else if (typeof input !== 'string' && 'work' in input) {
-          workArray.push(parseWork(input.work, input));
-        } else {
-          workArray.push(parseWork(input));
-        }
-      }
-    } else {
-      if (inputWork instanceof Work) {
-        workArray.push(inputWork);
-      } else {
-        workArray.push(parseWork(inputWork));
-      }
-    }
-
-    if (loadOptions.mode === 'add') {
-      workArray = ([] as Work[]).concat(this.works, workArray);
-    }
-
-    let works: Works;
-    try {
-      works = createWorks(workArray);
-    } catch(error) {
-      this.throwError(error as Error);
-      return Promise.reject(error);
-    }
-
-    for (const work of works) {
-      this.bindWorkFetcher(work);
-    }
-
-    if (state === undefined) {
-      state = "inherit";
-    }
-    if (state === 'inherit') {
-      if (this.works === emptyWorks) {
-        state = 'initial';
-      }
-    }
-
-    const prevMode = this.currentMode;
-
-    const initial = works.initial;
-    const initialObserver = initial.work.observers[0];
-    let initialPano: Pano = initialObserver ?
-      {
-        workCode: initialObserver.work.workCode,
-        panoIndex: initialObserver.panoIndex,
-      }:
-      {
-        workCode: initial.work.workCode,
-        panoIndex: 0,
-      };
-    let initialMode: Mode = initial.mode ?? (initialObserver ? 'Panorama' : 'Mapview');
-    let initialPose: Partial<Pose> = {};
-
-    if (state === "inherit") {
-      const currentState = this.getCurrentState();
-      const [currentWork] = works.filter(work => work.workCode === currentState.workCode);
-      if (currentWork) {
-        initialPano = {
-          workCode: currentState.workCode,
-          panoIndex: currentState.panoIndex,
-        }
-        initialMode = currentState.mode;
-        initialPose = {
-          longitude: currentState.latitude,
-          latitude: currentState.latitude,
-          fov: currentState.fov,
-          distance: currentState.distance,
-          offset: currentState.offset.clone(),
-        };
-      } else {
-        state = {
-          mode: prevMode,
-        }
-        const observer = works[0]?.observers?.[this.panoIndex];
-        if (observer) {
-          state.workCode = observer.work.workCode;
-          state.panoIndex = observer.panoIndex;
-        } else if (typeof works.initial.panoIndex === 'number') {
-          state.workCode = works.initial.work.workCode;
-          state.panoIndex = works.initial.panoIndex;
-        } else {
-          if (state.mode === 'Panorama' || state.mode === 'VRPanorama' || state.mode === 'XRPanorama') {
-            state.mode = 'Mapview';
-          }
-        }
-        if (state.mode === prevMode) {
-          state.longitude = this.camera.pose.longitude;
-          state.latitude = this.camera.pose.latitude;
-          state.fov = this.camera.pose.fov;
-        }
-      }
-    }
-
-    if (state === "initial") {
-      if (typeof initial.panoIndex === 'number') {
-        initialPano = {
-          workCode: initial.work.workCode,
-          panoIndex: initial.panoIndex,
-        }
-      }
-      if (initial.mode) {
-        initialMode = initial.mode;
-      }
-      initialPose = {
-        longitude: initial.longitude,
-        latitude: initial.latitude,
-        fov: initial.fov,
-        distance: initial.distance,
-        offset: initial.offset?.clone(),
-      };
-    }
-
-    if (typeof state === 'object') {
-      initialMode = state.mode ?? prevMode;
-      if (typeof state.panoIndex === 'number') {
-        const observer = works.getObserver({
-          workCode: state.workCode ?? initial.work.workCode ?? '',
-          panoIndex: state.panoIndex,
-        });
-        if (observer) {
-          initialPano = {
-            workCode: observer.work.workCode,
-            panoIndex: observer.panoIndex,
-          };
-        }
-      }
-      initialPose = {
-        longitude: state.longitude,
-        latitude: state.latitude,
-        fov: state.fov,
-        distance: state.distance,
-        offset: state.offset ? new THREE.Vector3().copy(state.offset) : undefined,
-      };
-    }
-
-    let duration = loadOptions.duration ?? this.modeChangeDuration;
-    if (
-      (initialMode === 'Floorplan' || initialMode === 'Topview' || initialMode === 'Mapview') &&
-      prevMode === initialMode
-    ) {
-      duration = 0;
-    }
-
-    let effect: MovePanoEffect = 'fly';
-    if (
-      (initialMode === 'Panorama' || initialMode === 'VRPanorama' || initialMode === 'XRPanorama') &&
-      prevMode === initialMode
-    ) {
-      effect = loadOptions.effect ?? 'fade';
-    }
-
-    this.emit('works.request', createEvent<WorksEvent>('works.request', {
-      input: inputWork,
-      works,
-      userAction,
-    }));
-
-    const applyController = (initialMode: Mode, initialPano: Pano, initialPose: Partial<Pose>) => {
-      const currentState = this.getCurrentState();
-
-      let initialState = {
-        mode: initialMode,
-        ...initialPano,
-        ...initialPose,
-      };
-
-      if (state === 'inherit') {
-        initialState = this.getCurrentState();
-      }
-
-      this.pano = initialPano;
-      const initialParams: ControllerInitType<Mode> = {
-        initial: {
-          state: initialState,
-          currentState: currentState,
-          duration,
-          effect,
-          userAction,
-        },
-        ...this.commonParams(),
-        ...this.controllerInits[initialMode],
-      };
-      const initAnimationEndState = Controllers[initialState.mode].initAnimationEndState(initialParams);
-      if (this.controller && prevMode === initialMode) {
-        if (this.controller.updateWork(works, initAnimationEndState, { effect, duration }, userAction) === false) {
-          this.controller.destroy();
-          this.controller = this.applyController(initialMode, initialParams);
-        }
-      } else {
-        if (this.controller) {
-          this.controller.destroy();
-        } else {
-          const state = Controllers[initialMode].initAnimationEndState(initialParams);
-          this.camera.setFromPose(state);
-          this.emit("camera.update", createEvent<StateEvent>('camera.update', {
-            state: this.getCurrentState(),
-            userAction,
-          }));
-        }
-        this.controller = this.applyController(initialMode, initialParams);
-        const modeChangeEvent = createEvent<ModeChangeEvent>('mode.change', {
-          prevMode,
-          mode: initialMode,
-          state: initAnimationEndState,
-          userAction,
-        });
-        try {
-          this.emit('mode.change', modeChangeEvent);
-        } catch(error: any) {
-          console.error(error);
-        }
-      }
-      this.updateTime(this.currentUpdateArgs.time, 0, ...this.currentUpdateArgs.args);
-    }
-
-    worksMap.set(this, works);
-
-    let loadModelPromise = Promise.resolve();
-    if (
-      initialMode === Five.Mode.Floorplan ||
-      initialMode === Five.Mode.Topview ||
-      initialMode === Five.Mode.Mapview ||
-      initialMode === Five.Mode.Model
-    ) {
-      if (this.modelScene.loaded === false) {
-        this.camera.setFromPose(initialPose);
-        assignPose(this.state, this.camera.pose);
-      }
-      const models = this.modelScene.setModels(works, modelOptions);
-      loadModelPromise = Promise.all(models.map(model => model.loadedReady)).then(() => {
-        this.needsRender = true;
-        applyController(initialMode, initialPano, initialPose);
-        this.emit("camera.update", createEvent<StateEvent>('camera.update', {
-          state: this.getCurrentState(),
-          userAction,
-        }));
-      });
-    } else {
-      applyController(initialMode, initialPano, initialPose);
-      const controller = this.controller!;
-      let callbacked = false;
-      this.modelScene.autoRefine = false;
-      const callback = () => {
-        if (this.works === works && callbacked === false) {
-          this.needsRender = true;
-          this.emit("camera.update", createEvent<StateEvent>('camera.update', {
-            state: this.getCurrentState(),
-            userAction,
-          }));
-          callbacked = true;
-          this.modelScene.autoRefine = true;
-        }
-        controller!.off("pano.arrived", callback);
-        controller!.off("pano.cancel", callback);
-      }
-      const models = this.modelScene.setModels(works, modelOptions);
-      loadModelPromise = Promise.all(models.map(model => model.initReady)).then(noop);
-      controller!.once("pano.arrived", callback);
-      controller!.once("pano.cancel", callback);
-      setTimeout(callback, (loadOptions.duration ?? this.modeChangeDuration) + 1000);
-    }
-    this.emit("works.load", createEvent<WorksEvent>('works.load', {
-      input: inputWork,
-      userAction,
-      works,
-    }));
-    return loadModelPromise
-      .then(() => this.ready())
-      .then(() => {
-        this.emit("works.ready", createEvent<WorksEvent>('works.ready', {
-          input: inputWork,
-          userAction,
-          works,
-        }));
-        this.analysis?.work(works);
-      });
-  }
-
-  public reset(): Promise<void> {
-    const task = this.loadWorkTask.then(() => {
-        return this.reset_();
-    });
-    this.loadWorkTask = task.catch(error => {
-      this.throwError(error);
-    });
-    return task;
-  }
-
-  public reset_(): Promise<void> {
-    return new Promise(resolve => {
-      if (this.controller) {
-        this.controller.destroy();
-        this.controller = undefined;
-      }
-      const parameter = this.modelScene.parameter;
-      if (parameter.pano0) {
-        parameter.pano0.map.dispose();
-      }
-      if (parameter.pano1 && parameter.pano1.map !== parameter.pano0?.map) {
-        parameter.pano1.map.dispose();
-      }
-      parameter.set({ pano0: null, pano1: null, modelAlpha: 1 });
-
-      worksMap.set(this, emptyWorks);
-      this.modelScene.setModels(emptyWorks, { forceReplaceImmediately: true });
-      if (this.renderer) {
-        this.modelScene.update(this.renderer, this.camera);
-      }
-      this.needsRender = true;
-
-      this.currentMode = 'Panorama';
-      this.pano = {
-        workCode: '',
-        panoIndex: 0,
-      };
-      this.camera.setFromPose({
-        distance: 0,
-        fov: DEFAULT_CAMERA_FOV,
-        longitude: 0,
-        latitude: 0,
-        offset: new THREE.Vector3(0, 0, 0),
-      })
-      this.state = {
-        mode: this.currentMode,
-        workCode: this.pano.workCode,
-        panoIndex: this.pano.panoIndex,
-        longitude: this.camera.pose.longitude,
-        latitude: this.camera.pose.latitude,
-        fov: this.camera.pose.fov,
-        offset: this.camera.pose.offset.clone(),
-        distance: this.camera.pose.distance,
-      };
-      this.camera.needsRender = false;
-      this.needsRender = false;
-      resolve();
-    });
-  }
-
-  /**
-   * 切换模态
-   * @param mode - 切换到的模态
-   * @param state - 切换完成时的姿态
-   * @param options - 模态切换动画用时
-   * @param userAction - 是否时用户动作触发 默认 true
-   * @param force - 必须重新初始化 controller
-   */
-  public changeMode<T extends Mode>(
-    mode: T,
-    state: Partial<Omit<State, "mode">> = {},
-    options?: number | { duration?: number, effect?: MovePanoEffect },
-    userAction: boolean = true,
-    force: boolean = false,
-  ): Promise<void> {
-    return new Promise((resolve, reject) => {
-
-      if (!this.renderer) {
-        throw new Error("renderer is not initialized.");
-      }
-
-      state = { ...state };
-
-      let duration = 0;
-      if (this.controller) {
-        if (typeof options === 'number') {
-          duration = options;
-        } else {
-          duration = options?.duration ?? this.modeChangeDuration;
-        }
-      }
-
-      let effect: MovePanoEffect = 'fly';
-      if (this.controller) {
-        if (typeof options === 'object' && options.effect) {
-          effect = options.effect;
-        }
-      }
-
-      const nextPano: Pano = typeof state.panoIndex === 'number' ?
-        {
-          workCode: state.workCode ?? this.work?.workCode ?? '',
-          panoIndex: state.panoIndex,
-        } :
-        this.pano;
-
-      if (!Five.Mode.hasOwnProperty(mode)) {
-        const error = new Error(`mode "${mode}" is not existed`);
-        this.throwError(error);
-        reject(error);
-        return;
-      }
-
-      if (
-        mode === Five.Mode.Panorama ||
-        mode === Five.Mode.VRPanorama ||
-        mode === Five.Mode.XRPanorama
-      ) {
-        if (!this.works.getObserver(nextPano)) {
-          const error = new Error(`PanoId ${panoStringify(nextPano)} not existed.`);
-          this.throwError(error);
-          reject(error);
-          return;
-        }
-      }
-
-      if (
-        mode === Five.Mode.Floorplan ||
-        mode === Five.Mode.Topview ||
-        mode === Five.Mode.Mapview ||
-        mode === Five.Mode.Model
-      ) {
-        if (this.modelScene.empty) {
-          duration = 0;
-        }
-      }
-
-      const prevController = this.controller;
-      const prevMode = this.currentMode;
-
-      const doChangeMode = () => {
-        if (this.controller) {
-          this.controller.stopMomentumMovement();
-        }
-        if (this.controller && force === false && prevMode === mode) {
-          if (
-            mode === Five.Mode.Panorama ||
-            mode === Five.Mode.Model ||
-            mode === Five.Mode.VRPanorama ||
-            mode === Five.Mode.XRPanorama
-          ) {
-            if (!panoEqual(this.pano, nextPano) && 'moveToPano' in this.controller && typeof this.controller.moveToPano === 'function') {
-              this.controller.moveToPano(nextPano, { duration, ...state }, userAction);
-            } else {
-              this.controller.updateCamera(state, duration, userAction).catch(noop);
-            }
-          } else {
-            if (!panoEqual(this.pano, nextPano)) {
-              this.pano = nextPano;
-            }
-            this.controller.updateCamera(state, duration, userAction).catch(noop);
-          }
-        } else {
-          const initialState: Partial<State> = {
-            ...state,
-            ...nextPano,
-          };
-          const params: ControllerInitType<T> = {
-            initial: {
-              state: initialState,
-              currentState: this.getCurrentState(),
-              duration,
-              effect,
-              userAction
-            },
-          ...this.commonParams(),
-          ...this.controllerInits[mode]
-          };
-          const initAnimationEndState = Controllers[mode].initAnimationEndState(params);
-
-          const modeChangeEvent = createEvent<ModeChangeEvent>('mode.change.request', {
-            prevMode: this.currentMode,
-            mode: mode,
-            state: initAnimationEndState,
-            userAction,
-          });
-          this.emit('mode.change.request', modeChangeEvent);
-          if (!modeChangeEvent.defaultPrevented) {
-            if (prevController) {
-              prevController.destroy();
-            }
-            this.controller = this.applyController(mode, params);
-            const modeChangeEvent = createEvent<ModeChangeEvent>('mode.change', {
-              prevMode: this.currentMode,
-              mode: mode,
-              state: initAnimationEndState,
-              userAction,
-            });
-            this.emit('mode.change', modeChangeEvent);
-          }
-        }
-        resolve();
-      }
-
-      const session = AnimationFrameLoop.shared.getContext();
-      if (session) {
-        if (typeof XRSession !== 'undefined' && session instanceof XRSession) {
-          session.end();
-        }
-        AnimationFrameLoop.shared.setContext(null);
-      }
-
-      if (mode === Five.Mode.VRPanorama) {
-        this.requestFullscreen();
-        requestDeviceOrientationPermission().then(() => doChangeMode()).catch(anyError => {
-          const error = anyError instanceof Error ? anyError : new Error(String(anyError));
-          this.exitFullscreen();
-          this.throwError(error);
-          reject(error);
-        });
-      } else if (mode === Five.Mode.XRPanorama) {
-        requestXRSessionPermission().then((session: any) => {
-          //给button提供一个钩子事件
-          AnimationFrameLoop.shared.setContext(session);
-          force = true;
-          doChangeMode();
-        }).catch(anyError => {
-          const error = anyError instanceof Error ? anyError : new Error(String(anyError));
-          this.throwError(error);
-          reject(error);
-        });
-      } else {
-        doChangeMode();
-      }
-    });
-  }
-
-  /**
-   * 获取画面中的像素颜色
-   * @param x - 获取像素区域的起始坐标 x
-   * @param y - 获取像素区域的起始坐标 y
-   * @param width - 获取像素区域的宽度
-   * @param height - 获取像素区域的高度
-   * @param pixelRatio - 获取区域的像素比
-   * @param flipY - 是否Y轴翻转
-   * @param buffer - 存储数组
-   * @returns rgba颜色平铺的 Uint8Array
-   */
-  public getPixels<T extends Uint8Array | Uint8ClampedArray = Uint8Array>(
-    x: number,
-    y: number,
-    width: number,
-    height: number,
-    pixelRatio?: number,
-    flipY?: boolean,
-    buffer?: T
-  ): T
-  /**
-   * 获取画面中的像素颜色
-   * @param options - 参数
-   * @returns
-   */
-  public getPixels<T extends Uint8Array | Uint8ClampedArray = Uint8Array>(
-    options: {
-      /** 获取像素区域的起始坐标 x */
-      x: number,
-      /** 获取像素区域的起始坐标 y */
-      y: number,
-      /** 获取像素区域的宽度 */
-      width: number,
-      /** 获取像素区域的高度 */
-      height: number,
-      /** 获取区域的像素比 */
-      pixelRatio?: number,
-      /* 是否展示 helper */
-      helperVisible?: boolean,
-      /* 是否忽略全景图 */
-      skipPanorama?: boolean,
-      /** 是否Y轴翻转 */
-      flipY?: boolean,
-      /** 存储数组 */
-      buffer?: T
-    }
-  ): T
-  public getPixels<T extends Uint8Array | Uint8ClampedArray = Uint8Array>(
-    xOrOptions: any,
-    _y?: number, _width?: number, _height?: number, _pixelRatio?: number, _flipY?: boolean, _buffer?: T
-  ): T {
-
-    if (!this.renderer) {
-      throw new Error("renderer is not initialized.");
-    }
-
-    const currentTime = now();
-    const prevPixelRatio = this.renderer.getPixelRatio();
-    const prevRenderTarget = this.renderer.getRenderTarget();
-    const renderSize = this.getSize(new THREE.Vector2());
-
-    // 数据兼容
-    let x: number = 0;
-    let y: number = 0;
-    let width: number = 1;
-    let height: number = 1;
-    let pixelRatio: number | undefined;
-    let flipY: boolean | undefined;
-    let helperVisible: boolean | undefined;
-    let skipPanorama: boolean | undefined;
-    let buffer: T | undefined;
-
-    if (typeof xOrOptions === 'number') {
-      x = xOrOptions;
-      if (typeof _y === 'number') {
-        y = _y;
-      }
-      if (typeof _width === 'number') {
-        width = _width;
-      }
-      if (typeof _height === 'number') {
-        height = _height;
-      }
-      pixelRatio = _pixelRatio;
-      flipY = _flipY;
-      buffer = _buffer;
-    } else {
-      x = xOrOptions.x;
-      y = xOrOptions.y;
-      width = xOrOptions.width;
-      height = xOrOptions.height;
-      pixelRatio = xOrOptions.pixelRatio;
-      flipY = xOrOptions.flipY;
-      helperVisible = xOrOptions.helperVisible;
-      skipPanorama = xOrOptions.skipPanorama;
-      buffer = xOrOptions.buffer;
-    }
-
-    // 将所有数据作为整数，减少错误
-    x = Math.floor(x);
-    y = Math.floor(y);
-    width = Math.floor(width);
-    height = Math.floor(height);
-    pixelRatio = Math.floor(pixelRatio ?? prevPixelRatio);
-    flipY = flipY ?? false;
-
-    const prevHelperVisible = this.helperVisible;
-    const prevModelAlpha = this.modelScene.parameter.modelAlpha;
-    this.helperVisible = helperVisible ?? this.helperVisible;
-
-    if (
-      skipPanorama &&
-      (
-        this.controller instanceof Controllers['Panorama'] ||
-        this.controller instanceof Controllers['VRPanorama'] ||
-        this.controller instanceof Controllers['XRPanorama']
-      )
-    ) {
-      if (skipPanorama === true) {
-        this.modelScene.parameter.set('modelAlpha', 1);
-      }
-    }
-    this.modelScene.update(this.renderer, this.camera);
-
-    // update camera / renderer
-    const renderTarget = this.getPixelsRenderTarget;
-    renderTarget.setSize(width * pixelRatio, height * pixelRatio);
-    this.renderer.setRenderTarget(renderTarget);
-    this.camera.pixelRatio = pixelRatio;
-    this.camera.resolution.set(width, height);
-    this.camera.setViewOffset(renderSize.width, renderSize.height, x, renderSize.height - y - height, width, height);
-    // 这里必须重置 aspect 不然和 threejs 内部的 setViewOffset 冲突。
-    this.camera.aspect = renderSize.width / renderSize.height;
-    this.camera.updateTime(currentTime);
-    this.scene.update(this.renderer, this.camera);
-
-    const prevAutoClear = this.renderer.autoClear;
-    const prevAutoClearColor = this.renderer.autoClearColor;
-    const prevAutoClearDepth = this.renderer.autoClearDepth;
-    const prevAutoClearStencil = this.renderer.autoClearStencil;
-    const prevClearColor = scratchClearColor.copy(this.renderer.getClearColor());
-    const prevClearAlpha = this.renderer.getClearAlpha();
-    const prevScissorTest = this.renderer.getScissorTest();
-
-
-    this.renderer.autoClear = true;
-    this.renderer.autoClearColor = true;
-    this.renderer.autoClearDepth = true;
-    this.renderer.autoClearStencil = true;
-    this.renderer.setScissorTest(false);
-
-    const background = this.scene.background;
-    this.scene.background = this.camera.isOrthographicCamera ? null : background;
-
-    this.renderer.render(this.scene, this.camera);
-
-    this.scene.background = background;
-
-    this.renderer.autoClear = prevAutoClear;
-    this.renderer.autoClearColor = prevAutoClearColor;
-    this.renderer.autoClearDepth = prevAutoClearDepth;
-    this.renderer.autoClearStencil = prevAutoClearStencil;
-    this.renderer.setClearColor(prevClearColor, prevClearAlpha);
-    this.renderer.setScissorTest(prevScissorTest);
-
-    this.helperVisible = prevHelperVisible;
-    if (prevModelAlpha === undefined) {
-      this.modelScene.parameter.reset('modelAlpha');
-    } else {
-      this.modelScene.parameter.set('modelAlpha', prevModelAlpha);
-    }
-
-    // reset camera and renderer
-    this.renderer.setRenderTarget(prevRenderTarget);
-    this.camera.clearViewOffset();
-    this.camera.pixelRatio = prevPixelRatio;
-    this.camera.resolution.copy(renderSize);
-    this.camera.aspect = this.camera.resolution.width / this.camera.resolution.height;
-    this.camera.updateTime(currentTime);
-
-    this.modelScene.update(this.renderer, this.camera);
-    this.scene.update(this.renderer, this.camera);
-
-    // output color
-    const pixelWidth = width * pixelRatio;
-    const pixelHeight = height * pixelRatio;
-    const pixelLength = pixelWidth * pixelHeight;
-    const byteLength = pixelLength * (4/* rgba */);
-
-    if (buffer) {
-      if (buffer.length !== byteLength) {
-        throw new Error(`buffer length is not equals pixels ${byteLength}`);
-      }
-    } else {
-      buffer = new Uint8Array(byteLength) as T;
-    }
-    this.renderer.readRenderTargetPixels(renderTarget, 0, 0, width * pixelRatio, height * pixelRatio, buffer);
-    if (flipY) {
-      const halfPixelLength = pixelLength / 2;
-      for (let temp: number = 0, index = 0, rgbaIndex = 0, targetIndex = 0; index < halfPixelLength; index++) {
-        targetIndex = (pixelHeight - Math.floor(index / pixelWidth) - 1) * pixelWidth + (index % pixelWidth);
-        for (rgbaIndex = 0; rgbaIndex < 4; rgbaIndex++) {
-          temp = buffer[index * 4 + rgbaIndex];
-          buffer[index * 4 + rgbaIndex] = buffer[targetIndex * 4 + rgbaIndex];
-          buffer[targetIndex * 4 + rgbaIndex] = temp;
-        }
-      }
-    }
-
-    return buffer;
-  }
-
-  /**
-   * 获取显示用的画布（Canvas DOM节点）
-   */
-  public getElement(): HTMLCanvasElement | undefined {
-    return this.renderer?.domElement;
-  }
-
-  /**
-   * 强制渲染
-   * @description
-   * 调用 `five.render()` 和设置 `five.needsRender = true` 均可在按需渲染时，使得画面渲染一次
-   * 区别在于：
-   * - `five.needsRender = true` 为在下帧渲染画面
-   * - `five.render()` 在当前帧渲染画面
-   * 推荐使用 `five.needsRender = true`, 可以更加流畅。但是如果需要截图等同步操作，可以使用 `five.render()`
-   *
-   * @param callback - 渲染完成回调
-   */
-  public render(callback?: () => void) {
-
-    const renderer = this.renderer;
-    if (!renderer) return;
-
-    const prevRenderTarget = renderer.getRenderTarget();
-
-    renderer.setRenderTarget(null); // 默认一定渲染到屏幕
-
-    const prevAutoClear = renderer.autoClear;
-    const prevAutoClearColor = renderer.autoClearColor;
-    const prevAutoClearDepth = renderer.autoClearDepth;
-    const prevAutoClearStencil = renderer.autoClearStencil;
-    const prevClearColor = scratchClearColor.copy(renderer.getClearColor());
-    const prevClearAlpha = renderer.getClearAlpha();
-    const prevViewport = renderer.getViewport(scratchViewport);
-    const prevScissor = renderer.getScissor(scratchScissor);
-    const prevScissorTest = renderer.getScissorTest();
-
-    renderer.autoClear = true;
-    renderer.autoClearColor = true;
-    renderer.autoClearDepth = true;
-    renderer.autoClearStencil = true;
-    const renderSize = renderer.getSize(scratchRenderSize);
-    const left = Math.floor(renderSize.x * this.viewport.left);
-    const bottom = Math.floor(renderSize.y * this.viewport.bottom);
-    const width = Math.floor(renderSize.x * this.viewport.width);
-    const height = Math.floor(renderSize.y * this.viewport.height);
-    renderer.setClearColor(this.backgroundColor, this.backgroundAlpha);
-    renderer.setViewport(left, bottom, width, height);
-    renderer.setScissor(left, bottom, width, height);
-
-    const needsScissor = this.viewport.bottom !== 0 || this.viewport.left !== 0 || this.viewport.width !== 1 || this.viewport.height !== 1;
-    // setScissorTest after setRenderTarget(null)
-    renderer.setScissorTest(needsScissor);
-
-    const background = this.scene.background;
-    this.scene.background = this.camera.isOrthographicCamera ? null : background;
-
-    let needFiveRender = true;
-    if (this.controller) {
-      const renderByController = this.controller.render();
-      if (renderByController) {
-        needFiveRender = false;
-      }
-    }
-    if (needFiveRender) {
-      const rendered = this.fiveRenderer.render(renderer, this.scene, this.modelScene, this.camera, this.needsRender);
-      if (this.poweredByRealsee && rendered) {
-        renderPoweredByRealsee(renderer);
-      }
-    }
-
-    this.scene.background = background;
-    renderer.autoClear = prevAutoClear;
-    renderer.autoClearColor = prevAutoClearColor;
-    renderer.autoClearDepth = prevAutoClearDepth;
-    renderer.autoClearStencil = prevAutoClearStencil;
-    renderer.setClearColor(prevClearColor, prevClearAlpha);
-    renderer.setViewport(prevViewport);
-    renderer.setScissor(prevScissor);
-    renderer.setScissorTest(prevScissorTest);
-    renderer.setRenderTarget(prevRenderTarget);
-
-    if (callback) AnimationFrameLoop.shared.add(callback, true);
-  }
-
-  public updateTime(time: number, deltaTime: number, ...args: any[]) {
-
-    this.currentUpdateArgs = { time, args };
-
-    // 如果被销毁了，那就不工作了
-    if (this.destroyed) return;
-
-    if (this.renderer) {
-      ktx2.detectSupport(this.renderer);
-    }
-
-    // ======= 同步状态 =======
-    // 同步状态 必须和 controller update 时计算 syncingState
-    this.syncingState = this.syncState(time, deltaTime);
-
-    // ======= 调用 controller 的 updateTime =====
-    if (this.controller) {
-      this.controller.updateTime(time, deltaTime, ...args);
-    }
-
-    // =======  更新相机 ========
-    if (this.renderer) {
-      this.camera.pixelRatio = this.renderer.getPixelRatio();
-      this.getSize(this.camera.resolution);
-      this.camera.aspect = this.camera.resolution.width / this.camera.resolution.height;
-    }
-
-    this.camera.controllerMode = this.currentMode;
-    this.camera.updateTime(time);
-
-    // ======= 更新模型 =============
-    if (this.renderer) {
-
-      const lastLoaded = this.modelScene.loaded;
-      const lastRefined = this.modelScene.refined;
-
-      this.modelScene.update(this.renderer, this.camera);
-
-      if (lastLoaded === false && this.modelScene.loaded === true) {
-        if (this.controller) {
-          this.controller.updateModel(this.modelScene);
-        }
-        // 延迟，保证模型状态
-        AnimationFrameLoop.shared.add(() => {
-          this.emit('models.load', createEvent<ModelSceneEvent>('models.load', {
-            modelScene: this.modelScene,
-          }));
-        }, true, 0, 10);
-      }
-      if (lastRefined === false && this.modelScene.refined === true) {
-        // 延迟，保证模型状态
-        AnimationFrameLoop.shared.add(() => {
-          this.emit('models.refined', createEvent<ModelSceneEvent>('models.refined', {
-            modelScene: this.modelScene,
-          }));
-        }, true, 0, 10);
-      }
-    }
-
-    if (this.camera.autoNearFar) {
-      scratchBox3.makeEmpty();
-      scratchBox3.expandByObject(this.modelScene.boundingMesh);
-      const shpere = scratchBox3.getBoundingSphere(scratchSphere);
-      let far = shpere.radius * 2;
-      if (!shpere.containsPoint(this.camera.position)) {
-        far = this.camera.position.distanceTo(shpere.center) + shpere.radius;
-      }
-      far = clamp(far, 800);
-
-      let near = far / 10000;
-      near = clamp(near, 0.03, 0.1);
-
-      let needsUpdate = false;
-      if (this.camera.near !== near) {
-        this.camera.near = near;
-        needsUpdate = true;
-      }
-      if (this.camera.far !== far) {
-        this.camera.far = far;
-        needsUpdate = true;
-      }
-      this.camera.updateTime(time);
-    }
-
-    // ====== 处理三维场景中的东西 =============
-    // 包括：收集视锥可见的模型，处理模型动画
-    if (this.renderer) {
-      const modelSceneVisible = this.modelScene.visible;
-      this.modelScene.visible = false;
-      this.scene.update(this.renderer, this.camera);
-      this.modelScene.visible = modelSceneVisible;
-    }
-
-    this.syncingState = false;
-    // ========== 同步状态 =======
-
-    if (this.controller) {
-      if (this.controller.needsRender === true) {
-        this.controller.needsRender = false;
-        this.needsRender = true;
-      }
-    }
-    if (this.camera.needsRender === true) {
-      this.camera.needsRender = false;
-      this.needsRender = true;
-    }
-
-    if (this.modelScene.needsRender === true) {
-      this.modelScene.needsRender = false;
-      this.needsRender = true;
-    }
-
-    if (this.scene.needsRender === true) {
-      this.scene.needsRender = false;
-      this.needsRender = true;
-    }
-
-    if (this.pbmGSRenderMesh) {
-      if (this.pbmGSRenderMesh.needsRender === true) {
-        this.pbmGSRenderMesh.needsRender = false;
-        this.needsRender = true;
-      }
-    }
-
-    if (this.onlyRenderIfNeeds !== true) {
-      this.needsRender = true;
-    }
-
-    // ====== 暂停 ========
-    if (this.paused === true) {
-      return
-    }
-
-    // ====== 开始渲染 =========
-
-    const renderEvent = createEvent<RenderEvent>('render.prepare', {
-      needsRender: this.needsRender,
-    });
-    this.emit("render.prepare", renderEvent);
-    if (renderEvent.defaultPrevented) {
-      this.needsRender = false;
-    }
-
-    const currentNeedsRender = this.needsRender;
-
-    this.render();
-
-    this.needsRender = false;
-
-    this.emit("render", createEvent<RenderEvent>('render', {
-      needsRender: currentNeedsRender,
-    }));
-
-    // 测试帧效率
-    if (this.hasListener('fps')) {
-      if (this.fps.testTime && time - this.fps.testTime < 1000) {
-        this.fps.testCount++;
-      } else {
-        this.emit("fps", this.fps.testCount);
-        this.fps.testTime = time;
-        this.fps.testCount = 0;
-      }
-    }
-
-  }
-
-  /**
-   * 暂停自动播放
-   */
-  public pause() {
-    this.paused = true;
-    if (this.renderer && this.renderer instanceof InternalWebGLRenderer) {
-      this.renderer.clear(true, true, true);
-    }
-  }
-
-  public play() {
-    this.needsRender = true;
-    this.paused = false;
-  }
-
-  /**
-   * 转化到 Panorama 模态，并移动到对应序号的观察点。
-   * @param pano - 观察点序号
-   * @param options - 移动点位参数
-   * @param userAction - 是否用户触犯
-   */
-  public moveToPano(pano: Pano | PanoId | number, options: MovePanoOptions = {}, userAction: boolean = true): Promise<void> {
-    const { controller, renderer } = this;
-    if (!controller) {
-      this.throwError(new Error("controller is not initialized."));
-      return Promise.resolve();
-    }
-    if (!renderer) {
-      this.throwError(new Error("renderer is not initialized."));
-      return Promise.resolve();
-    }
-    // 如果没有 workCode 用当前点位的 workCode
-    if (typeof pano === 'number' && this.pano.workCode) {
-      pano = {
-        workCode: this.pano.workCode,
-        panoIndex: pano,
-      };
-    }
-    const observer = this.works.getObserver(pano);
-    if (!observer) {
-      this.throwError(new Error(`pano ${JSON.stringify(pano)} not existed.`));
-      return Promise.resolve();
-    }
-    const nextPano: Pano = {
-      workCode: observer.work.workCode,
-      panoIndex: observer.panoIndex
-    };
-    if ('moveToPano' in controller && typeof controller.moveToPano === 'function') {
-      controller.moveToPano(nextPano, options, userAction);
-    } else {
-      if (observer) {
-        this.pano = nextPano;
-        this.once('initAnimation.start', event => {
-          if (options.moveStartCallback) {
-            options.moveStartCallback(event.state);
-          }
-        });
-        this.once('initAnimation.end', event => {
-          if (options.moveEndCallback) {
-            options.moveEndCallback(event.state);
-          }
-        });
-        this.changeMode(Five.Mode.Panorama, options, { effect: options.effect }, userAction);
-      }
-    }
-    return this.ready();
-  }
-
-  /**
-   * 预加载点位图片资源
-   * @param pano - 观察点序号
-   * @param callback - 加载完成回调, 并传递加载用时。
-   * @returns 加载完成的 Promise 参数同 callback
-   */
-  public preloadPano(pano: Pano | PanoId | number, callback: (costs: number) => void = noop): Promise<number> {
-
-    const observer = this.works.getObserver(pano);
-    if (!observer) {
-      return Promise.reject(new Error(`Pano ${JSON.stringify(pano)} never found`));
-    }
-    const types = ["right", "left", "up", "down", "front", "back"] as const;
-    const startTime = now();
-    return Promise.all(types.map(type => {
-      const panoId = panoStringify({
-        panoIndex: observer.panoIndex,
-        workCode: observer.work.workCode,
-      })
-      const options: ImageURLOptions = {
-        key: `pano.${panoId}.${type}`,
-        ...pick(this.imageOptions, ["size", "format", "quality", 'forceUseExifOrientation', "mappings"]),
-      };
-      const origin = observer.work.getURL(observer.images[type]);
-      const target = this.imageOptions.transform ? this.imageOptions.transform(origin, options) : imageURL(origin, options);
-      return getFetcher(this.fiveId, observer.work).preload(target);
-    })).then(() => {
-      const costs = now() - startTime;
-      callback(costs);
-      return costs;
-    });
-  }
-
-  /**
-   * 计算三维坐标对应到屏幕的二维坐标
-   * @description
-   * 如果三维坐标不在屏幕中，则返回 null
-   * @param vector - 三维坐标
-   * @param testModel - 是否计算模型遮挡
-   * @returns 二维坐标 或者 null
-   */
-  public project2d(vector: THREE.Vector3, testModel: boolean = false): THREE.Vector2 | null {
-    if (!this.renderer) return null;
-    if (testModel) {
-      const origin = this.camera.position;
-      const subVector = vector.clone().sub(origin);
-      const raycaster = new THREE.Raycaster(origin, subVector.clone().normalize());
-      raycaster.params.Points = { threshold: 0.1 };
-      const [intersect] = this.modelScene.intersectRaycaster(raycaster);
-      // 0.01 是因为模型碰撞的误差的 z fighting 的情况
-      if (intersect && intersect.distance + 0.01 < subVector.length()) return null;
-    }
-    const screen = vector.clone().project(this.camera);
-    if (Math.abs(screen.z) > 1) return null;
-    const size = this.renderer.getSize(new THREE.Vector2());
-    const width = size.x * this.viewport.width;
-    const height = size.y * this.viewport.height;
-    const left = size.x * this.viewport.left + (screen.x + 1) / 2 * width;
-    const top = (size.y * (1 - this.viewport.bottom - this.viewport.height)) + (- screen.y + 1) / 2 * height;
-    return new THREE.Vector2(left, top);
-  }
-
-  public getCurrentState(): State {
-    return {
-      ...this.camera.copyPose(),
-      mode: this.currentMode,
-      workCode: this.pano.workCode,
-      panoIndex: this.pano.panoIndex,
-    };
-  }
-
-  /**
-   * 设置 State
-   * @description
-   * ```text
-   * five 设置了以下状态
-   *
-   * - mode: Mode
-   * - panoIndex: number
-   * - longitude: number
-   * - latitude: number
-   * - distance: number
-   * - fov: number
-   * - offset: THREE.Vector3
-   *
-   * 可以通过 five.state 和 five.setState 来获取和设置。
-   * 通过 state 设置后，five 会通过合适的动画运动来达到设置的位置。
-   * 来迎合一些通过数据驱动的场景。
-   * ```
-   * @param state - 目标状态
-   * @param immediately - 是否马上转换，马上转换会尽快达到目标状态，尽量减少中间状态，更少动画。
-   * @param userAction - 是否是用户触发的动作
-   */
-  public setState(state: Partial<State>, immediately: boolean = false, userAction: boolean = true) {
-    // 兼容 state.offset 被转成了 object 的情况
-    state = pick( state, [
-      'mode',
-      'workCode',
-      'panoIndex',
-      'longitude',
-      'latitude',
-      'fov',
-      'offset',
-      'distance',
-    ]);
-    if (state.offset && !(state instanceof THREE.Vector3)) {
-      state.offset = new THREE.Vector3(state.offset.x, state.offset.y, state.offset.z);
-    }
-
-    let pano: Pano | undefined;
-
-    if (typeof state.panoIndex === 'number') {
-      if (state.workCode) {
-        pano = {
-          workCode: state.workCode,
-          panoIndex: state.panoIndex,
-        };
-      } else {
-        let workCode = this.work?.workCode ?? '';
-        const prevWorkCode = this.state.workCode;
-        if (this.works.filter(work => work.workCode === prevWorkCode).length > 0) {
-          workCode = prevWorkCode;
-        }
-        pano = {
-          workCode: workCode,
-          panoIndex: state.panoIndex,
-        };
-      }
-    }
-    const mode = state.mode ?? this.state.mode;
-
-    let longitude: number;
-    let latitude: number;
-    let fov: number;
-    let offset: THREE.Vector3;
-    let distance: number;
-
-    if (this.controller) {
-      this.controller.stopMomentumMovement();
-    }
-
-    // === 开始 ===
-    // 在切换模态时，这里的设计比较难受
-    // setState 必须在 controller 初始化（或者切换controller）之前就拿到新 controller 动画结束的 state，不然切换就不是想要的样子
-    // 这就比较难受了, 目前的想法时 Controller 类方法上 添加 initAnimationEndPose 来处理
-    if (this.state.mode !== mode) {
-
-      // 如果是VR眼镜模式。需要特殊处理
-      if (mode === "VRPanorama") {
-        this.changeMode("VRPanorama", undefined, undefined, true);
-        return;
-      }
-
-      // 这边 pose 的处理也是一样
-      // 因为 切换controller 并没有实际完成，saveControllerPose 是不会执行到的
-      // 所以也需要奇怪的判断
-      let initialState: Partial<State> = {
-        workCode: pano?.workCode,
-        panoIndex: pano?.panoIndex,
-      };
-      if (typeof state.longitude === "number") {
-        initialState.longitude = state.longitude;
-      }
-      if (typeof state.latitude === "number") {
-        initialState.latitude = state.latitude;
-      }
-      if (typeof state.fov === "number") {
-        initialState.fov = state.fov;
-      }
-      if (typeof state.distance === 'number') {
-        initialState.distance = state.distance;
-      }
-      if (state.offset instanceof THREE.Vector3) {
-        initialState.offset = state.offset;
-      }
-      const params: ControllerInitType = {
-        initial: {
-          state: initialState,
-          currentState: this.getCurrentState(),
-          duration: this.modeChangeDuration,
-          effect: 'fly',
-          userAction: false
-        },
-       ...this.commonParams(),
-       ...this.controllerInits[mode],
-      };
-      const initAnimationEndState = Controllers[mode].initAnimationEndState(params);
-      longitude = initAnimationEndState.longitude;
-      latitude = initAnimationEndState.latitude;
-      fov = initAnimationEndState.fov;
-      offset = initAnimationEndState.offset;
-      distance = initAnimationEndState.distance;
-    } else {
-      longitude = state.longitude ?? this.state.longitude;
-      latitude = state.latitude ?? this.state.latitude;
-      fov = state.fov ?? this.state.fov;
-      offset = state.offset ?? this.state.offset;
-      distance = state.distance ?? this.state.distance;
-    }
-
-    // === 结束 ===
-
-    const nextState: State = {
-      workCode: (pano ?? this.pano).workCode,
-      panoIndex: (pano ?? this.pano).panoIndex,
-      mode,
-      longitude,
-      latitude,
-      fov,
-      offset,
-      distance
-    };
-    this.emit("state.set", createEvent<StateEvent>('state.set', {
-      userAction,
-      state: nextState,
-    }));
-
-    if (!stateEqual(this.state, nextState)) {
-      if (this.controller && nextState.mode === "VRPanorama" && nextState.mode !== this.state.mode) {
-        assignState(this.state, nextState);
-        this.changeMode("VRPanorama");
-      } else if (this.controller && nextState.mode === "XRPanorama" && nextState.mode !== this.state.mode) {
-        assignState(this.state, nextState);
-        this.changeMode("XRPanorama");
-      } else {
-        assignState(this.state, nextState);
-        // 既定认为 setState 行为一定是用户触发的
-        if (this.controller && userAction) {
-          this.controller.userAction = false;
-        }
-        if (immediately && this.state.mode === nextState.mode) {
-          this.syncingState = this.syncState(now(), 0, immediately);
-          if (this.syncingState) {
-            this.controller?.updateTime(now(), 0);
-            this.syncingState = false;
-          }
-        }
-        this.emit("state.change", createEvent<StateEvent>('state.change', {
-          userAction,
-          state: this.state,
-        }));
-        this.analysis?.state(this.works, this.state);
-      }
-    }
-  }
-
-  private syncState(time: number, deltaTime: number, immediately: boolean = false): boolean {
-    let lastStateSynced = this.stateSynced;
-    this.stateSynced = false;
-
-    if (!this.controller) {
-      return false;
-    }
-
-    // 同步模态
-    if (this.state.mode !== this.currentMode) {
-      const state: State = {
-        mode: this.state.mode,
-        workCode: this.state.workCode,
-        panoIndex: this.state.panoIndex,
-        longitude: this.state.longitude,
-        latitude: this.state.latitude,
-        fov: this.state.fov,
-        offset: this.state.offset,
-        distance: this.state.distance
-      }
-      this.changeMode(this.state.mode, state, this.modeChangeDuration, this.controller.userAction);
-      return true;
-    }
-
-    // 如果在动画中，则等待动画完成
-    if (!this.controller.isReady()) return false;
-
-    // 同步位置
-    if (this.controller instanceof Controllers["Model"]) {
-      // 如果是 Model 模式，同步坐标
-      if (notSimilarVector3(this.camera.pose.offset,this.state.offset)) {
-        const pose: Partial<Pose> = {
-          longitude: this.state.longitude,
-          latitude: this.state.latitude,
-          fov: this.state.fov,
-          offset: this.state.offset,
-        };
-        this.controller.moveToPosition(this.state.offset, {
-          ...pose,
-          duration: immediately ? 0 : undefined,
-        }, false);
-        return true;
-      }
-    } else {
-      // 如果是 其他模式，同步点位
-      const statePano: Pano = {
-        workCode: this.state.workCode,
-        panoIndex: this.state.panoIndex,
-      };
-      if (!panoEqual(statePano, this.pano) && 'moveToPano' in this.controller && typeof this.controller.moveToPano === 'function') {
-        const pose: Pose = {
-          longitude: this.state.longitude,
-          latitude: this.state.latitude,
-          fov: this.state.fov,
-          offset: this.state.offset,
-          distance: this.state.distance,
-        };
-        this.controller.moveToPano(statePano, pose, false);
-        return true;
-      }
-    }
-
-    // 同步摄像机
-    if (
-      this.controller instanceof Controllers["Floorplan"] ||
-      this.controller instanceof Controllers["Topview"] ||
-      this.controller instanceof Controllers["Mapview"]
-    ) {
-      // 如果是 Topview 模式同步位置
-      const defaultFovStep = 1;
-      const defaultDistanceStep = 0.2;
-      const defaultOffsetStep = 0.2;
-      const defaultCoordinatesStep = Math.PI / 45;
-
-      const nextFov = immediately ?
-        this.state.fov :
-        stepNumber(this.camera.pose.fov, this.state.fov, defaultFovStep);
-
-      const deltaDistance = Math.abs(this.camera.pose.distance - this.state.distance);
-      const distanceStep = deltaDistance > defaultOffsetStep * 15 ? deltaDistance / 15 : defaultDistanceStep;
-      const nextDistance = immediately ?
-        this.state.distance :
-        stepNumber(this.camera.pose.distance, this.state.distance, distanceStep);
-
-      const deltaOffsetDistance = this.camera.pose.offset.distanceTo(this.state.offset);
-      const offsetDtep = deltaOffsetDistance > defaultOffsetStep * 15 ? deltaOffsetDistance / 15 : defaultOffsetStep;
-      const nextOffset = immediately ?
-        new THREE.Vector3().copy(this.state.offset) :
-        stepVector(this.camera.pose.offset, this.state.offset, offsetDtep);
-
-      const nextCoordinates = immediately ?
-        { longitude: this.state.longitude, latitude: this.state.latitude } :
-        stepCoordinates(
-          { longitude: this.camera.pose.longitude, latitude: this.camera.pose.latitude },
-          { longitude: this.state.longitude, latitude: this.state.latitude },
-          defaultCoordinatesStep,
-        );
-      const { longitude: nextLongitude, latitude: nextLatitude } = nextCoordinates;
-      if (
-        notSimilarValue(nextFov, this.camera.pose.fov) ||
-        notSimilarVector3(nextOffset, this.camera.pose.offset) ||
-        notSimilarValue(nextDistance, this.camera.pose.distance) ||
-        notSimilarValue(nextLongitude, this.camera.pose.longitude, Math.PI * 2) ||
-        notSimilarValue(nextLatitude, this.camera.pose.latitude)
-      ) {
-        const nextLocationMotionValue = { x: nextOffset.x, y: nextOffset.y, z: nextOffset.z }
-        const nextCameraMotionValue = { fov: nextFov }
-
-        Object.assign(nextLocationMotionValue, {
-          distance: nextDistance,
-        })
-        Object.assign(nextCameraMotionValue, {
-          longitude: nextLongitude,
-          latitude: nextLatitude,
-        })
-        this.controller.stopMomentumMovement();
-        this.controller.cameraMotion.set(nextCameraMotionValue, 0).catch(noop);
-        this.controller.locationMotion.set( nextLocationMotionValue, 0).catch(noop);
-        return true;
-      }
-    } else {
-      // 如果是 其他模式同步经纬度
-      const fovStep = 1;
-      const coordinatesStep = Math.PI / 45;
-      const nextFov = immediately ? this.state.fov : stepNumber(this.camera.pose.fov, this.state.fov, fovStep);
-      const { longitude: nextLongitude, latitude: nextLatitude } = immediately ?
-        { longitude: this.state.longitude, latitude: this.state.latitude } :
-        stepCoordinates(
-          { longitude: this.camera.pose.longitude, latitude: this.camera.pose.latitude },
-          { longitude: this.state.longitude, latitude: this.state.latitude },
-          coordinatesStep,
-        );
-      const nextDistance = this.state.distance;
-      const nextOffset = new THREE.Vector3().copy(this.state.offset);
-      if (notSimilarValue(nextDistance, this.camera.pose.distance)) {
-        this.state.distance = this.camera.pose.distance;
-      }
-      if (notSimilarVector3(nextOffset, this.camera.pose.offset)) {
-        this.state.offset = this.camera.pose.offset.clone();
-      }
-      if (
-        notSimilarValue(nextLongitude, this.camera.pose.longitude, Math.PI * 2) ||
-        notSimilarValue(nextLatitude, this.camera.pose.latitude) ||
-        notSimilarValue(nextFov, this.camera.pose.fov)
-      ) {
-        this.controller.stopMomentumMovement();
-        this.controller.cameraMotion.set({ longitude: nextLongitude, latitude: nextLatitude, fov: nextFov }, 0).catch(noop);
-        return true;
-      }
-    }
-    this.stateSynced = true;
-    if (lastStateSynced === false) {
-      this.emit("state.synced", createEvent<StateEvent>('state.synced', {
-        userAction: false,
-        state: this.state,
-      }));
-    }
-
-    if (this.readyCallbacks.length && this.stateSynced) {
-      const mode = this.currentMode;
-      const needsModelReady = mode === Five.Mode.Floorplan || mode === Five.Mode.Topview || mode === Five.Mode.Mapview || mode === Five.Mode.Model;
-      if (needsModelReady ? this.modelScene.loaded : true) {
-        const readyCallbacks = this.readyCallbacks.slice();
-        this.readyCallbacks.length = 0;
-        for (const callback of readyCallbacks) {
-          if (this.controller instanceof Controllers['Panorama']) {
-            if (callback.tile === true && !this.controller.isTileReady()) {
-              this.readyCallbacks.push(callback);
-            } else {
-              callback();
-            }
-          } else {
-            callback();
-          }
-        }
-      }
-    }
-    return false;
-  }
-
-  /**
-   * 当前页面静态
-   */
-  public ready(args: {tile?: boolean} = {}): Promise<void> {
-    return new Promise<void>(resolve => {
-      this.readyCallbacks.push(
-        Object.assign(resolve, { tile: args.tile ?? false })
-      );
-    })
-    .then(() => {
-      // 确保模型初始化完成
-      return this.model.initReady;
-    })
-    .then(noop);
-  }
-
-  /**
-   * 请求全屏
-   */
-  public requestFullscreen() {
-    if (!isMobile) return;
-    const parentNode = this.getElement()?.parentNode;
-    if (parentNode && "requestFullscreen" in parentNode && typeof document !== "undefined" && document.fullscreenElement === null) {
-      (parentNode as HTMLElement).requestFullscreen();
-    }
-  }
-
-  /**
-   * 退出全屏
-   */
-   public exitFullscreen() {
-    if (typeof document !== "undefined" && document.fullscreenElement && "exitFullscreen" in document) {
-      document.exitFullscreen();
-    }
-  }
-
-  private throwError(error: Error) {
-    if (this.hasListener("error")) {
-      this.emit("error", error);
-    } else {
-      console.error(error);
-    }
-  }
-
-  private bindModel(model: Model) {
-    const onModelLoad = () => {
-      AnimationFrameLoop.shared.add(() => {
-        this.emit('model.load', createEvent<ModelEvent>('model.load', { work: model.work, model, error: null }));
-      }, true);
-    };
-    const onModelError = (event: {error: Error}) => {
-      const { error } = event;
-      this.emit('model.error', createEvent<ModelEvent>('model.error', { work: model.work, model, error }));
-      this.throwError(error);
-    };
-    const onModelChangeShownFloor = () => {
-      this.emit('model.changeShownFloor', createEvent<ModelEvent>('model.changeShownFloor', { work: model.work, model, error: null }));
-    };
-    const onModelDispose = () => {
-      model.removeEventListener('load', onModelLoad);
-      model.removeEventListener('error', onModelError);
-      model.removeEventListener('changeShownFloor', onModelChangeShownFloor);
-      model.removeEventListener('dispose', onModelDispose);
-    }
-    model.addEventListener('load', onModelLoad);
-    model.addEventListener('error', onModelError);
-    model.addEventListener('changeShownFloor', onModelChangeShownFloor);
-    model.addEventListener('dispose', onModelDispose);
-
-    this.emit('model.request', createEvent<ModelEvent>('model.request', { work: model.work, model, error: null }));
-  }
-
-  private bindWorkFetcher(work: Work) {
-    const five = this;
-    const workCode = work.workCode;
-    const allowHosts = work.allowHosts;
-    const fetcher = new Fetcher({
-      get networkSubscribe() {
-        return five.networkSubscribe;
-      },
-      requestProxy(url) {
-        return Promise.resolve(url)
-          .then(url => five.requestProxy(url, workCode))
-          .then(url => {
-            const result = verifyURL(url, allowHosts);
-            if (result instanceof Error) {
-              return Promise.reject(result);
-            }
-            return result;
-          });
-      },
-    });
-    registerFetcher(this.fiveId, work, fetcher);
-  }
-
-  private commonParams(): Omit<BaseControllerInitType, "panoIndex" | "initial"> {
-    return {
-      fiveId: this.fiveId,
-      scene: this.scene,
-      xrCustomObjectsScene: this.xrCustomObjectsScene,
-      helper: this.helperGroup,
-      camera: this.camera,
-      renderer: this.renderer!,
-      viewport: this.viewport,
-      element: this.getElement()!,
-      works: this.works,
-      imageOptions: this.imageOptions,
-      enableWheel: this.enableWheel,
-      extraElements: this.extraElements,
-      videoTexture: this.videoTexture,
-      modelScene: this.modelScene,
-    };
-  }
-
-  private applyController<T extends Mode>(
-    mode: T,
-    initialParams: ControllerInitType<T>
-  ): ControllerInstanceType<T> {
-
-    if (!this.renderer) {
-      throw new Error("renderer is not initialized.");
-    }
-
-    const Controller = Controllers[mode] as ControllerType<T>;
-
-    this.currentMode = mode;
-
-    const controller = new Controller(initialParams);
-
-    // 透传出去事件
-    for (let name of PROXY_CONTROLLER_EVENT_NAMES) {
-      controller.on(name as any, (...args: any[]) => {
-        const canceled = this.emit(name as any, ...args);
-        if (canceled) return false;
-      });
-    }
-
-    // 如果 userAction 为 true, 则设置 state 为最终值
-    {
-      const nextState = Controllers[mode].initAnimationEndState(initialParams);
-      const userAction = initialParams.initial.userAction;
-      if (!stateEqual(this.state, nextState)) {
-        assignState(this.state, nextState);
-        this.emit("state.change", createEvent<StateEvent>('state.change', {
-          userAction,
-          state: this.state,
-        }));
-      }
-      this.emit("currentState.change", createEvent<StateEvent>('currentState.change', {
-        userAction,
-        state: this.getCurrentState(),
-      }));
-    }
-
-    controller.on("camera.update", event => {
-      if (this.controller) {
-        const nextState: State = this.controller.getTargetState();
-        if (
-          event.userAction &&
-          this.syncingState === false &&
-          this.state.mode === nextState.mode &&
-          !stateEqual(this.state, nextState)
-        ) {
-          assignState(this.state, nextState);
-          this.emit("state.change", createEvent<StateEvent>('state.change', {
-            userAction: event.userAction,
-            state: this.state,
-          }));
-          this.analysis?.state(this.works, this.state);
-        }
-      }
-      this.emit("currentState.change", createEvent<StateEvent>('currentState.change', {
-        userAction: event.userAction,
-        state: this.getCurrentState(),
-      }));
-    });
-
-    controller.on("initAnimation.start", event => {
-      const { state, userAction } = event;
-      if (userAction && this.state.mode === state.mode && !stateEqual(this.state, state)) {
-        assignState(this.state, state);
-        this.emit("state.change", createEvent<StateEvent>('state.change', {
-          userAction,
-          state: this.state,
-        }));
-        this.analysis?.state(this.works, this.state);
-      }
-    });
-
-    controller.on("initAnimation.end", event => {
-      const { state, userAction } = event;
-      this.pano = {
-        workCode: state.workCode,
-        panoIndex: state.panoIndex,
-      };
-      if (userAction && this.state.mode === state.mode && !stateEqual(this.state, state)) {
-        assignState(this.state, state);
-        this.emit("state.change", createEvent<StateEvent>('state.change', {
-          userAction,
-          state: this.state,
-        }));
-        this.analysis?.state(this.works, this.state);
-      }
-    });
-
-    controller.on("pano.moveTo", event => {
-      const { state, userAction } = event;
-      this.pano = {
-        workCode: state.workCode,
-        panoIndex: state.panoIndex,
-      };
-      if (userAction && this.state.mode === state.mode && !stateEqual(this.state, state)) {
-        assignState(this.state, state);
-        this.emit("state.change", createEvent<StateEvent>('state.change', {
-          userAction,
-          state: this.state,
-        }));
-        this.analysis?.state(this.works, this.state);
-      }
-    });
-
-    controller.on("pano.arrived", event => {
-      const { state, userAction } = event;
-      this.pano = {
-        workCode: state.workCode,
-        panoIndex: state.panoIndex,
-      };
-      if (userAction && this.state.mode === state.mode && !stateEqual(this.state, state)) {
-        assignState(this.state, state);
-        this.emit("state.change", createEvent<StateEvent>('state.change', {
-          userAction,
-          state: this.state,
-        }));
-        this.analysis?.state(this.works, this.state);
-      }
-    });
-
-    controller.on("pano.cancel", event => {
-      const { state, userAction } = event;
-      if (userAction && this.state.mode === state.mode && !stateEqual(this.state, state)) {
-        assignState(this.state, state);
-        this.emit("state.change", createEvent<StateEvent>('state.change', {
-          userAction,
-          state: this.state,
-        }));
-        this.analysis?.state(this.works, this.state);
-      }
-    });
-
-    controller.on("pano.moveTo", event => {
-      const { userAction } = event;
-      this.emit("currentState.change", createEvent<StateEvent>('currentState.change', {
-        userAction,
-        state: this.getCurrentState(),
-      }));
-    });
-
-    controller.on("pano.request", event => {
-      this.emit('pano.request', event);
-      if (!event.defaultPrevented) {
-        this.moveToPano(event.state, event.options, event.userAction);
-      }
-    });
-
-    controller.on("vr.requestExit", () => {
-      if (this.currentMode !== Five.Mode.VRPanorama) return;
-      this.exitFullscreen();
-      this.changeMode(Five.Mode.Panorama);
-    });
-
-    controller.on("error", error => this.throwError(error));
-
-    return controller as ControllerInstanceType<T>;
-  }
-
-  /** 移除事件绑定 */
-  private removeEventListeners() {}
-
-  public get internalLightsEnabled(): boolean {
-    const internalLights = this.scene.children.find(child => child.name === 'internalLights');
-    if(!internalLights) {
-      return false
-    }else{
-      return internalLights.visible;
-    }
-  }
-
-  public set internalLightsEnabled(value: boolean) {
-    let internalLights = this.scene.children.find(child => child.name === 'internalLights');
-    if(internalLights) {
-      internalLights.visible = value;
-    }
-    internalLights = this.modelScene.children.find(child => child.name === 'internalLights')
-    if (internalLights) {
-      internalLights.visible = value;
-    }
-  }
-
-  //=========== deprecated ===============
-
-  /**
-   * @deprecated
-   * use Viewport instead.
-   */
-  public get scissor() {
-    return this.viewport;
-  }
-
-  /**
-   * @deprecated
-   * use setViewport instead.
-   */
-  public setScissor(scissor: Viewport) {
-    return this.setViewport(scissor);
-  }
-
-  /**
-   * @deprecated
-   * 获取当前相机姿态, 可以使用 getCurrentState 代替
-   */
-  public getPose(): Pose {
-    const { longitude, latitude, fov, offset, distance } = this.camera.copyPose();
-    return { longitude, latitude, fov, offset: offset.clone(), distance };
-  }
-
-  /**
-   * 获取当前相机经纬度
-   * @deprecated 请使用使用 getPose
-   */
-  public getLongitudeAndLatitude(): Pick<Pose, "longitude" | "latitude"> {
-    const { longitude, latitude } = this.getPose();
-    return { longitude, latitude };
-  }
-
-  /**
-   * 获取当前相机位置
-   * @deprecated 请使用使用 getPose
-   */
-  public getOffset(): Pose["offset"] {
-    return this.getPose().offset;
-  }
-
-  /**
-   * 获取当前相机的姿态（用于内部的 python 脚本截图）
-   * @deprecated 这是用于内部的 python 脚本截图
-   */
-  public getCameraLocal() {
-    if (this.pano.workCode && this.controller && this.works) {
-      const observer = this.works.getObserver(this.pano);
-      if (observer) {
-        const object = new THREE.Object3D();
-        object.matrix.copy(observer.matrix).premultiply(observer.work.transform);
-        object.matrix.decompose(object.position, object.quaternion, object.scale);
-        object.matrixAutoUpdate = false;
-
-        const lookAtVector = new THREE.Vector3(0, 0, -1);
-        lookAtVector.applyQuaternion(this.camera.quaternion);
-
-        const quaternion = object.quaternion.clone().inverse();
-        lookAtVector.applyQuaternion(quaternion);
-
-        const theta = Math.atan2(lookAtVector.x, - lookAtVector.z);
-        const phi = - Math.asin(lookAtVector.y);
-
-        return { theta, phi, lookAtVector };
-      }
-    }
-    return null;
-  }
-
-
-  /**
-   * 增加后处理PASS
-   * @param pass - 要添加的Pass实例
-   */
-
-  public addPass(pass: Pass) {
-    this.fiveRenderer.composer.addPass(pass);
-  }
-
-  /**
-   * 移除后处理Pass
-   * @param pass - 要移除的Pass实例
-   */
-  public removePass(pass: Pass) {
-    const index = this.fiveRenderer.composer.passes.indexOf(pass);
-    if (index !== -1) {
-      this.fiveRenderer.composer.passes.splice(index, 1);
-    }
-  }
-
-  /**
-   * 在指定位置插入后处理Pass
-   * @param pass - 要插入的Pass实例
-   * @param index - 插入位置的索引
-   */
-  public insertPass(pass: Pass, index: number) {
-    this.fiveRenderer.composer.insertPass(pass, index);
-  }
-
-  /**
-   * 设置渲染模式
-   */
-  public get renderMode() {
-    return this.fiveRenderer.renderMode;
-  }
-  public set renderMode(value) {
-    this.fiveRenderer.renderMode = value;
-  }
-
-  /** 开启 HQ */
-  public get enableHQ(): boolean  {
-    return this.fiveRenderer.renderMode === 'point-cloud-high-quality';
-  }
-  public set enableHQ(enable: boolean) {
-    this.fiveRenderer.renderMode = enable ? 'point-cloud-high-quality' : 'default';
-    this.needsRender = true;
-  }
-
-  /** 开启 edl */
-  public get enableEDL(): boolean  {
-    return this.eyeDomeLightingPass.enabled;
-  }
-  public set enableEDL(enable: boolean) {
-    this.eyeDomeLightingPass.enabled = enable;
-    this.needsRender = true;
-  }
-
-  /** 开启 AdaptiveLuminance */
-  public get enableAdaptiveLuminance(): boolean  {
-    return this.adaptiveLuminancePass.enabled;
-  }
-  public set enableAdaptiveLuminance(enable: boolean) {
-    this.adaptiveLuminancePass.enabled = enable;
-    this.needsRender = true;
-  }
-
-  /**
-   * @deprecated
-   * 不可用
-   */
-  public get enableIOSEDR(): boolean  {
-    return false;
-  }
-  public set enableIOSEDR(enable: boolean) {
-  }
-
-  /**
-   * @deprecated
-   * 不可用
-   */
-  public get enablePostProcessing(): boolean {
-    return true;
-  }
-  public set enablePostProcessing(enable: boolean) {
-  }
-
-  /**
-   * @deprecated
-   * use five.modelScene.needsRender instead
-   */
-  public get modelSceneNeedsRender(): boolean {
-    return this.modelScene.needsRender;
-  }
-  public set modelSceneNeedsRender(needsRender: boolean) {
-    this.modelScene.needsRender = needsRender;
-  }
-
-}
-
-if (typeof window !== "undefined") {
-  const __FIVE_DEBUG__: {
-    THREE: typeof THREE,
-    constructor: typeof Five;
-    instances: Record<string, Five>;
-  } = {
-    THREE,
-    constructor: Five,
-    instances: Five_Instances,
-  };
-  Object.assign(window, { __FIVE_DEBUG__ });
-}
-
-export { Five, FiveInitArgs };