@aibee/owlly 1.0.25

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

@@ -0,0 +1,2234 @@
+import TWEEN from '@tweenjs/tween.js';
+import { Externals, NS_THREE } from '../stage/externals';
+import { OrbitControls } from '../../external/orbit-controls';
+import { Controller } from './controller';
+import { PanoramaGroup } from '../element/panorama-group';
+import { View } from '../view/view';
+import { Element } from '../element/element';
+import { Panorama } from '../element/panorama';
+import { Events } from '../utils/events';
+import { FloorModel } from '../element/floor-model';
+import { CubeTextureCache } from '../utils/cube-texture-cache';
+import { TextureCache } from '../utils/texture-cache';
+// import { OwllyEvents } from '../utils/events';
+
+const ROTATION_LOCK_BOUNDARY = 3 / 180 * Math.PI;
+
+/**
+ * 在升级至瓦片后, 停止使用该控制器
+ */
+class PanoramaController extends Controller {
+  private orbitControl: OrbitControls;
+
+  private mouseDownHandler: {(event: PointerEvent): void};
+
+  private mouseMoveHandler: {(event: PointerEvent): void};
+
+  private mouseUpHandler: {(event: PointerEvent): void};
+
+  private mouseWheelHandler: {(event: WheelEvent): void};
+
+  // private mouseMovement: number;
+
+  private touchStartHandler: {(event: TouchEvent): void};
+
+  private touchMoveHandler: {(event: TouchEvent): void};
+
+  private touchEndHandler: {(event: TouchEvent): void};
+
+  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 isAnimating: boolean;
+
+  private translatePromise: Promise<unknown>|undefined;
+
+  private panoramaGroups: PanoramaGroup[];
+
+  private currentPanoramaGroup: PanoramaGroup|undefined;
+
+  private pid2GroupMap: Map<number, PanoramaGroup>;
+
+  // private modelElement: Element;
+
+  // private modelMesh: Mesh|null;
+
+  private modelMaterial: NS_THREE.ShaderMaterial;
+
+  private instantTranslationMaterial: NS_THREE.ShaderMaterial;
+
+  private raycaster: NS_THREE.Raycaster;
+
+  private elements: Set<Element>;
+
+  private view: View;
+
+  private renderFrame: boolean | undefined;
+
+  private static RotateSpeed = -1;
+
+  private static DirectionVectorScalar = -0.0001;
+
+  private moveOnClick: boolean;
+
+  private hidePanoramas: boolean;
+
+  private showModel: boolean;
+
+  private fovRange: { min: number; max: number };
+
+  private onScreenDetectRadius: number;
+
+  private rotationLocks: {
+    lockAzimuth: boolean;
+    lockPolar: boolean;
+    centralAzimuth: number;
+    centralPolar: number;
+    azimuthRange: number;
+    polarRange: number;
+  };
+
+  private captureMove: boolean;
+
+  public rotateSpeed: number;
+
+  private panoramaGroupChanged: boolean;
+
+  // private tween: TWEEN.Tween;
+
+  private cancelAnimation: boolean;
+
+  /**
+   * 获得模型顶点着色器
+   * @ignore
+   * @returns {string} 顶点着色器代码
+   */
+  static getModelVS(): string {
+    const vertexShader = `
+      uniform vec3 pano0Position;
+      uniform mat4 pano0Matrix;
+      uniform vec3 pano1Position;
+      uniform mat4 pano1Matrix;
+
+      varying vec3 vWorldPosition0;
+      varying vec3 vWorldPosition1;
+
+      void main() {
+
+      vec4 worldPosition = modelMatrix * vec4(position, 1.0);
+
+      vec3 positionLocalToPanoCenter0 = worldPosition.xyz - pano0Position;
+      vWorldPosition0 = (vec4(positionLocalToPanoCenter0, 1.0) * pano0Matrix).xyz;
+      vWorldPosition0.y *= -1.0;
+
+      vec3 positionLocalToPanoCenter1 = worldPosition.xyz - pano1Position;
+      vWorldPosition1 = (vec4(positionLocalToPanoCenter1, 1.0) * pano1Matrix).xyz;
+      vWorldPosition1.y *= -1.0;
+
+      gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+      }`;
+    return vertexShader;
+  }
+
+  static getInstantTranslationVS(): string {
+    // L == lookAt = Inv(R) * Inv(T)
+    // L1 * p1 = L0 * p0  =>  p0 = Inv(L0) * L1 * p1
+    // Let T = Inv(L0) * L1
+    const vertexShader = `
+      uniform mat4 matrixT;
+
+      uniform vec3 pano0Position;
+      uniform mat4 pano0Matrix;
+      uniform vec3 pano1Position;
+      uniform mat4 pano1Matrix;
+
+      varying vec3 vWorldPosition0;
+      varying vec3 vWorldPosition1;
+
+      void main() {
+
+      vec4 worldPosition = modelMatrix * vec4(position, 1.0);
+      vec4 worldPosition0 = matrixT * worldPosition;
+
+      vec3 positionLocalToPanoCenter1 = worldPosition.xyz - pano1Position;
+      vWorldPosition1 = (vec4(positionLocalToPanoCenter1, 1.0) * pano1Matrix).xyz;
+      vWorldPosition1.y *= -1.0;
+
+      vec3 positionLocalToPanoCenter0 = worldPosition0.xyz - pano0Position;
+      vWorldPosition0 = (vec4(positionLocalToPanoCenter0, 1.0) * pano0Matrix).xyz;
+      vWorldPosition0.y *= -1.0;
+
+      gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+      }`;
+    return vertexShader;
+  }
+
+  /**
+   * 获得模型片源着色器
+   * @ignore
+   * @returns {string} 片源着色器代码
+   */
+  static getModelFS(): string {
+    const fragmentShader = `
+      uniform float weight0;
+      uniform float weight1;
+
+      uniform samplerCube pano0Map;
+
+      uniform samplerCube pano1Map;
+
+      varying vec3 vWorldPosition0;
+      varying vec3 vWorldPosition1;
+
+      void main() {
+      vec3 cp0 = vWorldPosition0.xyz;
+      vec3 cp1 = vWorldPosition1.xyz;
+      vec4 colorFromPano0 = textureCube( pano0Map, cp0);
+      vec4 colorFromPano1 = textureCube( pano1Map, cp1);
+
+      vec4 colorFromPanos;
+      // 'colorFromPanos = mix(colorFromPano0, colorFromPano1, progress);
+      colorFromPanos = colorFromPano0 * weight0 + colorFromPano1 * weight1;
+      gl_FragColor = vec4(colorFromPanos.rgb, 1.0);
+      }`;
+    return fragmentShader;
+  }
+
+  static debugModelVS(): string {
+    const vertexShader = `
+      uniform vec2 xRange;
+      uniform vec2 yRange;
+      uniform vec2 zRange;
+      varying vec4 vColor;
+
+      void main() {
+      vColor = vec4((position.x - xRange.x) / xRange.y, (position.y - yRange.x) / yRange.y, (position.z - zRange.x) / zRange.y, 1.0);
+      gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+      }`;
+    return vertexShader;
+  }
+
+  static debugModelFS(): string {
+    const fragmentShader = `
+      varying vec4 vColor;
+
+      void main() {
+      gl_FragColor = vColor;
+      }`;
+    return fragmentShader;
+  }
+
+  async dispose(): Promise<void> {
+    if (this.modelMaterial) {
+      this.modelMaterial.dispose();
+    }
+    if (this.instantTranslationMaterial) {
+      this.instantTranslationMaterial.dispose();
+    }
+    this.setTouchEnabled(false);
+    this.setMouseClickEnabled(false);
+
+    TextureCache.disposeAll();
+    CubeTextureCache.disposeAll();
+
+    if (this.translatePromise) {
+      await this.translatePromise;
+    }
+  }
+
+  /**
+   *
+   * @param view 绑定的View
+   * @param panoramaGroups 全景图组数组，至少需要有一个元素
+   * @param showModel 可选，是否一开始就显示模型
+   * @example
+   * ``` typescript
+   * panoCtl = new PanoramaController(view, panoMgr);
+   * panoCtl.setMouseClickEnabled(true);
+   * stage.bindController(panoCtl);
+   * panoCtl.lookFromPanorama(0, new Vector3(-1, 0, 0));
+   */
+  constructor(view: View, panoramaGroups?: PanoramaGroup|PanoramaGroup[], showModel?: boolean) {
+    super();
+    const { THREE } = Externals.getInstance();
+    this.hidePanoramas = false;
+    this.showModel = showModel === undefined || showModel;
+    this.panoramaGroupChanged = true;
+
+    this.touches = {
+      s: [new THREE.Vector2(), new THREE.Vector2()],
+      c: [new THREE.Vector2(), new THREE.Vector2()],
+      state: 'idle',
+      dist: 0,
+      fov: 60,
+    };
+
+    this.touchStartHandler = (event: TouchEvent): void => {
+      // event.preventDefault();
+      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;
+      }
+    };
+
+    this.touchMoveHandler = (event: TouchEvent): void => {
+      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') {
+        const distDiff = this.touches.c[0].distanceTo(this.touches.c[1]) - this.touches.dist;
+        const { innerWidth, innerHeight } = window;
+        const diagnalDist = Math.sqrt((innerWidth ** 2) + (innerHeight ** 2));
+        const distRatio = distDiff / diagnalDist;
+
+        this.view.camera.fov = Math.min(
+          Math.max(this.touches.fov - distRatio * 90, this.fovRange.min),
+          this.fovRange.max,
+        );
+        this.view.camera.updateProjectionMatrix();
+        this.orbitControl.rotateSpeed = -this.view.camera.fov / 360 * this.rotateSpeed;
+        this.renderThisFrame();
+      }
+    };
+
+    this.touchEndHandler = async (event: TouchEvent): Promise<void> => {
+      if (this.touches.state === 'idle') return;
+
+      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.currentPanoramaGroup) {
+          let toPID: number;
+          if (this.onScreenDetectRadius > 0 && this.view.camera) {
+            toPID = this.currentPanoramaGroup.intersectIndicatorsOnScreen(
+              new THREE.Vector2(x, y),
+              this.onScreenDetectRadius,
+              { screenWidth: clientWidth, screenHeight: clientHeight },
+              this.view.camera,
+            );
+          } else {
+            toPID = this.currentPanoramaGroup.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 Vector3(-0.8, 0.6, 0.0) });
+            if (this.moveOnClick && this.currentPanoramaGroup.currentPanoramaID !== toPID) {
+              await this.moveToPanorama(toPID, { interval: 1000, showModel: true, fadeInOut: false });
+            }
+          }
+        }
+      }
+
+      this.touches.state = 'idle';
+    };
+
+    this.mouseDownHandler = (event: PointerEvent): void => {
+      if (event.pointerType !== 'mouse') return;
+      // this.mouseMovement = new Vector2(event.movementX, event.movementY).length();
+      this.touches.s[0] = new THREE.Vector2(event.clientX, event.clientY);
+      this.touches.state = 'down';
+    };
+    this.mouseMoveHandler = (event: PointerEvent): void => {
+      if (event.pointerType !== 'mouse') return;
+      // this.mouseMovement += new Vector2(event.movementX, event.movementY).length();
+      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.currentPanoramaGroup) {
+          let toPID: number;
+          if (this.onScreenDetectRadius > 0 && this.view.camera) {
+            toPID = this.currentPanoramaGroup.intersectIndicatorsOnScreen(
+              new THREE.Vector2(x, y),
+              this.onScreenDetectRadius,
+              { screenWidth: clientWidth, screenHeight: clientHeight },
+              this.view.camera,
+            );
+          } else {
+            toPID = this.currentPanoramaGroup.intersectIndicators(
+              this.raycaster.ray.origin,
+              this.raycaster.ray.direction,
+            );
+          }
+          if (toPID > -1) {
+            this.emit(
+              Events.PANORAMA_HOVER,
+              toPID,
+              this.currentPanoramaGroup.getIndicatorPosition(toPID),
+            );
+          }
+        }
+      }
+    };
+    this.mouseUpHandler = async (event: PointerEvent): Promise<void> => {
+      // console.info('## mouseup : ', event);
+      // if (this.touches.state === 'idle') return;
+      if (event.pointerType !== 'mouse') return;
+      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.currentPanoramaGroup) {
+            let toPID: number;
+            if (this.view.camera) {
+              toPID = this.currentPanoramaGroup.intersectIndicatorsOnScreen(
+                new THREE.Vector2(x, y),
+                this.onScreenDetectRadius,
+                { screenWidth: clientWidth, screenHeight: clientHeight },
+                this.view.camera,
+              );
+            } else {
+              toPID = this.currentPanoramaGroup.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 Vector3(-0.8, 0.6, 0.0) });
+              if (event.button === 0 && this.moveOnClick && this.currentPanoramaGroup.currentPanoramaID !== toPID) {
+                await this.moveToPanorama(toPID, { interval: 1000, showModel: true, fadeInOut: false });
+              }
+            }
+          }
+        }
+      }
+      this.touches.state = 'idle';
+    };
+    this.mouseWheelHandler = (event: WheelEvent): void => {
+      event.preventDefault();
+      if (!(this.view.camera instanceof THREE.PerspectiveCamera)) return;
+      this.view.camera.fov = Math.min(
+        Math.max(this.view.camera.fov - Math.sign(event.deltaY) * 1.5, this.fovRange.min),
+        this.fovRange.max,
+      );
+      this.view.camera.updateProjectionMatrix();
+      this.orbitControl.rotateSpeed = -this.view.camera.fov / 360 * this.rotateSpeed;
+      this.renderThisFrame();
+    };
+
+    this.moveOnClick = true;
+    this.onScreenDetectRadius = 1000;
+
+    this.rotateSpeed = 1;
+
+    if (view) {
+      this.bindView(view);
+      this.renderThisFrame();
+    }
+
+    if (panoramaGroups) {
+      if (panoramaGroups instanceof PanoramaGroup) {
+        this.panoramaGroups = [panoramaGroups];
+      } else {
+        this.panoramaGroups = panoramaGroups;
+      }
+    } else {
+      this.panoramaGroups = [];
+    }
+    if (this.panoramaGroups.length > 0) {
+      [this.currentPanoramaGroup] = this.panoramaGroups;
+    }
+    this.pid2GroupMap = new Map();
+
+    const modelVisible = (undefined === showModel || showModel === true || this.showModel);
+    this.panoramaGroups.forEach((panoGroup: PanoramaGroup) => {
+      const modelMesh = PanoramaController.getModelMesh(panoGroup);
+      this.setModelAppearance(panoGroup.modelElement!, modelVisible, undefined, modelMesh);
+    });
+
+    // this.mouseMovement = 0;
+
+    this.isAnimating = false;
+
+    this.rotationLocks = {
+      lockAzimuth: false,
+      lockPolar: false,
+      centralAzimuth: 0,
+      centralPolar: Math.PI / 2,
+      azimuthRange: Math.PI,
+      polarRange: Math.PI / 2,
+    };
+
+    this.fovRange = { min: 60, max: 90 };
+
+    this.raycaster = new THREE.Raycaster();
+  }
+
+  public async setViewConfiguration(hidePanoramas: boolean, showModel: boolean): Promise<void> {
+    this.hidePanoramas = hidePanoramas;
+    this.showModel = showModel;
+    if (this.currentPanoramaGroup) {
+      const pano = await this.currentPanoramaGroup.getPanoramaByPID(this.currentPanoramaGroup.currentPanoramaID);
+      if (pano) {
+        pano.addViewConfiguration({
+          targetView: this.view,
+          showSkyBox: !hidePanoramas,
+        });
+      }
+      this.setModelAppearance(this.currentPanoramaGroup.modelElement!, showModel);
+    }
+  }
+
+  public bindElement(element: Element | Element[]): void {
+    if (element instanceof Array) {
+      element.forEach((e) => { this.bindElement(e); });
+    } else {
+      if (!this.elements) {
+        this.elements = new Set();
+      }
+      this.elements.add(element);
+      // if (element.intersectables && element.intersectables.length) {
+      //   element.intersectables.forEach((object) => {
+      //     this.intersectables.push({ object, parent: element });
+      //   });
+      // } else {
+      //   element.children.filter((c) => (c as Mesh).isMesh).forEach((object) => {
+      //     this.intersectables.push({ object, parent: element });
+      //   });
+      // }
+    }
+  }
+
+  public unbindElement(element: Element | Element[]): void {
+    if (element instanceof Array) {
+      element.forEach((e) => { this.unbindElement(e); });
+    } else if (this.elements && this.elements.has(element)) {
+      this.elements.delete(element);
+    }
+  }
+
+  /**
+   * 添加全景图组
+   * @param panoramaGroups 新增加的全景图组（单个或数组）
+   * @parama showModel 可选，是否一开始就显示模型
+   */
+  public addPanoramaGroups(panoramaGroups: PanoramaGroup|PanoramaGroup[], showModel?: boolean): void {
+    let groupArray: PanoramaGroup[];
+    if (panoramaGroups instanceof PanoramaGroup) {
+      groupArray = [panoramaGroups as PanoramaGroup];
+    } else {
+      groupArray = panoramaGroups as PanoramaGroup[];
+    }
+    this.panoramaGroups.push(...groupArray);
+
+    const modelVisible = (undefined === showModel || showModel === true || this.showModel);
+    groupArray.forEach((panoGroup: PanoramaGroup) => {
+      const modelMesh = PanoramaController.getModelMesh(panoGroup);
+      this.setModelAppearance(panoGroup.modelElement!, modelVisible, undefined, modelMesh);
+    });
+  }
+
+  public removePanoramaGroup(panoramaGroup: PanoramaGroup): boolean {
+    const index = this.panoramaGroups.indexOf(panoramaGroup);
+    if (index >= 0) {
+      this.panoramaGroups = this.panoramaGroups.slice(0, index).concat(this.panoramaGroups.slice(index + 1));
+      if (panoramaGroup === this.currentPanoramaGroup) {
+        this.currentPanoramaGroup = undefined;
+      }
+      return true;
+    }
+    return false;
+  }
+
+  protected renderThisFrame(): void {
+    if (!this.renderFrame) {
+      this.renderFrame = true;
+    }
+  }
+
+  private static getModelMeshInElement(e: NS_THREE.Object3D): NS_THREE.Mesh|undefined {
+    let ret;
+    const { THREE } = Externals.getInstance();
+    if (e instanceof THREE.Mesh) return e;
+    if (e) {
+      e.traverse((obj) => {
+        if (obj instanceof THREE.Mesh) {
+          ret = obj as NS_THREE.Mesh;
+        }
+      });
+    }
+    return ret;
+  }
+
+  private static getModelMesh(panoGroup: PanoramaGroup): NS_THREE.Mesh|undefined {
+    if (panoGroup && panoGroup.modelElement) { // TODO: Multiple children mesh?
+      return PanoramaController.getModelMeshInElement(panoGroup.modelElement);
+    }
+    return undefined;
+  }
+
+  bindView(view: View): void {
+    if (!view.camera || !view.renderer) {
+      throw new Error('No Camera or Renderer found in view');
+    }
+    this.view = view;
+    const { THREE } = Externals.getInstance();
+
+    this.setTouchEnabled(true);
+
+    this.orbitControl = new OrbitControls(view.camera as NS_THREE.PerspectiveCamera, view.container);
+    this.orbitControl.addEventListener('start', () => {
+      this.renderThisFrame();
+    });
+    this.orbitControl.addEventListener('end', () => {
+      this.renderThisFrame();
+    });
+    this.orbitControl.addEventListener('change', () => {
+      this.emit(Events.PANORAMA_CAMERA_CHANGED, view.camera!.position, view.camera!.quaternion, this);
+      const { lockAzimuth, lockPolar } = this.rotationLocks;
+      let vFov = 0;
+      let hFov = 0;
+      if (this.orbitControl.object instanceof THREE.PerspectiveCamera) {
+        const { clientWidth, clientHeight } = this.view.container;
+        vFov = this.orbitControl.object.fov / 180 * Math.PI;
+        hFov = vFov * clientWidth / clientHeight;
+      }
+      if (lockAzimuth) {
+        const { centralAzimuth, azimuthRange } = this.rotationLocks;
+        const azimuth = this.orbitControl.getAzimuthalAngle();
+        let minAzimuth = centralAzimuth - azimuthRange / 2 + hFov / 2;
+        let maxAzimuth = centralAzimuth + azimuthRange / 2 - hFov / 2;
+        if (minAzimuth > Math.PI) minAzimuth -= 2 * Math.PI;
+        if (maxAzimuth < -Math.PI) maxAzimuth += 2 * Math.PI;
+        if (minAzimuth > maxAzimuth) {
+          this.orbitControl.minAzimuthAngle = centralAzimuth;
+          this.orbitControl.maxAzimuthAngle = centralAzimuth;
+        } else {
+          if (minAzimuth < -Math.PI) minAzimuth += 2 * Math.PI;
+          if (maxAzimuth > Math.PI) maxAzimuth -= 2 * Math.PI;
+          if (minAzimuth > maxAzimuth) {
+            if (Math.abs(azimuth) > Math.PI - ROTATION_LOCK_BOUNDARY) {
+              this.orbitControl.minAzimuthAngle = -Infinity;
+              this.orbitControl.maxAzimuthAngle = Infinity;
+            } else if (azimuth > 0) {
+              this.orbitControl.minAzimuthAngle = minAzimuth;
+              this.orbitControl.maxAzimuthAngle = Infinity;
+            } else if (azimuth < 0) {
+              this.orbitControl.minAzimuthAngle = -Infinity;
+              this.orbitControl.maxAzimuthAngle = maxAzimuth;
+            }
+          } else {
+            this.orbitControl.minAzimuthAngle = minAzimuth;
+            this.orbitControl.maxAzimuthAngle = maxAzimuth;
+          }
+        }
+      }
+      if (lockPolar) {
+        const { centralPolar, polarRange } = this.rotationLocks;
+        const polar = this.orbitControl.getPolarAngle();
+        let minPolar = centralPolar - polarRange / 2 + vFov / 2;
+        let maxPolar = centralPolar + polarRange / 2 - vFov / 2;
+        if (minPolar > Math.PI) minPolar -= Math.PI;
+        if (maxPolar < 0) maxPolar += Math.PI;
+        if (minPolar > maxPolar) {
+          this.orbitControl.minPolarAngle = centralPolar;
+          this.orbitControl.maxPolarAngle = centralPolar;
+        } else {
+          if (minPolar < 0) minPolar += Math.PI;
+          if (maxPolar > Math.PI) maxPolar -= Math.PI;
+          if (minPolar > maxPolar) {
+            if (Math.abs(polar - Math.PI / 2) > Math.PI / 2 - ROTATION_LOCK_BOUNDARY) {
+              this.orbitControl.minPolarAngle = -Infinity;
+              this.orbitControl.maxPolarAngle = Infinity;
+            } else if (polar > 0) {
+              this.orbitControl.minPolarAngle = minPolar;
+              this.orbitControl.maxPolarAngle = Infinity;
+            } else if (polar < 0) {
+              this.orbitControl.minPolarAngle = -Infinity;
+              this.orbitControl.maxPolarAngle = maxPolar;
+            }
+          } else {
+            this.orbitControl.minPolarAngle = minPolar;
+            this.orbitControl.maxPolarAngle = maxPolar;
+          }
+        }
+      }
+      this.renderThisFrame();
+    });
+
+    this.orbitControl.rotateSpeed = PanoramaController.RotateSpeed;
+    if (view.camera && view.camera instanceof THREE.PerspectiveCamera) {
+      const { fov } = view.camera as NS_THREE.PerspectiveCamera;
+      this.orbitControl.rotateSpeed = -fov / 360 * this.rotateSpeed;
+    }
+
+    this.setMouseControls(
+      { LEFT: THREE.MOUSE.ROTATE, MIDDLE: THREE.MOUSE.DOLLY, RIGHT: THREE.MOUSE.PAN },
+    );
+    this.setTouchControls({ ONE: THREE.TOUCH.ROTATE, TWO: THREE.TOUCH.PAN });
+
+    this.setDampingEnabled(true);
+    this.setDampingFactor(0.25);
+    this.setKeysEnabled(false);
+    this.setRotateEnabled(true);
+    this.setPanEnabled(false);
+    this.setZoomEnabled(false);
+    this.orbitControl.update();
+
+    this.setEnabled(true);
+
+    this.renderThisFrame();
+  }
+
+  async unbind(): Promise<void> {
+    super.unbind();
+    if (this.orbitControl) this.orbitControl.dispose();
+    await this.dispose();
+  }
+
+  /**
+   * @ignore
+   */
+  update(): boolean {
+    if (this.orbitControl && this.orbitControl.enabled) this.orbitControl.update();
+
+    let result = true;
+    if (!this.renderFrame) result = false;
+    this.renderFrame = false;
+    return result;
+  }
+
+  /**
+   * 设置是否启用该控制器
+   * @param value 开关值
+   */
+  public setEnabled(value: boolean): void {
+    if (this.orbitControl) this.orbitControl.enabled = value;
+  }
+
+  /**
+   * 设置键盘控制启用
+   * @param value 是否启用键盘控制
+   */
+  public setKeysEnabled(value: boolean): void {
+    if (!this.orbitControl) return;
+    this.orbitControl.enableKeys = value;
+  }
+
+  /**
+   * 使能/禁用 鼠标点击
+   * @param value 使能还是禁用
+   */
+  public setMouseClickEnabled(enable: boolean): boolean {
+    if (!this.view.renderer) return false;
+    const { THREE } = Externals.getInstance();
+    if (this.view.camera && this.view.camera instanceof THREE.Camera) {
+      if (enable) {
+        this.view.container.addEventListener('pointerup', this.mouseUpHandler, false);
+        this.view.container.addEventListener('pointermove', this.mouseMoveHandler, false);
+        this.view.container.addEventListener('pointerdown', this.mouseDownHandler, false);
+        this.view.container.addEventListener('wheel', this.mouseWheelHandler, false);
+      } else {
+        this.view.container.removeEventListener('pointerup', this.mouseUpHandler, false);
+        this.view.container.removeEventListener('pointermove', this.mouseMoveHandler, false);
+        this.view.container.removeEventListener('pointerdown', this.mouseDownHandler, false);
+        this.view.container.removeEventListener('wheel', this.mouseWheelHandler, false);
+      }
+    }
+    return true;
+  }
+
+  public setTouchEnabled(enable: boolean): boolean {
+    if (!this.view.renderer) return false;
+    const { THREE } = Externals.getInstance();
+    if (this.view.camera && this.view.camera instanceof THREE.Camera) {
+      if (enable) {
+        this.view.container.addEventListener('touchstart', this.touchStartHandler, false);
+        this.view.container.addEventListener('touchmove', this.touchMoveHandler, false);
+        this.view.container.addEventListener('touchend', this.touchEndHandler, false);
+        this.view.container.addEventListener('touchcancel', this.touchEndHandler, false);
+      } else {
+        this.view.container.removeEventListener('touchstart', this.touchStartHandler);
+        this.view.container.removeEventListener('touchmove', this.touchMoveHandler);
+        this.view.container.removeEventListener('touchend', this.touchEndHandler);
+        this.view.container.removeEventListener('touchcancel', this.touchEndHandler);
+      }
+    }
+    return true;
+  }
+
+  /**
+   * 设置是否启用惯性
+   * @param value 开关值
+   */
+  public setDampingEnabled(value: boolean): void {
+    if (!this.orbitControl) return;
+    this.orbitControl.enableDamping = value;
+  }
+
+  /**
+   * 设置是否启用旋转功能
+   * @param value 开关值
+   */
+  public setRotateEnabled(value: boolean): void {
+    if (!this.orbitControl) return;
+    this.orbitControl.enableRotate = value;
+  }
+
+  /**
+   * 设置是否启用平移功能
+   * @param value 开关值
+   */
+  public setPanEnabled(value: boolean): void {
+    if (!this.orbitControl) return;
+    this.orbitControl.enablePan = value;
+  }
+
+  /**
+   * 设置是否启用缩放功能
+   * @param value 开关值
+   */
+  public setZoomEnabled(value: boolean): void {
+    if (!this.orbitControl) return;
+    this.orbitControl.enableZoom = value;
+  }
+
+  /**
+   * 设置缩放
+   * @param zoom 缩放比例值
+   */
+  public setZoom(zoom: number): void {
+    if (!this.orbitControl) return;
+    const { THREE } = Externals.getInstance();
+    if (
+      !(this.view.camera! instanceof THREE.PerspectiveCamera)
+      && !(this.view.camera! instanceof THREE.OrthographicCamera)
+    ) throw new Error('Cannot set zoom for camera');
+    this.view.camera.zoom = zoom;
+    this.view.camera.updateProjectionMatrix();
+    this.renderFrame = true;
+  }
+
+  /**
+   * 设置FOV, 不可以超过setFOVRange所设置的范围.
+   * @param fov 垂直方向视场角
+   */
+  public setFOV(fov: number): void {
+    const { THREE } = Externals.getInstance();
+    if (!this.orbitControl || !(this.view.camera! instanceof THREE.PerspectiveCamera)) return;
+    const targetFov = Math.min(Math.max(fov, this.fovRange.min), this.fovRange.max);
+    this.view.camera.fov = targetFov;
+    this.view.camera.updateProjectionMatrix();
+    this.orbitControl.rotateSpeed = -targetFov / 360 * this.rotateSpeed;
+    this.renderFrame = true;
+  }
+
+  /**
+   * 设置FOV范围, 默认为[60, 90]
+   * @param min 垂直方向视场角最小值
+   * @param max 垂直方向视场角最大值
+   */
+  public setFOVRange(min: number, max: number): void {
+    this.fovRange.min = min;
+    this.fovRange.max = max;
+    const { THREE } = Externals.getInstance();
+    if (!this.orbitControl || !(this.view.camera! instanceof THREE.PerspectiveCamera)) return;
+    this.setFOV(this.view.camera.fov);
+  }
+
+  /**
+   * 设置惯性阻尼
+   * @param value 衰减值
+   */
+  public setDampingFactor(value: number): void {
+    if (!this.orbitControl) return;
+    this.orbitControl.dampingFactor = value;
+  }
+
+  /**
+   * 设置位移速度
+   * @param value 位移速度
+   */
+  public setPanSpeed(value: number): void {
+    if (!this.orbitControl) return;
+    this.orbitControl.panSpeed = value;
+  }
+
+  /**
+   * 设置旋转速度
+   * @param value 旋转速度
+   */
+  // public setRotateSpeed(value: number): void {
+  //   if (!this.orbitControl) return;
+  //   this.orbitControl.rotateSpeed = value;
+  // }
+
+  /**
+   * 设置触摸操作模式
+   * @param touches 触摸配置
+   */
+  public setTouchControls(touches: { ONE: NS_THREE.TOUCH; TWO: NS_THREE.TOUCH }): void {
+    if (!this.orbitControl) return;
+    this.orbitControl.touches = touches;
+  }
+
+  /**
+   * 设置鼠标操作模式
+   * @param mouseButtons 鼠标按键配置
+   */
+  public setMouseControls(
+    mouseButtons: { LEFT: NS_THREE.MOUSE; MIDDLE: NS_THREE.MOUSE; RIGHT: NS_THREE.MOUSE },
+  ): void {
+    if (!this.orbitControl) return;
+    this.orbitControl.mouseButtons = mouseButtons;
+  }
+
+  /**
+   * 设置控制中心点
+   * @param x 世界坐标X
+   * @param y 世界坐标Y
+   * @param z 世界坐标Z
+   */
+  public setTarget(x: number, y: number, z: number): void {
+    if (!this.orbitControl) return;
+    this.orbitControl.target.set(x, y, z);
+    this.orbitControl.update();
+  }
+
+  /**
+   * 设置摄像机观察方向和位置
+   * @param position 摄像机所在位置
+   * @param lookAt 观察目标点，同时也是[[OrbitControls]]的旋转中心
+   */
+  public setCameraPose(position: [number, number, number], lookAt: [number, number, number], useLookAt = true): void {
+    if (this.view.camera) {
+      this.view.camera.position.set(...position);
+      // this.view.camera.lookAt(...lookAt);
+    }
+    if (useLookAt) this.setTarget(...lookAt);
+    // console.log(lookAt);
+    this.renderThisFrame();
+  }
+
+  private async getPanoramaOfPID(pid: number):
+  Promise<{
+    pano?: Panorama;
+    panoramaGroup?: PanoramaGroup;
+  }> {
+    const panoGroup = this.pid2GroupMap.get(pid);
+    if (panoGroup) {
+      const pano = await panoGroup.getPanoramaByPID(pid);
+      return { pano, panoramaGroup: panoGroup };
+    }
+    for (let i = 0; i < this.panoramaGroups.length; i += 1) {
+      const panoramaGroup = this.panoramaGroups[i];
+      // eslint-disable-next-line no-await-in-loop
+      const pano = await panoramaGroup.getPanoramaByPID(pid);
+      if (pano) {
+        this.pid2GroupMap.set(pid, panoramaGroup);
+        return { pano, panoramaGroup };
+      }
+    }
+    return {};
+  }
+
+  private async preloadCubeTexturesOfPIDs(pids: number[], waitForReadyCount: number,
+    recycleIntermediateTextures?: boolean[]): Promise<NS_THREE.CubeTexture[]> {
+    const panos = await Promise.all(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,
+    );
+  }
+
+  /**
+   * 设置摄像机按指定视线方向看向目标位置
+   * @param target 目标位置
+   * @param sightDirection 可选，视线方向，不设置则默认以摄像机当前方向
+   */
+  public setCameraLookAt(target: NS_THREE.Vector3, sightDirection?: NS_THREE.Vector3): void {
+    const { x, y, z } = target;
+    const { THREE } = Externals.getInstance();
+    let direction;
+    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(PanoramaController.DirectionVectorScalar)
+      .add(target);
+    this.setCameraPose([p0.x, p0.y, p0.z], [x, y, z]);
+  }
+
+  /**
+   * 仅显示指定全景图，但不操作摄像机
+   * @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<Panorama|undefined> {
+    const {
+      lookDirection, target, showModel, preInitPanoramasStrategy,
+    } = options || {};
+    const { pano, panoramaGroup } = await this.getPanoramaOfPID(pid);
+    if (panoramaGroup) {
+      if (this.currentPanoramaGroup !== panoramaGroup) this.panoramaGroupChanged = true;
+
+      this.currentPanoramaGroup = panoramaGroup;
+      if (panoramaGroup.modelElement) {
+        this.setModelAppearance(panoramaGroup.modelElement, false, undefined);
+      }
+      if (preInitPanoramasStrategy) {
+        panoramaGroup.initializePanoramasIfNecessary(preInitPanoramasStrategy);
+      }
+      panoramaGroup.panoramaIDsAround(pid);
+      // const allPanos = await panoramaGroup.allPanoramas();
+      // // console.info(`#Async# showPanorama : allPanos(${allPanos!.length})=`, allPanos);
+      // allPanos.forEach((panorama: Panorama) => {
+      //   panorama.addViewConfiguration({
+      //     targetView: this.view,
+      //     showBorder: false,
+      //     showSkyBox: false,
+      //   });
+      // });
+      // if (aroundPIDs) {
+      //   const panoramas = await Promise.all(aroundPIDs.map((panoID: number) => panoramaGroup.getPanoramaByPID(panoID)));
+      //   console.info('#Async# showPanorama : panoramas=', panoramas);
+      //   panoramas.forEach((panorama: Panorama) => {
+      //     panorama.addViewConfiguration({
+      //       targetView: this.view,
+      //       showBorder: false,
+      //       showSkyBox: false,
+      //     });
+      //   });
+      // }
+
+      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));
+        }
+        if (!pano.legacyMode) {
+          const tiles = pano.getIntersectedTiles(this.view.camera);
+          await panoramaGroup.presentPanoramaAround(pid, tiles.hdTiles, tiles.ldTiles, this.view);
+        } else {
+          await panoramaGroup.presentPanoramaAround(pid, [], [], this.view);
+        }
+        pano.addViewConfiguration({
+          targetView: this.view,
+          showBorder: false,
+          showSkyBox: !this.hidePanoramas, // /true,
+        });
+
+        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 textures: NS_THREE.CubeTexture[] = await CubeTextureCache.sharedInstance.preloadCubeTextures(
+            [pano.textureURLs], 1,
+          );
+          [uniforms.pano0Map.value, uniforms.pano1Map.value] = [textures[0], textures[0]];
+          this.setModelAppearance(panoramaGroup.modelElement!, true, material);
+        }
+      }
+      return pano;
+    }
+    return undefined;
+  }
+
+  /**
+   * 从指定全景图中心以指定视线方向观看
+   * @param pid 全景图PID
+   * @param lookDirection 视线方向
+   * @parama showModel 可选，是否一开始就显示模型
+   * @param preInitPanoramasStrategy 可选，预创建全景对象的顺序策略，详见[PanoramaGroup]的【initializePanoramasIfNecessary]方法说明
+   */
+  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 });
+    this.emit(Events.MOVE_TO_PANORAMA, pid, pano ? pano.position : null, this.panoramaGroupChanged);
+    this.panoramaGroupChanged = false;
+  }
+
+  /**
+   * 从指定全景图中心看向指定位置
+   * @param pid 全景图PID
+   * @param target 目标位置
+   * @parama showModel 可选，是否一开始就显示模型
+   * @param preInitPanoramasStrategy 可选，预创建全景对象的顺序策略，详见[PanoramaGroup]的【initializePanoramasIfNecessary]方法说明
+   */
+  public async lookFromPanoramaTo(pid: number,
+    target: NS_THREE.Vector3,
+    showModel?: boolean,
+    preInitPanoramasStrategy?: 'all'|number|number[]): Promise<void> {
+    const pano = await this.showPanorama(pid, { target, showModel, preInitPanoramasStrategy });
+    this.emit(Events.MOVE_TO_PANORAMA, pid, pano ? pano.position : null, this.panoramaGroupChanged);
+    this.panoramaGroupChanged = false;
+  }
+
+  public static createModelUniforms(): { [uniform: string]: NS_THREE.IUniform } {
+    const { THREE } = Externals.getInstance();
+    const modelUniforms = {
+      weight0: {
+        type: 'f',
+        value: 0,
+      },
+      weight1: {
+        type: 'f',
+        value: 0,
+      },
+      // 源全景图立方体贴图
+      pano0Map: {
+        type: 't',
+        value: null,
+      },
+      // 源全景图位置
+      pano0Position: {
+        type: 'v3',
+        value: new THREE.Vector3(),
+      },
+      // 源全景图世界变换矩阵
+      pano0Matrix: {
+        type: 'm4',
+        value: new THREE.Matrix4(),
+      },
+      // 目标全景图立方体贴图
+      pano1Map: {
+        type: 't',
+        value: null,
+      },
+      // 目标全景图位置
+      pano1Position: {
+        type: 'v3',
+        value: new THREE.Vector3(),
+      },
+      // 目标全景图世界变换矩阵
+      pano1Matrix: {
+        type: 'm4',
+        value: new THREE.Matrix4(),
+      },
+    };
+    return modelUniforms;
+  }
+
+  private static createInstantTranslationUniforms(): { [uniform: string]: NS_THREE.IUniform } {
+    const { THREE } = Externals.getInstance();
+    const modelUniforms = {
+      weight0: {
+        type: 'f',
+        value: 0,
+      },
+      weight1: {
+        type: 'f',
+        value: 0,
+      },
+      // 源全景图立方体贴图
+      pano0Map: {
+        type: 't',
+        value: null,
+      },
+      pano0Position: {
+        type: 'v3',
+        value: new THREE.Vector3(),
+      },
+      // 源全景图世界变换矩阵
+      pano0Matrix: {
+        type: 'm4',
+        value: new THREE.Matrix4(),
+      },
+      // 目标全景图立方体贴图
+      pano1Map: {
+        type: 't',
+        value: null,
+      },
+      // 目标全景图位置
+      pano1Position: {
+        type: 'v3',
+        value: new THREE.Vector3(),
+      },
+      // 目标全景图世界变换矩阵
+      pano1Matrix: {
+        type: 'm4',
+        value: new THREE.Matrix4(),
+      },
+      matrixT: {
+        type: 'm4',
+        value: new THREE.Matrix4(),
+      },
+    };
+    return modelUniforms;
+  }
+
+  private getModelMaterial(): NS_THREE.ShaderMaterial {
+    if (this.modelMaterial) {
+      return this.modelMaterial;
+    }
+    const { THREE } = Externals.getInstance();
+    const uniforms = PanoramaController.createModelUniforms();
+    this.modelMaterial = new THREE.ShaderMaterial({
+      side: THREE.DoubleSide,
+      vertexShader: PanoramaController.getModelVS(),
+      fragmentShader: PanoramaController.getModelFS(),
+      uniforms,
+      name: 'modelMaterial',
+    });
+    return this.modelMaterial;
+  }
+
+  private getInstantTranslationMaterial(): NS_THREE.ShaderMaterial {
+    if (this.instantTranslationMaterial) {
+      return this.instantTranslationMaterial;
+    }
+    const { THREE } = Externals.getInstance();
+    const uniforms = PanoramaController.createInstantTranslationUniforms();
+    this.instantTranslationMaterial = new THREE.ShaderMaterial({
+      side: THREE.DoubleSide,
+      vertexShader: PanoramaController.getInstantTranslationVS(),
+      fragmentShader: PanoramaController.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) {
+      if (modelElement instanceof FloorModel) {
+        (modelElement as FloorModel).addViewConfiguration({
+          targetView: this.view,
+          visible,
+          meshMaterial,
+        });
+      } else {
+        modelElement.visible = visible;
+        let mesh = modelMesh;
+        if (!mesh) {
+          mesh = PanoramaController.getModelMeshInElement(modelElement);
+        }
+        if (mesh && meshMaterial) {
+          mesh.material = meshMaterial;
+        }
+      }
+    }
+  }
+
+  /**
+   * 配置controller是否开启点击移动
+   * @param value 是否开启点击移动
+   */
+  public setMoveOnClickEnabled(value: boolean): void {
+    this.moveOnClick = value;
+  }
+
+  /**
+   * 移动到指定的全景点处
+   * @param toPID 目标全景点ID
+   * @param interval 可选，过渡所用时长
+   * @param easing 可选，插值函数
+   * @param fadeInOut 可选，是否使用淡出淡入变换
+   * @param toDirection 可选，到达目的点时要转到的视线方向，
+   *    若不设置则默认以从起始点到目的点的连线为最终视线方向
+   * @param lookAtTarget 可选，到达目的点时视线看向的位置，优先于toDirection
+   * @param fov 可选，视场角度数
+   * @param rotateDelays 可选，旋转时的延迟时间
+   */
+  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;
+      rotateDelays?: number|number[];
+    }): 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,
+      rotateDelays: p.rotateDelays,
+    });
+  }
+
+  /**
+   * 移动到指定的全景点处
+   * 此方法与[[moveToPanorama]]的不同点在于通过Promise机制实现同步阻塞，
+   * 在前一个Translation未完成时发起的Translation会自动被阻塞到前一个完成时再执行
+   * @param toPID 目标全景点ID
+   * @param interval 可选，过渡所用时长
+   * @param easing 可选，插值函数
+   * @param fadeInOut 可选，是否使用淡出淡入变换
+   * @param toDirection 可选，到达目的点时要转到的视线方向，
+   *  若不设置则默认以从起始点到目的点的连线为最终视线方向
+   * @param lookAtTarget 可选，到达目的点时视线看向的位置，优先于toDirection
+   * @param fov 可选，视场角度数
+   * @param rotateDelays 可选，旋转时的延迟时间
+   */
+  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;
+      rotateDelays?: number|number[];
+    }): 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,
+      rotateDelays: p.rotateDelays,
+    });
+  }
+
+  /**
+   * 摄像机按指定路径运动，并在全景点之间产生渐入渐出效果
+   * @param pathPIDs 目标全景点序列
+   * @param queueIfBusy 可选，指示当当前有动画在进行中时，是把此次动作排队还是直接放弃
+   * @param showModel 可选 是否在移动完成后也保持模型显示（用于遮挡路径）
+   * @param intervals 可选，若为数组则依次是每一段路径所花费的时间间隔，若是一个数则全都用该时间间隔
+   * @param fovs 可选，若为数组则依次是每一段路径结束时的视场角，若是一个数则全都用该视场角
+   * @param toDirections 可选，若为数组则依次是每一段路径结束点的视线方向，若是单一Vector3对象则全用此视线方向
+   * @param lookAtTargets 可选，若为数组则依次是每一段路径所看向的位置，若是单一Vector3对象则始终看向此位置
+   * toDirections与lookAtTargets最多只能有一个，如果同时传入了则只以lookAtTargets为准
+   * @param rotateDelays 可选，旋转时的延迟时间
+   * @param easings 可选，若为数组则依次是每一段路径的动画插值函数，
+   * 若是单一{(k: number): number}对象则全用此插值函数
+   * @example
+   * ``` typescript
+   * panoCtl = new PanoramaController(view, panoMgr, floorModel);
+   * panoCtl.setMouseClickEnabled(true);
+   * stage.bindController(panoCtl);
+   * panoCtl.lookFromPanorama(0, new Vector3(-1, 0, 0));
+   * panoCtl.moveInPath([0, 68, 69, 68, 0], {
+   *    queueIfBusy: true,
+   *    intervals: [200, 1000, 2000, 1000, 3000],
+   *    toDirections: [
+   *      new Vector3(-1, 0, 0),
+   *      new Vector3(-0.8, 0.6, 0),
+   *      new Vector3(-0.6, 0.8, 0),
+   *      new Vector3(0, 0.8, 0),
+   *      new Vector3(0.6, 0, 0),
+   *    ],
+   * });
+   */
+  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 path: number[] = pathPIDs;
+
+    const pathPositions: NS_THREE.Vector3[] = [];
+    const inPathPanos = await Promise.all(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 = (undefined === showModel || showModel === true || this.showModel);
+
+    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?: Panorama;
+      panoramaGroup?: PanoramaGroup;
+      modelMesh?: NS_THREE.Mesh;
+    };
+    let to: {
+      pano?: Panorama;
+      panoramaGroup?: PanoramaGroup;
+      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 () => {
+        // console.log('#PanoCtrl# beforeAllMoves');
+        fromPID = this.currentPanoramaGroup ? this.currentPanoramaGroup.currentPanoramaID : -1;
+
+        material = this.getModelMaterial();
+        uniforms = material.uniforms as { [uniform: string]: NS_THREE.IUniform };
+
+        // this.getModelMesh();
+        // if (this.modelMesh) {
+        //   previousMaterial = this.modelMesh.material;
+        //   this.setModelAppearance(true, material);
+        // }
+        // this.panoramaGroup.setBoundBoxAppearance(material);
+        // this.panoramaGroup.addGroupViewConfiguration({
+        //   targetView: this.view,
+        //   showBoundBox: true,
+        // });// /!!! master
+        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,
+      ): Promise<boolean> => {
+        // console.log(`#PanoCtrl# onOneMoveStart(${index}`);
+        // console.log(`#PanoCtrl# Will moveToPanorama from #${fromPID} to #${toPID}`);
+        toPID = path[index];
+        from = await this.getPanoramaOfPID(fromPID);
+        to = await this.getPanoramaOfPID(toPID);
+
+        const { THREE } = Externals.getInstance();
+
+        // console.log(`#PanoCtrl# onOneMoveStart : from(${fromPID})=${from}, to(${toPID})=${to}`);
+        if (!from.pano || !to.pano || !from.panoramaGroup || !to.panoramaGroup) return false;
+        from.modelMesh = PanoramaController.getModelMesh(from.panoramaGroup);
+        to.modelMesh = PanoramaController.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]);
+          }
+        }
+        await this.preloadCubeTexturesOfPIDs(
+          preloadPIDs,
+          preloadPIDs.length,
+          preloadPIDs.map((pid: number) => (pid === fromPID)),
+        );// #TiledCube# Keep LD cubeTexture
+        this.emit(Events.WILL_MOVE_TO_PANORAMA, toPID, to.pano ? to.pano.position : null);
+
+        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 };
+          // /!!!from.panoramaGroup.dispose(from.pano.pid);
+          // TODO: Dispose useless PanoramaGroup(s) after all moves,
+          // and initialize necessary PanoramaGroup(s) before all moves
+        } 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);
+        }
+
+        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);
+        }
+
+        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,
+            });
+          }
+        });
+        // console.log(`#Async# moveInPath$onOneMoveStart : Hide 'from' pano#${from.pano.pid}`);
+        from.pano.addViewConfiguration({
+          targetView: this.view,
+          showBorder: false,
+          showSkyBox: false,
+        });
+
+        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(invLookAt1.clone().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 textures: NS_THREE.CubeTexture[] = await CubeTextureCache.sharedInstance.preloadCubeTextures(
+          [from.pano.textureURLs, to.pano.textureURLs], 2, [true, false],
+        );
+        [uniforms.pano0Map.value, uniforms.pano1Map.value] = textures;// #TiledCube# Keep LD cubeTexture
+
+        // console.log(`#PanoCtrl# moveToPanorama#onStart from #${fromPID} to #${toPID}`);
+        // if (index === path.length - 1) {
+        //   const nextCamera = new PerspectiveCamera();
+        //   nextCamera.position.copy(eye1);
+        //   nextCamera.lookAt(target1);
+        //   const tiles = to.pano!.getIntersectedTiles(nextCamera);
+        //   // console.info('#TiledCube# getIntersectedTiles:', tiles.hdTiles, tiles.ldTiles);
+        //   to.panoramaGroup.presentPanoramaAround(toPID, tiles.hdTiles, tiles.ldTiles, this.view);
+        //   to.panoramaGroup.presentPanoramaIndicatorsAround(toPID, this.view);
+        // }
+        // console.log(`#PanoCtrl# Translate onStart:toPID=${toPID}`);
+        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) => {
+        // console.log(`#PanoCtrl# onOneMoveComplete : from=${from}, to=${to}`);
+        // if (index === path.length - 1) {
+        //   const tiles = to.pano!.getIntersectedTiles(this.view.camera);
+        //   // console.info('#TiledCube# getIntersectedTiles:', tiles.hdTiles, tiles.ldTiles);
+        //   await to.panoramaGroup!.presentPanoramaAround(toPID, tiles.hdTiles, tiles.ldTiles, this.view);
+        //   to.panoramaGroup!.presentPanoramaIndicatorsAround(toPID, this.view);
+        //   to.pano!.addViewConfiguration({
+        //     targetView: this.view,
+        //     showBorder: false,
+        //     showSkyBox: true,
+        //   });
+        // // const allPanos = await to.panoramaGroup!.allPanoramas();
+        // // console.info('#Async# onOneMoveComplete : Set all panos invisible:', allPanos);
+        // // allPanos.forEach((panorama: Panorama) => {
+        // //   panorama.addViewConfiguration({
+        // //     targetView: this.view,
+        // //     showBorder: false,
+        // //     showSkyBox: false,
+        // //   });
+        // // });
+        // }
+        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);
+
+        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 () => {
+        const tiles = to.pano!.getIntersectedTiles(this.view.camera);
+        // console.info('#TiledCube# getIntersectedTiles:', tiles.hdTiles, tiles.ldTiles);
+        await to.panoramaGroup!.presentPanoramaAround(toPID, tiles.hdTiles, tiles.ldTiles, this.view);
+        // console.log(`#Async# moveInPath$afterAllMoves : Show 'to' pano#${to.pano!.pid}`);
+        to.pano!.addViewConfiguration({
+          targetView: this.view,
+          showBorder: false,
+          showSkyBox: !this.hidePanoramas, // /true,
+        });
+        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.currentPanoramaGroup = 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 整个路径移动结束时的回调
+   * @example
+   * ``` typescript
+   * panoCtl.moveCameraInPath(points, {
+   *  queueIfBusy: false,
+   *  intervals: [200, 1000, 2000, 1000, 3000],
+   *    toDirections: [
+   *      new Vector3(-1, 0, 0),
+   *      new Vector3(-0.8, 0.6, 0),
+   *      new Vector3(-0.6, 0.8, 0),
+   *      new Vector3(0, 0.8, 0),
+   *      new Vector3(0.6, 0, 0),
+   *    ],
+   *  });
+   */
+  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): 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.orbitControl.target.clone();
+        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 NS_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.orbitControl.target.clone().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();
+        // toDirection = this.view.camera.up.clone().cross(toDirection.cross(this.view.camera.up));
+        // toDirection.normalize();
+
+        const fromDirection = this.orbitControl.target.clone().sub(this.view.camera.position).normalize();
+        // const diffQuaternion = new Quaternion().setFromUnitVectors(fromDirection, toDirection);
+
+        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(PanoramaController.DirectionVectorScalar)
+          .add(target1);
+        const target0 = fromPosition;
+        const eye0 = fromDirection.clone()
+          .multiplyScalar(PanoramaController.DirectionVectorScalar)
+          .add(target0);
+
+        let skipPositionTranslate = false;
+        if (onOneMoveStart) {
+          skipPositionTranslate = await onOneMoveStart(iPath, target0, eye0, target1, eye1);
+        }
+
+        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.orbitControl.update();
+              const orbitControlTarget = this.orbitControl.target.clone();
+              const cameraPosition = this.orbitControl.object.position.clone();
+              const originDiff = orbitControlTarget.sub(cameraPosition).normalize();
+              eye = originDiff.multiplyScalar(PanoramaController.DirectionVectorScalar).add(target);
+            }
+
+            this.setCameraPose([eye.x, eye.y, eye.z], [target.x, target.y, target.z]);
+
+            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.orbitControl.update();
+              const orbitControlTarget = this.orbitControl.target.clone();
+              const cameraPosition = this.orbitControl.object.position.clone();
+              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(PanoramaController.DirectionVectorScalar)
+                .add(lookAt);
+              this.setCameraPose([cameraPos.x, cameraPos.y, cameraPos.z], [lookAt.x, lookAt.y, lookAt.z]);
+            }
+
+            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.orbitControl.update();
+              const orbitControlTarget = this.orbitControl.target.clone();
+              const cameraPosition = this.orbitControl.object.position.clone();
+              const originDiff = orbitControlTarget.sub(cameraPosition).normalize();
+              // const toLookAt = freeRotation ? this.orbitControl.target.clone() : toPosition;
+              // console.log(`#PanoCtrl# onComplete: direction=(${toDirection.x}, ${toDirection.y}, ${toDirection.z})`);
+              const cameraPos = (freeRotation ? originDiff : toDirection).clone()
+                .multiplyScalar(PanoramaController.DirectionVectorScalar)
+                .add(toLookAt);
+              this.setCameraPose(
+                [cameraPos.x, cameraPos.y, cameraPos.z],
+                [toLookAt.x, toLookAt.y, toLookAt.z],
+              );
+            }
+
+            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;
+  }
+
+  public unlockRotation(): void {
+    this.rotationLocks = {
+      lockAzimuth: false,
+      lockPolar: false,
+      centralAzimuth: 0,
+      centralPolar: Math.PI / 2,
+      azimuthRange: Math.PI,
+      polarRange: Math.PI / 2,
+    };
+    this.orbitControl.maxAzimuthAngle = Infinity;
+    this.orbitControl.minAzimuthAngle = -Infinity;
+    this.orbitControl.maxPolarAngle = Infinity;
+    this.orbitControl.minPolarAngle = -Infinity;
+  }
+
+  public unlockPolarAngle(): void {
+    Object.assign(this.rotationLocks, {
+      lockPolar: false,
+      centralPolar: Math.PI / 2,
+      polarRange: Math.PI / 2,
+    });
+    this.orbitControl.maxPolarAngle = Infinity;
+    this.orbitControl.minPolarAngle = -Infinity;
+  }
+
+  public lockPolarAngle(range: number): void {
+    if (range < ROTATION_LOCK_BOUNDARY) throw new Error(`Cannot set polar range smaller than ${ROTATION_LOCK_BOUNDARY}`);
+    Object.assign(this.rotationLocks, {
+      lockPolar: true,
+      polarRange: range,
+      centralPolar: this.orbitControl.getPolarAngle(),
+    });
+  }
+
+  public unlockAzimuthalAngle(): void {
+    Object.assign(this.rotationLocks, {
+      lockAzimuth: false,
+      centralAzimuth: 0,
+      azimuthRange: Math.PI,
+    });
+    this.orbitControl.maxAzimuthAngle = Infinity;
+    this.orbitControl.minAzimuthAngle = -Infinity;
+  }
+
+  public lockAzimuthalAngle(range: number): void {
+    if (range < ROTATION_LOCK_BOUNDARY) throw new Error(`Cannot set azimuth range smaller than ${ROTATION_LOCK_BOUNDARY}`);
+    Object.assign(this.rotationLocks, {
+      lockAzimuth: true,
+      azimuthRange: range,
+      centralAzimuth: this.orbitControl.getAzimuthalAngle(),
+    });
+  }
+
+  /**
+   * 获取当前纵向转动角度
+   */
+  public getPolarAngle(): number {
+    return this.orbitControl.getPolarAngle();
+  }
+
+  /**
+   * 获取当前横向转动角度
+   */
+  public getAzimuthalAngle(): number {
+    return this.orbitControl.getAzimuthalAngle();
+  }
+
+  public setCaptureMove(capture: boolean): void {
+    this.captureMove = capture;
+  }
+
+  public setOnScreenDetectRadius(radius: number): void {
+    this.onScreenDetectRadius = radius;
+  }
+
+  /**
+   * 设置纵向转动范围, 最低为0, 最高为Math.PI
+   * @param min 纵向转动范围最小值
+   * @param max 纵向转动范围最大值
+   */
+  public setPolarAngleRange(min: number, max: number): void {
+    this.orbitControl.minPolarAngle = min;
+    this.orbitControl.maxPolarAngle = max;
+  }
+
+  /**
+   * 设置横向转动范围, 最低为-Math.PI, 最高为Math.PI
+   * @param min 横向转动范围最小值
+   * @param max 横向转动范围最大值
+   */
+  public setAzimuthAngleRange(min: number, max: number): void {
+    this.orbitControl.minAzimuthAngle = min;
+    this.orbitControl.maxAzimuthAngle = max;
+  }
+
+  /**
+   * 设置相机的横向旋转
+   * @param radius 目标弧度
+   */
+  public setAzimuthAngle(radius: number): void {
+    const { minAzimuthAngle, maxAzimuthAngle } = this.orbitControl;
+    this.setAzimuthAngleRange(radius, radius + 0.000001);
+    this.orbitControl.update();
+    this.setAzimuthAngleRange(minAzimuthAngle, maxAzimuthAngle);
+    this.orbitControl.update();
+    this.renderThisFrame();
+  }
+
+  /**
+   * 设置相机的纵向旋转
+   * @param radius 目标弧度
+   */
+  public setPolarAngle(radius: number): void {
+    const { minPolarAngle, maxPolarAngle } = this.orbitControl;
+    this.setPolarAngleRange(radius, radius + 0.000001);
+    this.orbitControl.update();
+    this.setPolarAngleRange(minPolarAngle, maxPolarAngle);
+    this.orbitControl.update();
+    this.renderThisFrame();
+  }
+
+  public stopMoving(): void {
+    this.cancelAnimation = false;
+  }
+}
+
+export { PanoramaController };