@aibee/owlly 1.0.25

package/src/owlly/controller/tile-panorama-controller.ts

@@ -0,0 +1,1633 @@
+import TWEEN from '@tweenjs/tween.js';
+import { Externals, NS_THREE } from '../stage/externals';
+import {
+  Controller, Events, FloorModel, View,
+} from '..';
+import { TilePlane } from '../element/tile-plane';
+import { TextureController, TextureEventEnum } from './texture-controller';
+import { TileUtil, TileTextureInfo } from '../utils/tile-util';
+import { TilePanorama } from '../element/tile-panorama';
+import { TilePanoramaGroup } from '../element/tile-panorama-group';
+import { BasicController } from './basic-controller';
+import { CubeTextureCache } from '../utils/cube-texture-cache';
+import { TextureCache } from '../utils/texture-cache';
+import { PanoramaModelUtil } from '../utils/panorama-model-util';
+import { OwllyEvents } from '../utils/events';
+
+class TilePanoramaController extends Controller {
+  static __instance: TilePanoramaController;
+
+  private container: HTMLElement;
+
+  private view: View;
+
+  private panoramaGroups: TilePanoramaGroup[];
+
+  private pid2GroupMap: Map<number, TilePanoramaGroup>;
+
+  private curPanoramaGroup: TilePanoramaGroup;
+
+  private basicController: BasicController;
+
+  private modelMaterial: NS_THREE.ShaderMaterial;
+
+  private instantTranslationMaterial: NS_THREE.ShaderMaterial;
+
+  private planeMap: Map<number, TilePlane>;
+
+  private levelMap: Map<number, number>;
+
+  private planeNeedUpdate: boolean;
+
+  private planeWillUpdate: boolean;
+
+  private handlePanoramaUpdate: Function;
+
+  private handlePanoramaLevel: Function;
+
+  private mouseDrag: boolean;
+
+  private showModel: boolean;
+
+  private curPanorama: TilePanorama;
+
+  private initialized: boolean;
+
+  private panoramaGroupChanged: boolean;
+
+  private isAnimating: boolean;
+
+  private translatePromise: Promise<unknown> | undefined;
+
+  private cancelAnimation: boolean;
+
+  private static DirectionVectorScalar = -0.0001;
+
+  private renderFrame: boolean | undefined;
+
+  private raycaster: NS_THREE.Raycaster;
+
+  private onScreenDetectRadius: number;
+
+  /** 移动点击 */
+  public moveOnClick: boolean;
+
+  private captureMove: boolean;
+
+  private levels: number[] = [1, 1.5, 3];
+
+  private enabled: boolean;
+
+  /** 最大等级控制 */
+  public levelMax = 2;
+
+  private touches: {
+    c: [NS_THREE.Vector2, NS_THREE.Vector2];
+    s: [NS_THREE.Vector2, NS_THREE.Vector2];
+    state: 'down' | 'move' | 'idle' | 'zoom';
+    dist: number;
+    fov: number;
+  }
+
+  private eventListeners: {
+    onTextureUpdate: (updates: TileTextureInfo[], deletes: TileTextureInfo[]) => void;
+    onMouseDown: (e: MouseEvent) => void;
+    onMouseMove: (e: MouseEvent) => void;
+    onMouseUp: (e: MouseEvent) => void;
+    onMouseWheel: (e: WheelEvent) => void;
+    // onContextMenu: (e: MouseEvent) => void;
+    onTouchStart: (e: TouchEvent) => void;
+    onTouchMove: (e: TouchEvent) => void;
+    onTouchEnd: (e: TouchEvent) => void;
+  }
+
+  /**
+   * 构造
+   * @param view 视图
+   * @param panoramaGroup 全景组
+   * @param basicController 基础控制器
+   * @param showModel 是否显示模型
+   */
+  constructor(
+    view?: View,
+    panoramaGroup?: TilePanoramaGroup | TilePanoramaGroup[],
+    basicController?: BasicController,
+    showModel?: boolean,
+  ) {
+    super();
+    const { THREE } = Externals.getInstance();
+    this.planeMap = new Map<number, TilePlane>();
+    this.showModel = showModel === undefined || showModel;
+    this.levelMap = new Map<number, number>();
+    this.isAnimating = false;
+    this.touches = {
+      s: [new THREE.Vector2(), new THREE.Vector2()],
+      c: [new THREE.Vector2(), new THREE.Vector2()],
+      state: 'idle',
+      dist: 0,
+      fov: 60,
+    };
+    if (panoramaGroup) {
+      if (panoramaGroup instanceof TilePanoramaGroup) {
+        this.panoramaGroups = [panoramaGroup];
+      } else {
+        this.panoramaGroups = panoramaGroup;
+      }
+      if (this.panoramaGroups.length > 0) {
+        this.curPanoramaGroup = this.panoramaGroups[0];
+      }
+    }
+    if (basicController) {
+      this.basicController = basicController;
+    }
+    this.pid2GroupMap = new Map();
+
+    this.eventListeners = {
+      onTextureUpdate: (updates: TileTextureInfo[], deletes: TileTextureInfo[]): void => {
+        this.updatePanoramaTextureInfos(updates, deletes);
+      },
+      onMouseDown: (e): void => { this.onMouseDown(e); },
+      onMouseMove: (e): void => { this.onMouseMove(e); },
+      onMouseUp: (e): void => { this.onMouseUp(e); },
+      onMouseWheel: (e): void => { this.onMouseWheel(e); },
+      onTouchStart: (e): void => { this.onTouchStart(e); },
+      onTouchMove: (e): void => { this.onTouchMove(e); },
+      onTouchEnd: (e): void => { this.onTouchEnd(e); },
+      // onContextMenu: (e): void => { this.onContextMenu(e); },
+    };
+    if (view) {
+      this.bindView(view);
+    }
+    this.raycaster = new THREE.Raycaster();
+    this.onScreenDetectRadius = 1000;
+    this.moveOnClick = true;
+
+    this.handlePanoramaUpdate = TileUtil.throttle((tview: View) => { this.updatePlaneInCamera(tview); }, 100);
+    this.handlePanoramaLevel = TileUtil.throttle(() => { this.updateLevel(); }, 200);
+    TextureController.instance.on(TextureEventEnum.TEXTURE_UPDATE, this.eventListeners.onTextureUpdate);
+    const modelVisible = (undefined === showModel ? this.showModel : showModel === true);
+    this.panoramaGroups.forEach((panoGroup) => {
+      const modelMesh = TilePanoramaController.getModelMesh(panoGroup);
+      this.setModelAppearance(panoGroup.modelElement!, modelVisible, undefined, modelMesh);
+    });
+  }
+
+  /**
+   * 设置是否激活可用
+   * @param enabled 是否激活
+   */
+  public setEnabled(enabled: boolean): void {
+    if (enabled === this.enabled) return;
+    this.enabled = enabled;
+    if (enabled) {
+      this.registerEvents();
+    } else {
+      this.unregisterEvents();
+    }
+  }
+
+  private registerEvents(): void {
+    if (!this.view) return;
+    this.view.on(OwllyEvents.MOUSE_DOWN, this.eventListeners.onMouseDown);
+    this.view.on(OwllyEvents.MOUSE_MOVE, this.eventListeners.onMouseMove);
+    this.view.on(OwllyEvents.MOUSE_UP, this.eventListeners.onMouseUp);
+    this.view.on(OwllyEvents.MOUSE_WHEEL, this.eventListeners.onMouseWheel);
+    this.view.on(OwllyEvents.TOUCH_START, this.eventListeners.onTouchStart);
+    this.view.on(OwllyEvents.TOUCH_MOVE, this.eventListeners.onTouchMove);
+    this.view.on(OwllyEvents.TOUCH_END, this.eventListeners.onTouchEnd);
+  }
+
+  private unregisterEvents(): void {
+    if (!this.view) return;
+    this.view.off(OwllyEvents.MOUSE_DOWN, this.eventListeners.onMouseDown);
+    this.view.off(OwllyEvents.MOUSE_MOVE, this.eventListeners.onMouseMove);
+    this.view.off(OwllyEvents.MOUSE_UP, this.eventListeners.onMouseUp);
+    this.view.off(OwllyEvents.MOUSE_WHEEL, this.eventListeners.onMouseWheel);
+    this.view.off(OwllyEvents.TOUCH_START, this.eventListeners.onTouchStart);
+    this.view.off(OwllyEvents.TOUCH_MOVE, this.eventListeners.onTouchMove);
+    this.view.off(OwllyEvents.TOUCH_END, this.eventListeners.onTouchEnd);
+  }
+
+  private onMouseDown(event: MouseEvent): void {
+    const { THREE } = Externals.getInstance();
+    // this.mouseMovement = new THREE.Vector2(event.movementX, event.movementY).length();
+    this.touches.s[0] = new THREE.Vector2(event.clientX, event.clientY);
+    this.touches.state = 'down';
+  }
+
+  private onMouseMove(event: MouseEvent): void {
+    // this.mouseMovement += new THREE.Vector2(event.movementX, event.movementY).length();
+    const { THREE } = Externals.getInstance();
+    this.touches.c[0] = new THREE.Vector2(event.clientX, event.clientY);
+    if (this.touches.state === 'down' && this.touches.c[0].distanceToSquared(this.touches.s[0]) > 100) {
+      this.touches.state = 'move';
+    }
+    if (this.raycaster && this.captureMove) {
+      const { clientWidth, clientHeight } = this.view.container;
+      const { left: rectX, top: rectY } = this.view.container.getBoundingClientRect();
+      const x = event.clientX - rectX;
+      const y = event.clientY - rectY;
+      this.raycaster.setFromCamera({ x, y }, (this.view.camera as NS_THREE.Camera));
+      if (this.curPanoramaGroup) {
+        let toPID: number;
+        if (this.onScreenDetectRadius > 0 && this.view.camera) {
+          toPID = this.curPanoramaGroup.intersectIndicatorsOnScreen(
+            new THREE.Vector2(x, y),
+            this.onScreenDetectRadius,
+            { screenWidth: clientWidth, screenHeight: clientHeight },
+            this.view.camera,
+          );
+        } else {
+          toPID = this.curPanoramaGroup.intersectIndicators(
+            this.raycaster.ray.origin,
+            this.raycaster.ray.direction,
+          );
+        }
+        if (toPID > -1) {
+          this.emit(
+            Events.PANORAMA_HOVER,
+            toPID,
+            this.curPanoramaGroup.getIndicatorPosition(toPID),
+          );
+        }
+      }
+    }
+    if (this.touches.state === 'move') {
+      this.onMouseDrag();
+    }
+  }
+
+  private async onMouseUp(event: MouseEvent): Promise<void> {
+    const { THREE } = Externals.getInstance();
+    if (this.touches.state === 'down') {
+      const { clientWidth, clientHeight } = this.view.container;
+      const { left: rectX, top: rectY } = this.view.container.getBoundingClientRect();
+      const x = event.clientX - rectX;
+      const y = event.clientY - rectY;
+      if (this.raycaster) {
+        this.raycaster.setFromCamera({ x, y }, (this.view.camera as NS_THREE.Camera));
+        if (this.onScreenDetectRadius && this.curPanoramaGroup) {
+          let toPID: number;
+          if (this.view.camera) {
+            toPID = this.curPanoramaGroup.intersectIndicatorsOnScreen(
+              new THREE.Vector2(x, y),
+              this.onScreenDetectRadius,
+              { screenWidth: clientWidth, screenHeight: clientHeight },
+              this.view.camera,
+            );
+          } else {
+            toPID = this.curPanoramaGroup.intersectIndicators(
+              this.raycaster.ray.origin,
+              this.raycaster.ray.direction,
+            );
+          }
+          if (toPID !== -1) {
+            this.emit(Events.CLICK_PANORAMA, toPID, event);
+            // this.moveToPanorama(toPID, { interval: 2000, toDirection: new THREE.Vector3(-0.8, 0.6, 0.0) });
+            if (event.button === 0 && this.moveOnClick && this.curPanoramaGroup.currentPanoramaID !== toPID) {
+              await this.moveToPanorama(toPID, { interval: 1000, fadeInOut: false });
+            }
+          }
+        }
+      }
+    }
+    this.touches.state = 'idle';
+  }
+
+  private onMouseWheel(event: WheelEvent): void {
+    event.preventDefault();
+    this.handlePanoramaLevel();
+    // this.handleMouseWheel(e);
+  }
+
+  private onTouchStart(event: TouchEvent): void {
+    // e.preventDefault();
+    const { THREE } = Externals.getInstance();
+    const l = event.touches.length;
+    const tl = event.targetTouches.length;
+    for (let i = 0; i < Math.min(l, 2); i++) {
+      const t = event.touches[i];
+      this.touches.s[i] = new THREE.Vector2(t.clientX, t.clientY);
+    }
+    this.touches.state = 'down';
+    if (tl > 1 && this.view.camera instanceof THREE.PerspectiveCamera) {
+      this.touches.state = 'zoom';
+      this.touches.dist = this.touches.s[0].distanceTo(this.touches.s[1]);
+      this.touches.fov = this.view.camera.fov;
+    }
+  }
+
+  private onTouchMove(event: TouchEvent): void {
+    const { THREE } = Externals.getInstance();
+    if (!this.view.camera || !(this.view.camera instanceof THREE.PerspectiveCamera)) return;
+    if (this.touches.state === 'idle') return;
+    event.preventDefault();
+    event.stopPropagation();
+    const l = event.touches.length;
+    for (let i = 0; i < Math.min(l, 2); i++) {
+      const t = event.touches[i];
+      this.touches.c[i] = new THREE.Vector2(t.clientX, t.clientY);
+    }
+    if (this.touches.state === 'down' && this.touches.c[0].distanceToSquared(this.touches.s[0]) > 100) {
+      this.touches.state = 'move';
+    } else if (this.touches.state === 'zoom') {
+      this.handlePanoramaLevel();
+    }
+    if (this.touches.state === 'move') {
+      this.onMouseDrag();
+    }
+  }
+
+  private async onTouchEnd(event: TouchEvent): Promise<void> {
+    if (this.touches.state === 'idle') return;
+    const { THREE } = Externals.getInstance();
+    if (this.touches.state === 'down' && this.view.renderer) {
+      const touchPoint = new THREE.Vector2(this.touches.s[0].x, this.touches.s[0].y);
+      const { clientWidth, clientHeight } = this.view.container;
+      const { left: rectX, top: rectY } = this.view.container.getBoundingClientRect();
+      const x = touchPoint.x - rectX;
+      const y = touchPoint.y - rectY;
+      this.raycaster.setFromCamera({ x, y }, (this.view.camera as NS_THREE.Camera));
+      if (this.curPanoramaGroup) {
+        let toPID: number;
+        if (this.onScreenDetectRadius > 0 && this.view.camera) {
+          toPID = this.curPanoramaGroup.intersectIndicatorsOnScreen(
+            new THREE.Vector2(x, y),
+            this.onScreenDetectRadius,
+            { screenWidth: clientWidth, screenHeight: clientHeight },
+            this.view.camera,
+          );
+        } else {
+          toPID = this.curPanoramaGroup.intersectIndicators(
+            this.raycaster.ray.origin,
+            this.raycaster.ray.direction,
+          );
+        }
+        if (toPID !== -1) {
+          this.emit(Events.CLICK_PANORAMA, toPID, event);
+          if (this.moveOnClick && this.curPanoramaGroup.currentPanoramaID !== toPID) {
+            await this.moveToPanorama(toPID, { interval: 1000, showModel: true, fadeInOut: false });
+          }
+        }
+      }
+    }
+    this.touches.state = 'idle';
+  }
+
+  public setLevels(levels: number[]): void {
+    this.levels = levels;
+  }
+
+  public updateLevel(): void {
+    if (!this.curPanorama) {
+      return;
+    }
+    const { THREE } = Externals.getInstance();
+    const view = this.view;
+    if (view.camera) {
+      const { levels, levelMax } = this;
+      const { y } = new THREE.Vector3().setFromMatrixScale(view.camera.projectionMatrix);
+      let level = 0;
+      let change = false;
+      for (let i = 0; i < levels.length; i++) {
+        if (y < levels[i]) {
+          level = i;
+          change = true;
+          break;
+        }
+      }
+      if (!change) {
+        level = levels.length;
+      }
+      if (level > levelMax) {
+        level = levelMax;
+      }
+      const pLevelMax = this.curPanorama.levelMax;
+      if (level > pLevelMax) {
+        level = pLevelMax;
+      }
+      // console.log('level', level, 'y', y);
+      this.curPanorama.updateLevel(level);
+      this.planeNeedUpdate = true;
+    }
+  }
+
+  /**
+   * 更新最大等级
+   * @param levelMax 最大等级
+   */
+  public updateLevelMax(levelMax: number): void{
+    if (levelMax === this.levelMax) return;
+    this.levelMax = levelMax;
+    for (let i = 0; i < this.panoramaGroups.length; i++) {
+      const panoramaGroup = this.panoramaGroups[i];
+      // eslint-disable-next-line no-await-in-loop
+      panoramaGroup.updateLevelMax(levelMax);
+    }
+  }
+
+  private onMouseDrag(): void {
+    this.planeNeedUpdate = true;
+  }
+
+  /**
+   * 绑定视图
+   * @param view
+   */
+  public bindView(view: View): void {
+    this.view = view;
+    this.container = view.container;
+    this.setEnabled(true);
+  }
+
+  // public async bindPanorama(panorama: TilePanorama): Promise<void> {
+  //   this.initialized = false;
+  //   this.emit(Events.WILL_LOAD_PANORAMA, panorama.pid);
+  //   const lastPanorama = this.curPanorama;
+  //   this.curPanorama = panorama;
+  //   await this.initTextures(panorama);
+  //   this.updateLevel();
+  //   this.initialized = true;
+  //   this.planeNeedUpdate = true;
+  //   this.emit(Events.DID_LOAD_PANORAMA, panorama.pid);
+  //   this.diposeInfos(lastPanorama);
+  // }
+
+  // public async initTextures(panorama: TilePanorama): Promise<void> {
+  //   const textureUrls = panorama.textureURLs;
+  //   const needInits = [] as TileTextureInfo[];
+  //   panorama.tilePlanes.forEach((plane, index) => {
+  //     const rootUrl = textureUrls[index];
+  //     const info = new TileTextureInfo(plane.pfid, 0, 0, 0, rootUrl);
+  //     info.frize = true;
+  //     needInits.push(info);
+  //   });
+  //   await TextureController.instance.initTextures(needInits);
+  // }
+
+  /**
+   * 从全景点看
+   * @param pid 全景点id
+   * @param lookDirection 看的方向 v3
+   * @param showModel 是否显示模型
+   * @param preInitPanoramasStrategy 初始化全景策略
+   */
+  public async lookFromPanorama(pid: number,
+    lookDirection?: NS_THREE.Vector3,
+    showModel?: boolean,
+    preInitPanoramasStrategy?: 'all' | number | number[]): Promise<void> {
+    const pano = await this.showPanorama(pid, { lookDirection, showModel, preInitPanoramasStrategy });
+    if (pano) {
+      this.emit(Events.MOVE_TO_PANORAMA, pid, pano ? pano.position : null, this.panoramaGroupChanged);
+    }
+    this.panoramaGroupChanged = false;
+    // const pano = await this.showPanorama(pid, { lookDirection, showModel, preInitPanoramasStrategy });
+  }
+
+  /**
+   * 仅显示指定全景图，但不操作摄像机
+   * @param pid 全景点PID
+   * @parama showModel 可选，是否一开始就显示模型
+   * @param preInitPanoramasStrategy 可选，预创建全景对象的顺序策略，详见[PanoramaGroup]的【initializePanoramasIfNecessary]方法说明
+   */
+  public async showPanorama(pid: number,
+    options?: {
+      lookDirection?: NS_THREE.Vector3;
+      target?: NS_THREE.Vector3;
+      showModel?: boolean;
+      preInitPanoramasStrategy?: 'all' | number | number[];
+    }): Promise<TilePanorama | undefined> {
+    const {
+      lookDirection, target, showModel, preInitPanoramasStrategy,
+    } = options || {};
+    // const lastPanorama = this.curPanorama;
+    const { pano, panoramaGroup } = this.getPanoramaOfPID(pid);
+    if (panoramaGroup) {
+      if (this.curPanoramaGroup !== panoramaGroup) this.panoramaGroupChanged = true;
+
+      this.curPanoramaGroup = panoramaGroup;
+      if (panoramaGroup.modelElement) {
+        this.setModelAppearance(panoramaGroup.modelElement, false, undefined);
+      }
+      if (preInitPanoramasStrategy) {
+        panoramaGroup.initializePanoramasIfNecessary(preInitPanoramasStrategy);
+      }
+      panoramaGroup.panoramaIDsAround(pid);
+
+      panoramaGroup.presentPanoramaIndicatorsAround(pid, this.view);
+      if (pano) {
+        if (lookDirection) {
+          this.setCameraLookAt(pano.position, lookDirection);
+        } else if (target) {
+          this.setCameraLookAt(pano.position, target.clone().sub(pano.position));
+        }
+        // pano.updateLevel(0);
+        this.emit(Events.WILL_LOAD_PANORAMA, pano.pid);
+        if (this.curPanorama) {
+          this.panoramaUnmount(this.curPanorama);
+        }
+        this.curPanorama = pano;
+        this.panoramaMount(this.curPanorama);
+        const res = await panoramaGroup.presentPanoramaAround(pid, this.view);
+        if (!res) {
+          return undefined;
+        }
+        this.updateLevel();
+
+        if (undefined === showModel || showModel === true) {
+          const material = this.getModelMaterial();
+          const uniforms = material.uniforms as { [uniform: string]: NS_THREE.IUniform };
+          uniforms.pano0Matrix.value = pano.matrix;
+          uniforms.pano0Position.value = pano.position;
+          uniforms.pano1Matrix.value = pano.matrix;
+          uniforms.pano1Position.value = pano.position;
+          uniforms.weight0.value = 1.0;
+          uniforms.weight1.value = 0.0;
+
+          const texture = TextureController.instance.getCubeTextureByPid(pano.pid);
+          [uniforms.pano0Map.value, uniforms.pano1Map.value] = [texture, texture];
+          this.setModelAppearance(panoramaGroup.modelElement!, true, material);
+        }
+      }
+      return pano;
+    }
+    return undefined;
+  }
+
+  /**
+   * 设置摄像机按指定视线方向看向目标位置
+   * @param target 目标位置
+   * @param sightDirection 可选，视线方向，不设置则默认以摄像机当前方向
+   */
+  public setCameraLookAt(target: NS_THREE.Vector3, sightDirection?: NS_THREE.Vector3): void {
+    let direction;
+    const { THREE } = Externals.getInstance();
+    if (sightDirection) {
+      direction = sightDirection.clone().normalize();
+    } else if (this.view.camera) {
+      direction = this.view.camera.getWorldDirection(new THREE.Vector3(0, 0, -1));
+    } else {
+      direction = new THREE.Vector3(1, 0, 0);
+    }
+    const p0 = direction
+      .multiplyScalar(TilePanoramaController.DirectionVectorScalar)
+      .add(target);
+    this.setCameraPose(p0, target);
+  }
+
+  private getPanoramaOfPID(pid: number): {
+    pano?: TilePanorama;
+    panoramaGroup?: TilePanoramaGroup;
+  } {
+    const panoGroup = this.pid2GroupMap.get(pid);
+    if (panoGroup) {
+      const pano = panoGroup.getPanoramaByPID(pid);
+      return { pano, panoramaGroup: panoGroup };
+    }
+    for (let i = 0; i < this.panoramaGroups.length; i++) {
+      const panoramaGroup = this.panoramaGroups[i];
+      // eslint-disable-next-line no-await-in-loop
+      const pano = panoramaGroup.getPanoramaByPID(pid);
+      if (pano) {
+        this.pid2GroupMap.set(pid, panoramaGroup);
+        return { pano, panoramaGroup };
+      }
+    }
+    return {};
+  }
+
+  /**
+   * @ignore
+   * @param capture
+   */
+  public setCaptureMove(capture: boolean): void {
+    this.captureMove = capture;
+  }
+
+  /**
+   * 移动到指定的全景点处
+   * @param toPID 目标全景点ID
+   * @param interval 可选，过渡所用时长
+   * @param easing 可选，插值函数
+   * @param fadeInOut 可选，是否使用淡出淡入变换
+   * @param toDirection 可选，到达目的点时要转到的视线方向，
+   *    若不设置则默认以从起始点到目的点的连线为最终视线方向
+   * @param lookAtTarget 可选，到达目的点时视线看向的位置，优先于toDirection
+   * @param fov 可选，视场角度数
+   */
+  public async moveToPanorama(toPID: number,
+    params?: {
+      toDirection?: NS_THREE.Vector3;
+      lookAtTarget?: NS_THREE.Vector3;
+      interval?: number;
+      fov?: number;
+      fadeInOut?: boolean;
+      easing?: {
+        (k: number): number;
+      };
+      showModel?: boolean;
+    }): Promise<void> {
+    const p = params || {};
+    return this.moveInPath([toPID], {
+      queueIfBusy: false,
+      lookAtTargets: p.lookAtTarget,
+      toDirections: p.toDirection,
+      intervals: p.interval,
+      fovs: p.fov,
+      fadeInOuts: p.fadeInOut,
+      easings: p.easing,
+      freeRotation: !p.lookAtTarget,
+      showModel: p.showModel,
+    });
+  }
+
+  /**
+   * 移动到指定的全景点处
+   * 此方法与[[moveToPanorama]]的不同点在于通过Promise机制实现同步阻塞，
+   * 在前一个Translation未完成时发起的Translation会自动被阻塞到前一个完成时再执行
+   * @param toPID 目标全景点ID
+   * @param interval 可选，过渡所用时长
+   * @param easing 可选，插值函数
+   * @param fadeInOut 可选，是否使用淡出淡入变换
+   * @param toDirection 可选，到达目的点时要转到的视线方向，
+   *  若不设置则默认以从起始点到目的点的连线为最终视线方向
+   * @param lookAtTarget 可选，到达目的点时视线看向的位置，优先于toDirection
+   * @param fov 可选，视场角度数
+   */
+  public async moveToPanoramaSync(toPID: number,
+    params?: {
+      toDirection?: NS_THREE.Vector3;
+      lookAtTarget?: NS_THREE.Vector3;
+      interval?: number;
+      fov?: number;
+      fadeInOut?: boolean;
+      easing?: {
+        (k: number): number;
+      };
+      showModel?: boolean;
+    }): Promise<void> {
+    const p = params || {};
+    return this.moveInPath([toPID], {
+      queueIfBusy: true,
+      lookAtTargets: p.lookAtTarget,
+      toDirections: p.toDirection,
+      intervals: p.interval,
+      fovs: p.fov,
+      fadeInOuts: p.fadeInOut,
+      easings: p.easing,
+      freeRotation: !p.lookAtTarget,
+      showModel: p.showModel,
+    });
+  }
+
+  private static getModelMesh(panoGroup: TilePanoramaGroup): NS_THREE.Mesh | undefined {
+    if (panoGroup && panoGroup.modelElement) { // TODO: Multiple children mesh?
+      return PanoramaModelUtil.getModelMeshInElement(panoGroup.modelElement);
+    }
+    return undefined;
+  }
+
+  private getModelMaterial(): NS_THREE.ShaderMaterial {
+    if (this.modelMaterial) {
+      return this.modelMaterial;
+    }
+    const { THREE } = Externals.getInstance();
+    const uniforms = PanoramaModelUtil.createModelUniforms();
+    this.modelMaterial = new THREE.ShaderMaterial({
+      side: THREE.DoubleSide,
+      vertexShader: PanoramaModelUtil.getModelVS(),
+      fragmentShader: PanoramaModelUtil.getModelFS(),
+      uniforms,
+      name: 'modelMaterial',
+    });
+    return this.modelMaterial;
+  }
+
+  private async preloadCubeTexturesOfPIDs(pids: number[], waitForReadyCount: number,
+    recycleIntermediateTextures?: boolean[]): Promise<NS_THREE.CubeTexture[]> {
+    const panos = pids.map((pid) => this.getPanoramaOfPID(pid));
+    const textureURLsArray: (string[] | undefined)[] = panos.map(({ pano }) => {
+      if (pano) {
+        return pano.textureURLs;
+      }
+      return undefined;
+    });
+    return CubeTextureCache.sharedInstance.preloadCubeTextures(
+      textureURLsArray,
+      waitForReadyCount,
+      recycleIntermediateTextures,
+    );
+  }
+
+  private getInstantTranslationMaterial(): NS_THREE.ShaderMaterial {
+    if (this.instantTranslationMaterial) {
+      return this.instantTranslationMaterial;
+    }
+    const { THREE } = Externals.getInstance();
+    const uniforms = PanoramaModelUtil.createInstantTranslationUniforms();
+    this.instantTranslationMaterial = new THREE.ShaderMaterial({
+      side: THREE.DoubleSide,
+      vertexShader: PanoramaModelUtil.getInstantTranslationVS(),
+      fragmentShader: PanoramaModelUtil.getModelFS(),
+      uniforms,
+      name: 'instantTranslationMaterial',
+    });
+    return this.instantTranslationMaterial;
+  }
+
+  /**
+   * @ignore
+   * @param visible
+   */
+  public setModelAppearance(
+    modelElement: NS_THREE.Object3D, visible: boolean,
+    meshMaterial?: NS_THREE.Material | NS_THREE.Material[],
+    modelMesh?: NS_THREE.Mesh,
+  ): void {
+    if (modelElement) {
+      modelElement.visible = visible;
+      if (modelElement instanceof FloorModel) {
+        // (modelElement as FloorModel).addViewConfiguration({
+        //   targetView: this.view,
+        //   visible,
+        //   meshMaterial,
+        // });
+        if (meshMaterial) {
+          modelElement.addMeshMaterial(meshMaterial);
+        }
+      } else {
+        let mesh = modelMesh;
+        if (!mesh) {
+          mesh = PanoramaModelUtil.getModelMeshInElement(modelElement);
+        }
+        if (mesh && meshMaterial) {
+          mesh.material = meshMaterial;
+        }
+      }
+    }
+  }
+
+  public async moveInPath(path: number[],
+    params?: {
+      queueIfBusy?: boolean;
+      showModel?: boolean;
+      toDirections?: NS_THREE.Vector3 | NS_THREE.Vector3[];
+      lookAtTargets?: NS_THREE.Vector3 | NS_THREE.Vector3[];
+      intervals?: number | number[];
+      fovs?: number | number[];
+      fadeInOuts?: boolean | boolean[];
+      easings?: {
+        (k: number): number;
+      } | { (k: number): number }[];
+      freeRotation?: boolean;
+      rotateDelays?: number | number[];
+    }): Promise<void> {
+    if (path.length === 0) return;
+    const { THREE } = Externals.getInstance();
+
+    const pathPositions: NS_THREE.Vector3[] = [];
+    const inPathPanos = path.map((pid: number) => this.getPanoramaOfPID(pid));
+    inPathPanos.forEach((item) => {
+      if (item.pano) {
+        pathPositions.push(item.pano.position.clone());
+      }
+    });
+
+    const {
+      toDirections, lookAtTargets, intervals,
+      fovs, easings,
+      fadeInOuts,
+      queueIfBusy, showModel, freeRotation, rotateDelays,
+    } = params || {};
+    const modelVisible = (showModel === undefined ? this.showModel : showModel === true);
+
+    let material: NS_THREE.ShaderMaterial;
+    let uniforms: { [uniform: string]: NS_THREE.IUniform };
+    let previousMaterial: NS_THREE.Material | NS_THREE.Material[] | undefined;
+    let fromPID = -1;
+    let toPID: number;
+    let fadeInOut = false;
+
+    const preloadTextureCount = CubeTextureCache.sharedInstance.getCapacity();
+    let from: {
+      pano?: TilePanorama;
+      panoramaGroup?: TilePanoramaGroup;
+      modelMesh?: NS_THREE.Mesh;
+    };
+    let to: {
+      pano?: TilePanorama;
+      panoramaGroup?: TilePanoramaGroup;
+      modelMesh?: NS_THREE.Mesh;
+    };
+
+    let modelElement: NS_THREE.Object3D;
+
+    const trivialProgressTransform = (progress: number): number => progress;
+    const fadeInOutProgressTransform = (progress: number): number => {
+      if (progress < 0.25) return 0;
+      if (progress > 0.75) return 1;
+      return 2 * (progress - 0.25);
+    };
+    let progressTransforms: {
+      (progress: number): number;
+    } | { (progress: number): number }[] | undefined;
+    if (Array.isArray(fadeInOuts)) {
+      progressTransforms = fadeInOuts.map((b) => (b ? fadeInOutProgressTransform : trivialProgressTransform));
+    } else if (fadeInOuts === true) {
+      progressTransforms = fadeInOutProgressTransform;
+    }
+
+    await this.moveCameraInPath(pathPositions, {
+      queueIfBusy,
+      toDirections,
+      lookAtTargets,
+      intervals,
+      fovs,
+      easings,
+      progressTransforms,
+      freeRotation,
+      rotateDelays,
+      beforeAllMoves: async () => {
+        fromPID = this.curPanoramaGroup ? this.curPanoramaGroup.currentPanoramaID : -1;
+        material = this.getModelMaterial();
+        uniforms = material.uniforms as { [uniform: string]: NS_THREE.IUniform };
+
+        if (path.length > 1) this.emit(Events.PATH_MOVEMENT_START, path);
+      },
+      onOneMoveStart: async (index: number,
+        target0: NS_THREE.Vector3,
+        eye0: NS_THREE.Vector3,
+        target1: NS_THREE.Vector3,
+        eye1: NS_THREE.Vector3,
+        error: { loadedError?: boolean },
+      ): Promise<boolean> => {
+        toPID = path[index];
+        from = this.getPanoramaOfPID(fromPID);
+        to = this.getPanoramaOfPID(toPID);
+
+        if (!from.pano || !to.pano || !from.panoramaGroup || !to.panoramaGroup) return false;
+        from.modelMesh = TilePanoramaController.getModelMesh(from.panoramaGroup);
+        to.modelMesh = TilePanoramaController.getModelMesh(to.panoramaGroup);
+
+        const preloadPIDs = [fromPID];
+        const preloadPIDsSet = new Set();
+        preloadPIDsSet.add(fromPID);
+        for (let i = index; preloadPIDs.length < preloadTextureCount && i < path.length; i += 1) {
+          if (!preloadPIDsSet.has(path[i])) {
+            preloadPIDsSet.add(path[i]);
+            preloadPIDs.push(path[i]);
+          }
+        }
+        this.emit(Events.WILL_MOVE_TO_PANORAMA, toPID, to.pano ? to.pano.position : null);
+        const res = await from.panoramaGroup.presentPanoramaAround(to.pano.pid, this.view);
+        if (!res) {
+          error.loadedError = true;
+          return false;
+        }
+        this.emit(Events.DID_LOAD_PANORAMA, to.pano.pid);
+        if (fromPID === toPID) return false;
+
+        if (Array.isArray(fadeInOuts)) {
+          if (fadeInOuts.length > index) {
+            fadeInOut = fadeInOuts[index];
+          } else if (fadeInOuts.length > 0) {
+            fadeInOut = fadeInOuts[fadeInOuts.length - 1];
+          }
+        } else if (fadeInOuts) {
+          fadeInOut = fadeInOuts as boolean;
+        }
+
+        const translateBetweenGroups = (from.panoramaGroup !== to.panoramaGroup);
+        if (translateBetweenGroups) {
+          material = this.getInstantTranslationMaterial();
+          uniforms = material.uniforms as { [uniform: string]: NS_THREE.IUniform };
+        } else {
+          material = this.getModelMaterial();
+          uniforms = material.uniforms as { [uniform: string]: NS_THREE.IUniform };
+        }
+
+        if (!translateBetweenGroups && !modelVisible) {
+          const distance = to.pano!.position.distanceTo(from.pano!.position);
+          const boxGeometry = new THREE.BoxGeometry(5, (from.pano.position.z + 0.93) * 2, distance * 4);
+          modelElement = new THREE.Mesh(
+            boxGeometry,
+            material,
+          );
+          modelElement.position.copy(from.pano.position);
+          modelElement.up.set(0, 0, 1);
+          modelElement.lookAt(to.pano!.position);
+          to.panoramaGroup.add(modelElement);
+        }
+
+        [to].forEach(({ panoramaGroup, modelMesh }) => {
+          if (modelMesh && panoramaGroup) {
+            previousMaterial = modelMesh.material;
+            if (from.panoramaGroup === to.panoramaGroup) {
+              this.setModelAppearance(panoramaGroup.modelElement!, modelVisible, material, modelMesh);
+            } else {
+              this.setModelAppearance(panoramaGroup.modelElement!, false, material, modelMesh);
+            }
+            panoramaGroup.setBoundBoxAppearance(material);
+            panoramaGroup.addGroupViewConfiguration({
+              targetView: this.view,
+              showBoundBox: true,
+            });
+          }
+        });
+
+        if (translateBetweenGroups) {
+          // Inv(L0) * L1
+          let up = new THREE.Vector3(0, 1, 0);
+          if (this.view.camera) {
+            up = this.view.camera.up;
+          }
+          const invLookAt0 = new THREE.Matrix4().lookAt(eye0, target0, up);
+          const invLookAt1 = new THREE.Matrix4().lookAt(eye1, target1, up);
+          uniforms.matrixT.value = invLookAt0.multiply(new THREE.Matrix4().copy(invLookAt1).invert());
+        }
+        uniforms.pano0Matrix.value = from.pano.matrix;
+        uniforms.pano0Position.value = from.pano.position;
+        uniforms.pano1Matrix.value = to.pano.matrix;
+        uniforms.pano1Position.value = to.pano.position;
+        uniforms.weight0.value = 1.0;
+        uniforms.weight1.value = 0.0;
+        const fromCubeText = TextureController.instance.getCubeTextureByPid(from.pano.pid);
+        const toCubeText = TextureController.instance.getCubeTextureByPid(to.pano.pid);
+        uniforms.pano0Map.value = fromCubeText;
+        uniforms.pano1Map.value = toCubeText;
+        this.panoramaUnmount(from.pano);
+
+        return translateBetweenGroups;
+      },
+      onOneMoveUpdate: (index: number, progress: number) => {
+        if (fromPID === toPID) return;
+        const translateBetweenGroups = (from.panoramaGroup !== to.panoramaGroup);
+        if (translateBetweenGroups) {
+          if (progress < 0.5) {
+            uniforms.weight0.value = 1.0 - progress * 2;
+            uniforms.weight1.value = 0.0;
+          } else {
+            uniforms.weight1.value = progress * 2 - 1.0;
+            uniforms.weight0.value = 0.0;
+          }
+        } else if (fadeInOut) {
+          if (progress < 0.25) {
+            uniforms.weight0.value = 1.0 - progress * 4;
+            uniforms.weight1.value = 0.0;
+          } else if (progress > 0.75) {
+            uniforms.weight1.value = progress * 4 - 3.0;
+            uniforms.weight0.value = 0.0;
+          } else {
+            uniforms.weight1.value = 0.0;
+            uniforms.weight0.value = 0.0;
+          }
+        } else {
+          uniforms.weight0.value = 1.0 - progress;
+          uniforms.weight1.value = progress;
+        }
+      },
+      onOneMoveComplete: async (index: number) => {
+        if (from.modelMesh && from.panoramaGroup && from.panoramaGroup !== to.panoramaGroup) {
+          if (!modelVisible) {
+            this.setModelAppearance(from.panoramaGroup.modelElement!, false, previousMaterial, from.modelMesh);
+          }
+          from.panoramaGroup.addGroupViewConfiguration({
+            targetView: this.view,
+            showBoundBox: false,
+          });
+        }
+
+        to.panoramaGroup!.remove(modelElement);
+        if (to.pano) {
+          this.curPanorama = to.pano;
+          this.panoramaMount(this.curPanorama);
+          this.updateCurPanoramTextureInfo();
+          this.updateLevel();
+        }
+
+        this.emit(
+          Events.MOVE_TO_PANORAMA,
+          toPID,
+          to.pano ? to.pano.position : null,
+          from.panoramaGroup !== to.panoramaGroup,
+        );
+        this.panoramaGroupChanged = false;
+
+        if (index < path.length - 1) {
+          fromPID = path[index];
+        }
+      },
+      afterAllMoves: async () => {
+        to.panoramaGroup!.presentPanoramaIndicatorsAround(toPID, this.view);
+        if (fromPID !== toPID && to && from) {
+          if (to.modelMesh && to.panoramaGroup) {
+            if (!modelVisible) {
+              this.setModelAppearance(to.panoramaGroup.modelElement!, false, previousMaterial, to.modelMesh);
+            }
+            to.panoramaGroup.addGroupViewConfiguration({
+              targetView: this.view,
+              showBoundBox: false,
+            });
+          }
+          if (to.panoramaGroup) {
+            this.curPanoramaGroup = to.panoramaGroup;
+          }
+        }
+        if (path.length > 1) this.emit(Events.PATH_MOVEMENT_COMPLETED, path);
+      },
+    });
+  }
+
+  /**
+   * 根据路径移动相机
+   * @param pathPoints 摄像机运动的路径上每一段目的点的Vector3坐标数组
+   * @param queueIfBusy 可选，指示当当前有动画在进行中时，是把此次动作排队还是直接放弃
+   * @param intervals 可选，若为数组则依次是每一段路径所花费的时间间隔，若是一个数则全都用该时间间隔
+   * @param fovs 可选，若为数组则依次是每一段路径结束时的视场角，若是一个数则全都用该视场角
+   * @param toDirections 可选，若为数组则依次是每一段路径结束点的视线方向，若是单一Vector3对象则全用此视线方向
+   * @param lookAtTargets 可选，若为数组则依次是每一段路径所看向的位置，若是单一Vector3对象则始终看向此位置
+   * toDirections与lookAtTargets最多只能有一个，如果同时传入了则只以lookAtTargets为准
+   * @param easings 可选，若为数组则依次是每一段路径的动画插值函数，
+   * 若是单一{(k: number): number}对象则全用此插值函数
+   * @param rotateDelays 可选，旋转时的延迟时间
+   * @param progressTransforms 可选，转换progress的映射函数，从0~1之间的小数映射到另一个0~1之间的小数
+   * @param beforeAllMoves 整个路径移动即将开始前的回调
+   * @param onOneMoveStart 每段路径移动开始时的回调
+   * @param onOneMoveUpdate 每段路径移动进行中的进度回调
+   * @param onOneMoveComplete 每段路径移动结束时的回调
+   * @param afterAllMoves 整个路径移动结束时的回调
+   * @returns
+   */
+  public async moveCameraInPath(pathPoints: NS_THREE.Vector3[],
+    params?: {
+      queueIfBusy?: boolean;
+      toDirections?: NS_THREE.Vector3 | NS_THREE.Vector3[];
+      lookAtTargets?: NS_THREE.Vector3 | NS_THREE.Vector3[];
+      intervals?: number | number[];
+      fovs?: number | number[];
+      easings?: {
+        (k: number): number;
+      } | { (k: number): number }[];
+      progressTransforms?: { (progress: number): number } | { (progress: number): number }[];
+      rotateDelays?: number | number[];
+
+      beforeAllMoves?: { (): Promise<void> };
+      onOneMoveStart?: {
+        (index: number,
+          target0: NS_THREE.Vector3,
+          eye0: NS_THREE.Vector3,
+          target1: NS_THREE.Vector3,
+          eye1: NS_THREE.Vector3,
+          error?: { loadedError?: boolean }
+          ): Promise<boolean>;
+      };
+      onOneMoveUpdate?: { (index: number, progress0: number, progress: number): void };
+      onOneMoveComplete?: { (index: number): void };
+      afterAllMoves?: { (): Promise<void> };
+      freeRotation?: boolean;
+    }): Promise<void> {
+    if (!pathPoints || pathPoints.length === 0) return;
+    const { THREE } = Externals.getInstance();
+
+    const { queueIfBusy = false } = params || {};
+    if (!queueIfBusy) {
+      if (this.isAnimating) return;
+      this.isAnimating = true;
+    }
+    while (this.translatePromise) {
+      // eslint-disable-next-line no-await-in-loop
+      await this.translatePromise;
+    }
+    // eslint-disable-next-line no-async-promise-executor
+    const translatePromise = new Promise<void>(async (resolve0) => {
+      const {
+        beforeAllMoves,
+        onOneMoveStart,
+        onOneMoveUpdate,
+        onOneMoveComplete,
+        afterAllMoves,
+      } = params || {};
+      let iPath = 0;
+      // eslint-disable-next-line no-async-promise-executor
+      const createTask = (): Promise<void> => new Promise(async (resolve, reject) => {
+        if (!this.view.camera || this.cancelAnimation) {
+          reject();
+          this.cancelAnimation = false;
+          return;
+        }
+
+        const {
+          toDirections,
+          lookAtTargets,
+          intervals,
+          fovs,
+          easings,
+          progressTransforms,
+          freeRotation,
+          rotateDelays,
+        } = params || {};
+
+        const fromPosition = this.basicController.getCameraTarget();
+        const toPosition = pathPoints[iPath];
+
+        const diff = toPosition.clone().sub(fromPosition);
+
+        let toDirection = toPosition.clone();
+        // let directionFrom = toPosition;
+        if (Array.isArray(lookAtTargets)) {
+          if (lookAtTargets.length > iPath) {
+            toDirection = lookAtTargets[iPath].clone();
+          } else if (lookAtTargets.length > 0) {
+            toDirection = lookAtTargets[lookAtTargets.length - 1].clone();
+          }
+        } else if (lookAtTargets instanceof THREE.Vector3) {
+          toDirection = (lookAtTargets as THREE.Vector3).clone();
+        } // else {
+        // directionFrom = fromPosition;
+        // }
+
+        let rotateDelay = 0;
+        if (rotateDelays) {
+          if (Array.isArray(rotateDelays)) {
+            if (rotateDelays.length > iPath) {
+              rotateDelay = rotateDelays[iPath];
+            } else if (rotateDelays.length > 0) {
+              rotateDelay = rotateDelays[rotateDelays.length - 1];
+            }
+          } else {
+            rotateDelay = rotateDelays || 0;
+          }
+        }
+
+        if (lookAtTargets || !toDirections) {
+          if (toDirection.distanceToSquared(toPosition) < 0.000001) {
+            toDirection = this.basicController.getCameraTarget().sub(this.view.camera.position);
+          } else {
+            toDirection.sub(toPosition);
+          }
+        } else if (Array.isArray(toDirections)) {
+          if (toDirections.length > iPath) {
+            toDirection = toDirections[iPath];
+          } else if (toDirections.length > 0) {
+            toDirection = toDirections[toDirections.length - 1];
+          }
+        } else if (toDirections instanceof THREE.Vector3) {
+          toDirection = toDirections as NS_THREE.Vector3;
+        }
+
+        toDirection.normalize();
+
+        const fromDirection = this.basicController.getCameraTarget().sub(this.view.camera.position).normalize();
+        const quat = new THREE.Quaternion().setFromUnitVectors(this.view.camera.up, new THREE.Vector3(0, 1, 0));
+        const quatInverse = quat.clone().invert();
+
+        fromDirection.applyQuaternion(quat);
+        toDirection.applyQuaternion(quat);
+        const fromSpherical = new THREE.Spherical().setFromVector3(fromDirection);
+        const toSpherical = new THREE.Spherical().setFromVector3(toDirection);
+        const thetaDiff = fromSpherical.theta - toSpherical.theta;
+        fromDirection.applyQuaternion(quatInverse);
+        toDirection.applyQuaternion(quatInverse);
+
+        let toFOV = 60;
+        let fromFOV = 60;
+        if (this.view.camera instanceof THREE.PerspectiveCamera) {
+          const camera = this.view.camera as NS_THREE.PerspectiveCamera;
+          fromFOV = camera.fov;
+          toFOV = camera.fov;
+          if (Array.isArray(fovs)) {
+            if (fovs.length > iPath) {
+              toFOV = fovs[iPath];
+            } else if (fovs.length > 0) {
+              toFOV = fovs[fovs.length - 1];
+            }
+          } else if (fovs) {
+            toFOV = fovs as number;
+          }
+        }
+
+        let interval = 1000;
+        if (Array.isArray(intervals)) {
+          if (intervals.length > iPath) {
+            interval = intervals[iPath];
+          } else if (intervals.length > 0) {
+            interval = intervals[intervals.length - 1];
+          }
+        } else if (intervals) {
+          interval = intervals as number;
+        }
+
+        let easing = TWEEN.Easing.Linear.None;
+        if (Array.isArray(easings)) {
+          if (easings.length > iPath) {
+            easing = easings[iPath];
+          } else if (easings.length > 0) {
+            easing = easings[easings.length - 1];
+          }
+        } else if (typeof easings === 'function') {
+          easing = easings as { (k: number): number };
+        } else if (iPath === 0) {
+          easing = TWEEN.Easing.Quadratic.Out;
+          if ((iPath === pathPoints.length - 1)) easing = TWEEN.Easing.Quadratic.InOut;
+        } else if (iPath === pathPoints.length - 1) {
+          easing = TWEEN.Easing.Quadratic.In;
+        }
+
+        let progressTransform: { (progress: number): number } | undefined;
+        if (Array.isArray(progressTransforms)) {
+          if (progressTransforms.length > iPath) {
+            progressTransform = progressTransforms[iPath];
+          } else if (progressTransforms.length > 0) {
+            progressTransform = progressTransforms[progressTransforms.length - 1];
+          }
+        } else if (progressTransforms) {
+          progressTransform = progressTransforms as { (progress: number): number };
+        }
+
+        const target1 = toPosition;
+        const eye1 = toDirection.clone()
+          .multiplyScalar(TilePanoramaController.DirectionVectorScalar)
+          .add(target1);
+        const target0 = fromPosition;
+        const eye0 = fromDirection.clone()
+          .multiplyScalar(TilePanoramaController.DirectionVectorScalar)
+          .add(target0);
+
+        let skipPositionTranslate = false;
+        if (onOneMoveStart) {
+          const errorInfo = { loadedError: false };
+          skipPositionTranslate = await onOneMoveStart(iPath, target0, eye0, target1, eye1, errorInfo);
+          if (errorInfo.loadedError) {
+            this.cancelAnimation = true;
+            resolve();
+            return;
+          }
+        }
+
+        const fromTheta = fromSpherical.theta;
+        const toTheta = Math.abs(thetaDiff) > Math.PI
+          ? toSpherical.theta + Math.sign(thetaDiff) * Math.PI * 2 : toSpherical.theta;
+        const fromPhi = fromSpherical.phi;
+        const toPhi = toSpherical.phi;
+
+        new TWEEN.Tween({ timer: 0 })
+          .to({
+            timer: interval,
+          }, interval)
+          .easing(easing)
+          .onStart(() => {
+            let eye = skipPositionTranslate ? eye1 : eye0;
+            const target = skipPositionTranslate ? target1 : target0;
+
+            if (freeRotation) {
+              this.basicController.update();
+              const orbitControlTarget = this.basicController.getCameraTarget();
+              const cameraPosition = this.basicController.getCameraPosition();
+              const originDiff = orbitControlTarget.sub(cameraPosition).normalize();
+              eye = originDiff.multiplyScalar(TilePanoramaController.DirectionVectorScalar).add(target);
+            }
+            this.setCameraPose(eye, target);
+            this.renderThisFrame();
+          })
+          .onUpdate(({ timer }) => {
+            const progress = timer / interval;
+            let rotateProgress = (timer - rotateDelay) / (interval - rotateDelay);
+            rotateProgress = easing(Math.max(Math.min(rotateProgress, 1), 0));
+            const theta = fromTheta + (toTheta - fromTheta) * rotateProgress;
+            const phi = fromPhi + (toPhi - fromPhi) * rotateProgress;
+
+            const transformedProgress = progressTransform ? progressTransform(progress) : progress;
+            // const progress = progress0;
+            if (!skipPositionTranslate) {
+              // if (freeRotation) lookAt = this.orbitControl.target.clone();
+              const spherical = new THREE.Spherical(
+                1,
+                phi,
+                Math.abs(theta) > Math.PI ? theta - Math.sign(theta) * Math.PI * 2 : theta,
+              );
+              spherical.makeSafe();
+              const direction = new THREE.Vector3().setFromSpherical(spherical).applyQuaternion(quatInverse);
+              // console.log(`#PanoCtrl# onUpdate: direction=(${direction.x}, ${direction.y}, ${direction.z})`);
+              const lookAt: NS_THREE.Vector3 = fromPosition.clone().addScaledVector(diff, transformedProgress);
+              this.basicController.update();
+              const orbitControlTarget = this.basicController.getCameraTarget();
+              const cameraPosition = this.basicController.getCameraPosition();
+              const originDiff = orbitControlTarget.sub(cameraPosition).normalize();
+              const fromNormalized = fromDirection.clone().normalize();
+              const dist = originDiff.distanceToSquared(fromNormalized);
+              const cameraPos = (freeRotation && dist > 0.0001 ? originDiff : direction)
+                .multiplyScalar(TilePanoramaController.DirectionVectorScalar)
+                .add(lookAt);
+              this.setCameraPose(cameraPos, lookAt);
+            }
+
+            const currentFOV = fromFOV + transformedProgress * (toFOV - fromFOV);
+            this.setFOV(currentFOV);
+
+            if (onOneMoveUpdate) {
+              onOneMoveUpdate(iPath, progress, transformedProgress);
+            }
+
+            this.renderThisFrame();
+          })
+          .onComplete(async () => {
+            if (!skipPositionTranslate) {
+              const toLookAt = toPosition;
+              this.basicController.update();
+              const orbitControlTarget = this.basicController.getCameraTarget();
+              const cameraPosition = this.basicController.getCameraPosition();
+              const originDiff = orbitControlTarget.sub(cameraPosition).normalize();
+              const cameraPos = (freeRotation ? originDiff : toDirection).clone()
+                .multiplyScalar(TilePanoramaController.DirectionVectorScalar)
+                .add(toLookAt);
+              this.setCameraPose(cameraPos, toLookAt);
+            }
+
+            this.renderThisFrame();
+
+            if (onOneMoveComplete) {
+              await onOneMoveComplete(iPath);
+            }
+            resolve();
+          })
+          .start();
+      });
+
+      if (beforeAllMoves) {
+        await beforeAllMoves();
+      }
+
+      while (iPath < pathPoints.length) {
+        if (this.cancelAnimation) break;
+        const task = createTask();
+        // eslint-disable-next-line no-await-in-loop
+        await task;
+        iPath += 1;
+      }
+
+      if (!this.cancelAnimation) {
+        if (afterAllMoves) {
+          await afterAllMoves();
+        }
+      }
+
+      this.cancelAnimation = false;
+
+      this.translatePromise = undefined;
+
+      if (!queueIfBusy) {
+        this.isAnimating = false;
+      }
+
+      resolve0();
+    });
+    this.translatePromise = translatePromise;
+    // eslint-disable-next-line consistent-return
+    await translatePromise;
+  }
+
+  /**
+   * 设置FOV, 不可以超过setFOVRange所设置的范围.
+   * @param fov 垂直方向视场角
+   */
+  public setFOV(fov: number): void {
+    if (!this.basicController) return;
+    this.basicController.setFov(fov);
+    this.renderFrame = true;
+  }
+
+  /**
+     * 设置FOV范围, 默认为[60, 90]
+     * @param min 垂直方向视场角最小值
+     * @param max 垂直方向视场角最大值
+     */
+  public setFOVRange(min: number, max: number): void {
+    if (!this.basicController) return;
+    this.basicController.setFovRange(min, max);
+    this.renderFrame = true;
+  }
+
+  /**
+   * 设置摄像机观察方向和位置
+   * @param position 摄像机所在位置
+   * @param lookAt 观察目标点，同时也是[[OrbitControls]]的旋转中心
+   */
+  public setCameraPose(position: NS_THREE.Vector3, lookAt: NS_THREE.Vector3, useLookAt = true): void {
+    this.basicController.setCameraPosition(position, false);
+    if (useLookAt) {
+      this.basicController.setCameraLookAt(lookAt);
+    }
+    this.renderThisFrame();
+  }
+
+  /**
+   * 渲染帧
+   */
+  protected renderThisFrame(): void {
+    if (!this.renderFrame) {
+      this.renderFrame = true;
+    }
+  }
+
+  /**
+   * 删除平面
+   * @param pid
+   */
+  private deletePlane(pid: number): void {
+    this.planeMap.delete(pid);
+  }
+
+  /**
+   * 更新全景纹理信息
+   * @param updates
+   * @param deletes
+   */
+  private updatePanoramaTextureInfos(updates: TileTextureInfo[], deletes: TileTextureInfo[]): void {
+    const waitPfids = new Map<number, Map<string, TileTextureInfo>>();
+    // console.log('contorller', 'updates', updates.length, 'deletes', deletes.length);
+    for (let i = 0; i < updates.length; i++) {
+      const pfid = updates[i].pfid;
+      if (!waitPfids.has(pfid)) {
+        waitPfids.set(pfid, new Map<string, TileTextureInfo>());
+      }
+    }
+    for (let i = 0; i < deletes.length; i++) {
+      const pfid = deletes[i].pfid;
+      if (!waitPfids.has(pfid)) {
+        waitPfids.set(pfid, new Map<string, TileTextureInfo>());
+      }
+    }
+    // const textureInfos = TextureController.instance.getTextureInfos();
+    this.updateCurPanoramTextureInfo(waitPfids);
+  }
+
+  /**
+   * 更新当前全景纹理信息
+   * @param waitPfids
+   */
+  private updateCurPanoramTextureInfo(waitPfids?: Map<number, Map<string, TileTextureInfo>>): void {
+    const { curPanorama } = this;
+    if (curPanorama) {
+      const { textures, textureMap } = TextureController.instance;
+      const { tilePlanes } = curPanorama;
+      let tWaitPfids: Map<number, Map<string, TileTextureInfo>>;
+      if (!waitPfids) {
+        tWaitPfids = new Map<number, Map<string, TileTextureInfo>>();
+        tilePlanes.forEach((plane) => {
+          tWaitPfids.set(plane.pfid, new Map<string, TileTextureInfo>());
+        });
+      } else {
+        tWaitPfids = waitPfids;
+      }
+      textureMap.forEach((info, id) => {
+        const { pfid } = info;
+        const map = tWaitPfids.get(pfid);
+        if (map) {
+          map.set(id, info);
+        }
+      });
+      tilePlanes.forEach((plane) => {
+        const { pfid } = plane;
+        const map = tWaitPfids.get(pfid);
+        if (map) {
+          plane.updateTextures(textures, map);
+        }
+      });
+    }
+  }
+
+  /**
+   * 删除全景点的纹理信息
+   * @param panorama
+   */
+  private deleteTextureInfos(panorama: TilePanorama): void {
+    panorama.tilePlanes.forEach((plane) => {
+      const { textureMap } = plane;
+      textureMap.forEach((info) => {
+        TextureController.instance.deleteTexture(info);
+      });
+    });
+  }
+
+  /**
+   * 清理全景点纹理信息
+   * @param panorama
+   */
+  private disposeTextureInfos(panorama: TilePanorama): void {
+    if (panorama) {
+      panorama.tilePlanes.forEach((plane) => {
+        const textureMap = plane.textureMap;
+        TextureController.instance.deteteTextureMap(textureMap, true);
+      });
+    }
+  }
+
+  private updateTexture(): boolean {
+    return TextureController.instance.update();
+  }
+
+  /**
+   * 更新平面再相机中的信息
+   * @param view
+   * @returns
+   */
+  private updatePlaneInCamera(view: View): void {
+    if (!this.curPanorama) return;
+    const updates = [] as TileTextureInfo[];
+    this.curPanorama.tilePlanes.forEach((plane) => {
+      const toUpdates = plane.udpateInCamera(view);
+      updates.push(...toUpdates);
+    });
+    for (let i = 0; i < updates.length; i++) {
+      const info = updates[i];
+      if (info.isInCamera) {
+        TextureController.instance.addTexture(info);
+      } else {
+        TextureController.instance.deleteTexture(info);
+      }
+    }
+  }
+
+  private panoramaeUpdate(view: View): boolean {
+    return this.handlePanoramaUpdate(view);
+  }
+
+  public update(): boolean {
+    let isUpdate = false;
+    // if (!this.initialized) {
+    //   return isUpdate;
+    // }
+    const textureUpdate = this.updateTexture();
+    if (textureUpdate || this.planeNeedUpdate || this.renderFrame) {
+      isUpdate = true;
+      this.renderFrame = false;
+    }
+    if (this.planeNeedUpdate) {
+      if (this.view) { this.panoramaeUpdate(this.view); }
+      this.planeNeedUpdate = false;
+    }
+    return isUpdate;
+  }
+
+  // /**
+  //  * 跟下视图变化
+  //  * @param view
+  //  */
+  // public renderingViewChanged(view: View): void {
+  //   if (this.planeNeedUpdate) {
+  //     this.panoramaeUpdate(view);
+  //     this.planeNeedUpdate = false;
+  //   }
+  // }
+
+  /**
+   * 全景点挂载
+   * @param pano
+   */
+  private panoramaMount(pano: TilePanorama): void {
+    pano.mount();
+    this.emit(Events.DID_LOAD_PANORAMA, pano.pid);
+  }
+
+  /**
+   * 全景点卸载
+   * @param pano
+   */
+  private panoramaUnmount(pano: TilePanorama): void {
+    pano.unMount();
+    TextureController.instance.deleteTexturesByPid(pano.pid, true);
+  }
+
+  /**
+   * 清理
+   */
+  public dispose(): void {
+    this.planeMap.clear();
+    this.setEnabled(false);
+    TextureController.instance.off(TextureEventEnum.TEXTURE_UPDATE, this.eventListeners.onTextureUpdate);
+    if (this.curPanorama) {
+      this.panoramaUnmount(this.curPanorama);
+    }
+    if (this.modelMaterial) {
+      this.modelMaterial.dispose();
+    }
+    if (this.instantTranslationMaterial) {
+      this.instantTranslationMaterial.dispose();
+    }
+    TextureCache.disposeAll();
+    CubeTextureCache.disposeAll();
+    super.dispose();
+  }
+
+  // /**
+  //  * 单例
+  //  */
+  // static get instance(): TilePanoramaController {
+  //   if (!this.__instance) {
+  //     this.__instance = new TilePanoramaController();
+  //   }
+  //   return this.__instance;
+  // }
+}
+
+export { TilePanoramaController };