@aibee/owlly 1.0.25

package/src/owlly/element/tile-panorama-group.ts

@@ -0,0 +1,1314 @@
+import { NS_THREE, Externals } from '../stage/externals';
+import { Element, ElementFrameContext } from './element';
+import { CubeTextureCache } from '../utils/cube-texture-cache';
+import { View } from '../view/view';
+import { EventHub } from '../utils/event-hub';
+import { FloorModel, GroundParameters } from './floor-model';
+import { OwllyEvents, Events } from '../utils/events';
+import { BasicTools } from '../utils/basic-tools';
+import { TilePanorama } from './tile-panorama';
+import { TextureController } from '../controller/texture-controller';
+
+/** 全景点位显示模式
+ * 点位的显示/隐藏状态通过[setIndicatorVisibility]方法设置，
+ * 但是最终是否显示、以何外观显示，则是结合PanoramaGroup在当前View的显示模式来决定
+ * @param AlwaysHide 不论显示/隐藏的设置如何，都不显示
+ * @param AlwaysShow 不论显示/隐藏的设置如何，都不显示。该模式主要用于俯视全局视图用
+ * @param Editing 编辑模式，隐藏/显示状态的点位用不同的外观显示
+ * @param Show 按显示/隐葳的状态设置决定是否显示
+*/
+enum IndicatorDisplayMode {
+  AlwaysHide, // 不论显示/隐藏的设置如何，都不显示
+  AlwaysShow, // 不论显示/隐藏的设置如何，都不显示
+  Editing, // 编辑模式，隐藏/显示状态的点位用不同的外观显示
+  Show, // 按显示/隐葳的状态设置决定是否显示
+}
+
+/**
+ * 全景图组显示状态配置
+ */
+interface TilePanoramaGroupViewConfiguration {
+  targetView: View;
+  hidden?: boolean;
+  /** 可视范围半径，会根据此数值来决定预加载哪些全景图以及显示哪些点位 */
+  visibleRadius?: number;
+  /** 全景点位显示模式 */
+  indicatorDisplayMode?: IndicatorDisplayMode;
+  /** 是否显示模型包围盒，用于全景漫游时 */
+  showBoundBox?: boolean;
+}
+
+interface TilePanoramaData {
+  pid: number;
+  seqID: number;
+  textureURLs: string[];
+  neighbourPanoramaIDs: number[];
+  highTextureURLs?: string[];
+  useLowTextureURLsOnly?: boolean;
+  tiledTextureURLRoot?: string;
+  position?: NS_THREE.Vector3;
+  quaternion?: NS_THREE.Quaternion;
+  legacyMode?: boolean;
+  visible?: boolean;
+  offLineTextureUrls?: string[];
+  offLineTextureLevel?: number;
+}
+
+interface MeshExtended extends NS_THREE.Mesh {
+  hidden?: boolean;
+}
+
+/**
+ * 全景图组
+ * @noInheritDoc
+ */
+class TilePanoramaGroup extends Element {
+  private initialized: boolean;
+
+  private needUpdate: boolean;
+
+  /** 当前全景点 */
+  public currentPanorama: TilePanorama | undefined;
+
+  /** 模型元素 */
+  public modelElement: NS_THREE.Object3D | null;
+
+  private groundParams?: GroundParameters;
+
+  private boundBox: NS_THREE.Mesh | null;
+
+  /** 当前全景点id */
+  public currentPanoramaID: number;
+
+  private panoramaDatas: Map<number, TilePanoramaData>;
+
+  private panoramaMap: Map<number, TilePanorama>;
+
+  private indicatorMeshPrototype: NS_THREE.Mesh;
+
+  private indicatorMaterials: Map<IndicatorDisplayMode, Map<boolean, NS_THREE.Material>>;
+
+  private indicatorShaderUniforms: { [uniform: string]: NS_THREE.IUniform };
+
+  private invisibleIndicatorShaderUniforms: { [uniform: string]: NS_THREE.IUniform };
+
+  private indicatorMap: Map<number, MeshExtended>;
+
+  private inSightIndicators: Array<number>;
+
+  private indicatorVisibilityMap: Map<number, boolean>;
+
+  private indicatorHiddenMap: Map<number, boolean>;
+
+  private indicatorPositionMap: Map<number, NS_THREE.Vector3>;
+
+  private indicatorImageURL: string;
+
+  private indicatorWidth: number;
+
+  private indicatorHeight: number;
+
+  private panoramaCreatingTasks: Map<number, Promise<TilePanorama>>;
+
+  private group: NS_THREE.Group;
+
+  private viewConfigurations: Map<View, TilePanoramaGroupViewConfiguration>;
+
+  private showInvisible: boolean;
+
+  private eventListeners: {
+    onFloorModelLoaded: Function;
+  };
+
+  private maxWorldDistance: number;
+
+  /** 默认有效半径 */
+  public static DefaultVisibleRadius = 10;
+
+  /** 标签显示半径 */
+  public static IndicatorRadius = 0.1;
+
+  /** 标签高度偏移 */
+  public static IndicatorOffsetZ = 0.1;
+
+  /** 全局缩放 */
+  private globalScale: number;
+
+  /**
+   * @param modelElement 模型对象，通常应该是FloorModel
+   * @param groundParams 地面参数对象，若有则在计算地面高度时忽略modelElement，优先使用它
+   * @param indicatorImageURL 显示状态全景点地面标识的图片URL
+   * @param invisibleIndicatorImageURL 编辑模式下隐藏状态全景点地面标识的图片URL
+   * @param indicatorWidth 全景点地面标识宽度
+   * @param indicatorHeight 全景点地面标识高度
+   * @example
+   * ``` typescript
+   * panoMgr = new TilePanoramaGroup(panoramaDataList, 2, {
+   *  floorModel,
+   *  groundParams,
+   * });
+   * stage.bindElement(panoMgr);
+   */
+  constructor(panoramaDataList: TilePanoramaData[],
+    options:
+      {
+        modelElement?: NS_THREE.Object3D;
+        groundParams?: GroundParameters;
+        indicatorImageURL?: string;
+        invisibleIndicatorImageURL?: string;
+        indicatorWidth?: number;
+        indicatorHeight?: number;
+        indicatorPositionMap?: Map<number, NS_THREE.Vector3>;
+        globalScale?: number;
+        showInvisible?: boolean;
+      }) {
+    super();
+
+    this.initialized = false;
+    // this.currentPanorama = null;
+    const {
+      modelElement,
+      groundParams,
+      indicatorImageURL,
+      invisibleIndicatorImageURL,
+      indicatorWidth,
+      indicatorHeight,
+      indicatorPositionMap,
+      globalScale,
+      showInvisible,
+    } = options || { globalScale: 1 };
+    const { THREE } = Externals.getInstance();
+    this.currentPanoramaID = -1;
+    this.panoramaMap = new Map();
+    this.indicatorMap = new Map();
+    this.indicatorVisibilityMap = new Map();
+    this.indicatorHiddenMap = new Map();
+    this.indicatorPositionMap = indicatorPositionMap ? indicatorPositionMap! : new Map();
+    this.inSightIndicators = [];
+    this.indicatorWidth = indicatorWidth || (2 * TilePanoramaGroup.IndicatorRadius);
+    this.indicatorHeight = indicatorHeight || (2 * TilePanoramaGroup.IndicatorRadius);
+    this.maxWorldDistance = 13;
+    this.globalScale = globalScale || 1;
+    this.showInvisible = showInvisible || false;
+    this.group = new THREE.Group();
+    this.add(this.group);
+
+    this.viewConfigurations = new Map<View, TilePanoramaGroupViewConfiguration>();
+
+    this.eventListeners = {
+      onFloorModelLoaded: (element: Element): void => {
+        if (element !== this.modelElement) return;
+        this.updateIndicatorsPositions();
+      },
+    };
+
+    this.groundParams = groundParams;
+
+    this.bindModelElement(modelElement);
+
+    this.initIndicator(indicatorImageURL, invisibleIndicatorImageURL);
+
+    this.initPanoramas(panoramaDataList);
+
+    this.initIndicatorPosition();
+
+    EventHub.on(OwllyEvents.ELEMENT_LOADED, this.eventListeners.onFloorModelLoaded);
+
+    this.initialized = false;
+    this.needUpdate = false;
+  }
+
+  /**
+   * @ignore
+   * @param panoramaDataList
+   */
+  private initPanoramas(panoramaDataList: TilePanoramaData[]): void {
+    this.panoramaDatas = new Map();
+    panoramaDataList.forEach((item: TilePanoramaData) => {
+      this.panoramaDatas.set(item.pid, item);
+    });
+
+    panoramaDataList.forEach((item: TilePanoramaData) => {
+      const panorama = new TilePanorama(
+        item.pid,
+        item.seqID,
+        item.useLowTextureURLsOnly
+          ? (item.textureURLs || item.highTextureURLs)
+          : (item.highTextureURLs || item.textureURLs),
+        item.neighbourPanoramaIDs,
+        item.useLowTextureURLsOnly ? 1 : 2,
+        item.offLineTextureUrls,
+        item.offLineTextureLevel,
+        item.position,
+        item.quaternion,
+      );
+      panorama.scale.set(this.globalScale, this.globalScale, this.globalScale);
+      this.putPanorama(panorama);
+    });
+  }
+
+  private initIndicatorPosition(): void {
+    if (this.modelElement instanceof FloorModel) {
+      if ((this.modelElement as FloorModel).isModelLoaded()) {
+        this.updateIndicatorsPositions();
+      }
+    }
+  }
+
+  /**
+   * 更新最大等级
+   * @param levelMax 最大等级
+   */
+  public updateLevelMax(levelMax: number): void{
+    if (this.panoramaMap) {
+      this.panoramaMap.forEach((pano: TilePanorama) => {
+        pano.levelMax = levelMax;
+      });
+    }
+  }
+
+  /**
+   * 销毁
+   * @param exceptForCubeTextureOfPID
+   */
+  public dispose(exceptForCubeTextureOfPID?: number): void {
+    super.dispose();
+    EventHub.off(OwllyEvents.ELEMENT_LOADED, this.eventListeners.onFloorModelLoaded);
+    if (this.panoramaMap) {
+      this.panoramaMap.forEach((pano: TilePanorama) => {
+        // console.info('#PanoCtrl# 5 Will remove pano:', pano.position);
+        this.group.remove(pano);
+        if (exceptForCubeTextureOfPID !== pano.pid) {
+          CubeTextureCache.sharedInstance.recycleCubeTexture(pano.textureURLs);
+        }
+        pano.dispose();
+      });
+      this.panoramaMap.clear();
+    }
+
+    if (this.indicatorMap) {
+      this.indicatorMap.forEach((indicator: NS_THREE.Mesh) => {
+        this.group.remove(indicator);
+      });
+      this.indicatorMap.clear();
+    }
+
+    if (this.boundBox) {
+      this.group.remove(this.boundBox);
+      this.boundBox.geometry.dispose();
+      this.boundBox = null;
+    }
+
+    this.remove(this.group);
+  }
+
+  /**
+   * 初始化indicator
+   * @param indicatorImageURL
+   * @param invisibleIndicatorImageURL
+   */
+  private initIndicator(indicatorImageURL?: string, invisibleIndicatorImageURL?: string): void {
+    const { THREE } = Externals.getInstance();
+    const vertexShader = `
+    varying vec2 vUv;
+    void main(){
+       vUv = uv;
+       gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+    }
+  `;
+    const fragmentShader = `
+    uniform sampler2D map;
+    uniform float opacity;
+    uniform vec4 blendColor;
+    varying vec2 vUv;
+    void main(){
+       vec4 texColor = texture2D(map, vUv);
+       gl_FragColor = vec4((texColor * (1.0 - blendColor.a) + blendColor * blendColor.a).rgb, texColor.a * opacity);
+    }
+  `;
+
+    this.indicatorShaderUniforms = {
+      map: {
+        type: 't',
+        value: null,
+      },
+      blendColor: {
+        type: 'v4',
+        value: new THREE.Vector4(0, 0, 0, 0),
+      },
+      opacity: { value: 1 },
+    } as { [uniform: string]: NS_THREE.IUniform };
+
+    this.invisibleIndicatorShaderUniforms = {
+      map: {
+        type: 't',
+        value: null,
+      },
+      blendColor: {
+        type: 'v4',
+        value: new THREE.Vector4(1.0, 0.0, 0.0, 0.5),
+      },
+      opacity: { value: 1 },
+    } as { [uniform: string]: NS_THREE.IUniform };
+
+    this.indicatorMaterials = new Map();
+    let indicatorMaterial;
+    let indicatorGeometry;
+    if (indicatorImageURL) {
+      indicatorGeometry = new THREE.PlaneBufferGeometry(
+        this.indicatorWidth,
+        this.indicatorHeight,
+      );
+
+      indicatorMaterial = new THREE.ShaderMaterial({
+        // 设置透明属性，这样透过全景图就能看到标签
+        transparent: true,
+        vertexShader,
+        fragmentShader,
+        uniforms: this.indicatorShaderUniforms,
+        side: NS_THREE.DoubleSide,
+        depthTest: false,
+        depthWrite: false,
+        name: 'indicatorMaterial',
+      });
+
+      this.indicatorImageURL = indicatorImageURL;
+      new THREE.TextureLoader().load(indicatorImageURL, (texture) => {
+        this.indicatorShaderUniforms.map.value = texture;
+      });
+    } else {
+      indicatorGeometry = new THREE.CircleGeometry(this.indicatorWidth / 2, 32);
+
+      indicatorMaterial = new THREE.MeshBasicMaterial({ transparent: true });
+      indicatorMaterial.side = NS_THREE.DoubleSide;
+      indicatorMaterial.depthTest = false;
+      indicatorMaterial.depthWrite = false;
+      indicatorMaterial.color = new THREE.Color(0xffffff);
+    }
+
+    let invisibleIndicatorMaterial;
+    const invisibleIndicatorImageURL1 = invisibleIndicatorImageURL || indicatorImageURL;
+    if (invisibleIndicatorImageURL1) {
+      invisibleIndicatorMaterial = new THREE.ShaderMaterial({
+        // 设置透明属性，这样透过全景图就能看到标签
+        transparent: true,
+        vertexShader,
+        fragmentShader,
+        uniforms: this.invisibleIndicatorShaderUniforms,
+        side: NS_THREE.DoubleSide,
+        depthTest: false,
+        depthWrite: false,
+        name: 'invisibleIndicatorMaterial',
+      });
+      new THREE.TextureLoader().load(invisibleIndicatorImageURL1, (texture) => {
+        this.invisibleIndicatorShaderUniforms.map.value = texture;
+      });
+    } else {
+      invisibleIndicatorMaterial = new THREE.MeshBasicMaterial();
+      invisibleIndicatorMaterial.side = NS_THREE.DoubleSide;
+      invisibleIndicatorMaterial.depthTest = false;
+      invisibleIndicatorMaterial.depthWrite = false;
+      invisibleIndicatorMaterial.color = new THREE.Color(0xff0000);
+    }
+    const indicator = new THREE.Mesh(indicatorGeometry, indicatorMaterial);
+    this.setIndicatorMeshPrototype(indicator);
+    this.setIndicatorMaterial(indicatorMaterial, IndicatorDisplayMode.Editing, true);
+    this.setIndicatorMaterial(invisibleIndicatorMaterial, IndicatorDisplayMode.Editing, false);
+    this.setIndicatorMaterial(indicatorMaterial, IndicatorDisplayMode.Show, true);
+  }
+
+  /**
+   * 更新标签
+   */
+  private updateIndicators(): void {
+    const pidPositionMap = this.getPIDPositionMap(this.inSightIndicators);
+    pidPositionMap.forEach((p: NS_THREE.Vector3, pid: number) => {
+      const position = this.indicatorPositionMap.get(pid);
+      if (!position) {
+        if (this.groundParams || this.modelElement instanceof FloorModel) {
+          let precisePosition;
+          // console.log('## TilePanoramaGroup.update() will update indicator position');
+          if (this.groundParams && this.groundParams.groundPlane) {
+            precisePosition = FloorModel.intersectWithGroundPlane(p, this.groundParams);
+          } else {
+            const model = this.modelElement as FloorModel;
+            precisePosition = model.intersectGround(p);
+          }
+          if (precisePosition) {
+            this.indicatorPositionMap.set(pid, precisePosition);
+          }
+        }
+      }
+    });
+    this.inSightIndicators.forEach((pid: number) => {
+      let indicator = this.indicatorMap.get(pid);
+      if (!indicator) {
+        indicator = this.indicatorMeshPrototype.clone();
+        this.indicatorMap.set(pid, indicator);
+        this.group.add(indicator);
+
+        const panoData = this.panoramaDatas.get(pid);
+        if (panoData && panoData.position) {
+          indicator.position.copy(panoData.position);
+        }
+      }
+      const position = this.indicatorPositionMap.get(pid);
+      if (position) {
+        indicator.position.copy(position);
+      }
+    });
+  }
+
+  /**
+   * @ignore
+   */
+  public update(): ElementFrameContext {
+    const frameContext = new ElementFrameContext(this);
+    if (!this.initialized) {
+      this.initialized = true;
+      frameContext.needUpdate = true;
+    } else if (this.needUpdate) {
+      this.updateIndicators();
+      this.needUpdate = false;
+      frameContext.needUpdate = true;
+    } else if (this.currentPanorama) {
+      const subFrameContext = this.currentPanorama.update();
+      if (subFrameContext.needUpdate) {
+        frameContext.needUpdate = true;
+      }
+    }
+    if (this.initialized && !this.parent) {
+      frameContext.shouldPlaceElement = true;
+    }
+    return frameContext;
+  }
+
+  /**
+   * 绑定模型Element对象（用于创建天空包围盒供全景切换时使用）
+   * @param modelElement 模型Element对象
+   */
+  public bindModelElement(modelElement?: NS_THREE.Object3D): void {
+    if (modelElement) {
+      this.modelElement = modelElement;
+    }
+    if (this.boundBox) {
+      this.group.remove(this.boundBox);
+      this.boundBox = null;
+    }
+    this.getModelBoundBox();
+  }
+
+  /**
+   * 获取盒子
+   * @param rootObj
+   * @param globalScale
+   * @returns
+   */
+  public static getBoundBox(rootObj: NS_THREE.Object3D | null): NS_THREE.Mesh | null {
+    if (!rootObj) return null;
+    const { THREE } = Externals.getInstance();
+    const box = new THREE.Box3().setFromObject(rootObj);
+    const size = box.getSize(new THREE.Vector3());
+    const sideLength = Math.max(size.x, size.y, size.z);// 外扩10个单位
+
+    // const minX = -sideLength;
+    // const maxX = sideLength;
+    // const minY = -sideLength;
+    // const maxY = sideLength;
+    // const minZ = -sideLength;
+    // const maxZ = sideLength;
+    // const boundBox = new THREE.Mesh(new THREE.BoxBufferGeometry(maxX - minX, maxY - minY, maxZ - minZ));
+    // boundBox.position.set((maxX + minX) / 2, (maxY + minY) / 2, (maxZ + minZ) / 2);
+    const boundBox = new THREE.Mesh(new THREE.BoxBufferGeometry(sideLength, sideLength, sideLength));
+    boundBox.position.copy(box.max.clone().add(box.min).multiplyScalar(0.5));
+    return boundBox;
+  }
+
+  /**
+   * 获取模型盒子
+   * @returns
+   */
+  private getModelBoundBox(): void {
+    if (this.boundBox) return;
+    this.boundBox = TilePanoramaGroup.getBoundBox(this.modelElement);
+    if (this.boundBox) {
+      this.boundBox.visible = true;
+      // 设置天空盒不被视锥裁剪，这样天空盒资源就能直接加载到GPU里面
+      this.boundBox.frustumCulled = false;
+      this.boundBox.renderOrder = 100;
+      this.group.add(this.boundBox);
+    }
+  }
+
+  /**
+   * 设置包围盒出现
+   * @param material
+   * @returns
+   */
+  public setBoundBoxAppearance(material: NS_THREE.Material): void {
+    this.getModelBoundBox();
+    if (!this.boundBox) return;
+    this.boundBox.material = material;
+    this.needUpdate = true;
+  }
+
+  private setBoundBoxVisible(visible: boolean): void {
+    if (!this.boundBox) return;
+    this.boundBox.visible = visible;
+  }
+
+  /**
+   * 加载指定全景图并加入场景（显示要通过PanoramaController）
+   * @param panorama 要加载的全景图
+   */
+  private async presentPanorama(panorama: TilePanorama): Promise<number> {
+    const res = await this.initTexturesByPanorama(panorama);
+    return res;
+  }
+
+  /**
+   * 根据全景对象初始化纹理
+   * @param panorama
+   */
+  private async initTexturesByPanorama(panorama: TilePanorama): Promise<number> {
+    panorama.updateLevel(0);
+    // console.log('initTextures', panorama.pid);
+    const needInits = panorama.getPreTextureInfos();
+    const res = await TextureController.instance.initTextures(needInits);
+    return res;
+    // console.log('initTexturesEnd', panorama.pid);
+  }
+
+  /**
+   * 加载指定PID的全景图并加入场景（显示要通过PanoramaController）
+   * @param pid 要加载的全景图ID
+   */
+  private async presentPanoramaOfPID(pid: number): Promise<number> {
+    const pano = this.getPanoramaByPID(pid);
+    let res = 1;
+    if (pano) {
+      res = await this.presentPanorama(pano);
+    }
+    if (res) {
+      this.currentPanoramaID = pid;
+      this.currentPanorama = pano;
+      this.emit(Events.PANORAMA_PRESENTED, pid);
+    }
+    return res;
+  }
+
+  private visibleRadiusOfView(view?: View): number {
+    if (!view) return TilePanoramaGroup.DefaultVisibleRadius;
+    const conf = this.viewConfigurations.get(view);
+    if (conf && conf.visibleRadius) return conf.visibleRadius;
+    return TilePanoramaGroup.DefaultVisibleRadius;
+  }
+
+  /**
+   * @ignore
+   * @param centerPID
+   * @param view
+   * @returns
+   */
+  public panoramaIDsAround(centerPID: number, view?: View): number[] | null {
+    const rootNode = this.panoramaDatas.get(centerPID);
+    if (!rootNode || !rootNode.position) {
+      return null;
+    }
+    const ret: number[] = [centerPID];
+
+    const visibleRadius = this.visibleRadiusOfView(view);
+    const neighbours = rootNode.neighbourPanoramaIDs.map((pid: number) => this.panoramaDatas.get(pid));
+    neighbours.forEach((neighbour: TilePanoramaData | undefined) => {
+      if (neighbour && neighbour.position) {
+        const distance = rootNode.position!.distanceTo(neighbour.position);
+        if ((this.showInvisible || neighbour.visible) && distance <= visibleRadius) { ret.push(neighbour.pid); }
+      }
+    });
+    return ret;
+  }
+
+  /**
+   * 设置当前位于的全景点位。将加载指定全景点并预加载其相邻全景点
+   * @param {number} currentPID 全景点位ID
+   * @returns 1为初始化成功， 0为初始化失败
+   */
+  public async presentPanoramaAround(currentPID: number, view?: View): Promise<number> {
+    const panoIDs: number[] | null = this.panoramaIDsAround(currentPID, view);
+    let res = 1;
+    if (panoIDs) {
+      res = await this.presentPanoramaOfPID(currentPID);
+    }
+    return res;
+  }
+
+  /** @ignore */
+  private getPIDPositionMap(pids: number[]): Map<number, NS_THREE.Vector3> {
+    const ret = new Map<number, NS_THREE.Vector3>();
+    pids.forEach((value: number) => {
+      const panoData = this.panoramaDatas.get(value);
+      if (panoData) {
+        ret.set(value, panoData.position!);
+      }
+    });
+    return ret;
+  }
+
+  /**
+   * 根据pid获取标签的位置
+   * @param pid
+   * @returns
+   */
+  public getIndicatorPosition(pid: number): NS_THREE.Vector3 | undefined {
+    return this.indicatorPositionMap.get(pid);
+  }
+
+  /**
+   * 显示指定全景点位标签
+   * @param pidPositionMap 从PID映射到全景点位位置的Map
+   */
+  public presentPanoramaIndicators(pidPositionMap: Map<number, NS_THREE.Vector3>): void {
+    if (!this.modelElement) return;
+    const { THREE } = Externals.getInstance();
+    this.inSightIndicators = [];
+    pidPositionMap.forEach((position: NS_THREE.Vector3, pid: number) => {
+      if (this.groundParams || this.modelElement instanceof FloorModel) {
+        const savedPosition = this.indicatorPositionMap.get(pid);
+        if (!savedPosition) {
+          let p;
+          // console.log('## TilePanoramaGroup.presentPanoramaIndicators() will update indicator position');
+          if (this.groundParams && this.groundParams.groundPlane) {
+            p = FloorModel.intersectWithGroundPlane(position, this.groundParams);
+          } else {
+            const model = this.modelElement as FloorModel;
+            p = model.intersectGround(position);
+          }
+          if (p) {
+            this.indicatorPositionMap.set(pid, p.add(new THREE.Vector3(0, 0, TilePanoramaGroup.IndicatorOffsetZ)));
+          }
+        }
+      }
+      this.inSightIndicators.push(pid);
+    });
+    this.needUpdate = true;
+  }
+
+  /**
+    * 更新标签位置
+    */
+  private async updateIndicatorsPositions(): Promise<void> {
+    const { THREE } = Externals.getInstance();
+    this.panoramaMap.forEach((pano: TilePanorama, pid: number) => {
+      const savedPosition = this.indicatorPositionMap.get(pid);
+      if (savedPosition) return;
+      const { position } = pano;
+      let p;
+      // console.log('## TilePanoramaGroup.presentPanoramaIndicators() will update indicator position');
+      if (this.groundParams && this.groundParams.groundPlane) {
+        p = FloorModel.intersectWithGroundPlane(position, this.groundParams);
+      } else {
+        const model = this.modelElement as FloorModel;
+        p = model.intersectGround(position);
+      }
+      if (p) {
+        this.indicatorPositionMap.set(pid, p.add(new THREE.Vector3(0, 0, TilePanoramaGroup.IndicatorOffsetZ)));
+      }
+    });
+
+    const pidPositionMap = await this.getPIDPositionMap(this.inSightIndicators);
+    this.presentPanoramaIndicators(pidPositionMap);
+  }
+
+  /**
+   * 显示指定全景点及其相邻全景点上的标签
+   * @param pid “中心”全景点ID，一般指摄像机当前所在的全景点PID
+   */
+  public async presentPanoramaIndicatorsAround(pid: number, view?: View): Promise<void> {
+    const pids = this.panoramaIDsAround(pid, view);
+    if (pids) {
+      const pidPositionMap = await this.getPIDPositionMap(pids);
+      this.presentPanoramaIndicators(pidPositionMap);
+    }
+  }
+
+  /**
+   * 获取pid的标签是否可见
+   * @param pid
+   * @returns
+   */
+  public getIndicatorVisibility(pid: number): boolean {
+    const visibility = this.indicatorVisibilityMap.get(pid);
+    if (undefined === visibility) return true;
+    return visibility;
+  }
+
+  /**
+   * 设置指定全景点位的显示/隐藏状态
+   * @param visibility 显示/隐藏状态
+   * @param pid 可选，可以是全景图点位PID数组，也可以是单个PID,
+   * 若不设置则应用到本PanoramaGroup的所有全景点位上
+   */
+  public setIndicatorVisibility(visibility: boolean, pid?: number | number[]): void {
+    let pidArray: number[];
+    if (pid === undefined) {
+      pidArray = [];
+      this.indicatorMap.forEach((value: NS_THREE.Mesh, key: number) => {
+        pidArray.push(key);
+      });
+    } else if (Array.isArray(pid)) {
+      pidArray = pid;
+    } else {
+      pidArray = [pid as number];
+    }
+
+    pidArray.forEach((value: number) => {
+      this.indicatorVisibilityMap.set(value, visibility);
+
+      const indicator = this.indicatorMap.get(value);
+      if (indicator) {
+        this.group.remove(indicator);
+        this.indicatorMap.delete(value);
+      }
+    });
+    this.needUpdate = true;
+  }
+
+  /**
+   * 设置标签隐藏
+   * @param hidden 隐藏
+   * @param pid 指定pid
+   */
+  public setIndicatorHidden(hidden: boolean, pid?: number | number[]): void {
+    let pidArray: number[];
+    if (pid === undefined) {
+      pidArray = [];
+      this.indicatorMap.forEach((value: NS_THREE.Mesh, key: number) => {
+        pidArray.push(key);
+      });
+    } else if (Array.isArray(pid)) {
+      pidArray = pid;
+    } else {
+      pidArray = [pid as number];
+    }
+
+    pidArray.forEach((value: number) => {
+      this.indicatorHiddenMap.set(value, hidden);
+
+      const indicator = this.indicatorMap.get(value);
+      if (indicator) {
+        this.group.remove(indicator);
+        this.indicatorMap.delete(value);
+      }
+    });
+    this.needUpdate = true;
+  }
+
+  /**
+   * 与全景点标志作相交测试
+   * 若有任一个全景点标志与射线相交则返回最近一个的相应PID
+   * 若没有则返回-1
+   * @param rayOrigin 射线起点
+   * @param rayDirection 射线方向
+   */
+  public intersectIndicators(rayOrigin: NS_THREE.Vector3, rayDirection: NS_THREE.Vector3): number {
+    let results: Array<{ pid: number; distance: number }> = [];
+    const v = rayDirection.normalize();
+    const radius = Math.min(this.indicatorHeight, this.indicatorWidth) / 2;
+    this.indicatorMap.forEach((indicator: NS_THREE.Mesh, pid: number) => {
+      const p = indicator.position;
+      if (Number.isNaN(p.x)) return;
+      const u = p.clone().sub(rayOrigin);
+      const uDotV = u.dot(v);
+      if (uDotV > 0) {
+        const uOnV = v.clone().multiplyScalar(uDotV);
+        const distance = u.sub(uOnV).length();
+        if (distance <= radius) {
+          results.push({
+            pid,
+            distance,
+          });
+        }
+      }
+    });
+    if (results.length > 0) {
+      results = results.sort((a, b) => {
+        if (a.distance < b.distance) return -1;
+        if (a.distance > b.distance) return 1;
+        return 0;
+      });
+      return results[0].pid;
+    }
+    return -1;
+  }
+
+  /**
+   * @ignore
+   * @param screenPosition
+   * @param radius
+   * @param param2
+   * @param camera
+   * @returns
+   */
+  public intersectIndicatorsOnScreen(
+    screenPosition: NS_THREE.Vector2,
+    radius: number,
+    { screenWidth, screenHeight }: { screenWidth: number; screenHeight: number },
+    camera: NS_THREE.Camera,
+  ): number {
+    const indicatorsEntries = Array.from(this.indicatorMap);
+    const indicators = indicatorsEntries.map(([, mesh]) => mesh);
+    const intersection = BasicTools.getMouseIntersectionOnScreen(
+      indicators,
+      screenPosition,
+      { screenWidth, screenHeight },
+      radius,
+      camera,
+      indicators,
+      this.maxWorldDistance,
+    );
+    if (intersection) {
+      const target = indicatorsEntries.find(([, mesh]) => mesh === intersection);
+      if (target) return target[0];
+    }
+    return -1;
+  }
+
+  /**
+   * 添加全景点
+   * @param {Panorama} pano 全景图对象
+   */
+  public putPanorama(pano: TilePanorama): void {
+    const oldNode = this.panoramaMap.get(pano.pid);
+    if (oldNode) {
+      // console.info('#PanoCtrl# 4 Will remove pano:', oldNode.position);
+      this.group.remove(oldNode);
+      oldNode.dispose();
+    }
+    this.panoramaMap.set(pano.pid, pano);
+    // pano.visible = false;
+    this.group.add(pano);
+    this.needUpdate = true;
+  }
+
+  /**
+     * 指定预构建全景对象的顺序策略
+     * @param preInitStrategy 多义参数，表示具体的创建顺序
+     * 当为'all'时，直接按构造函数中panoramaDataList的顺序创建全部全景对象
+     * 当为一个整数值时，表示一个全景PID，将按全景点邻接关系以广度优先搜索的顺序创建全景对象
+     * 当为一个整数数组时，以数组指定的PID顺序依次创建
+     */
+  public async initializePanoramasIfNecessary(preInitStrategy: 'all' | number | number[]): Promise<(TilePanorama | undefined)[]> {
+    let pids: number[] = [];
+    if (Array.isArray(preInitStrategy)) {
+      pids = preInitStrategy as number[];
+    } else if (preInitStrategy === 'all') {
+      pids = Array.from(this.panoramaDatas.keys());
+    } else {
+      const pid0 = preInitStrategy as number;
+      pids.push(pid0);
+      const visited: Set<number> = new Set();
+      visited.add(pid0);
+      const bfsQueue: number[] = [pid0];
+      while (bfsQueue.length > 0) {
+        const pid = bfsQueue.splice(0, 1)[0];
+        const pano = this.panoramaDatas.get(pid);
+        if (pano) {
+          pano.neighbourPanoramaIDs.forEach((neighbourPID: number) => {
+            if (!visited.has(neighbourPID)) {
+              visited.add(neighbourPID);
+              bfsQueue.push(neighbourPID);
+              pids.push(neighbourPID);
+            }
+          });
+        }
+      }
+    }
+    const promises = pids.map((pid: number) => this.getPanoramaByPID(pid));
+    return Promise.all(promises);
+  }
+
+  /**
+   * 获得指定ID的全景点对象
+   * @param pid 全景点ID
+   */
+  public getPanoramaByPID(pid: number): TilePanorama | undefined {
+    const ret = this.panoramaMap.get(pid);
+    if (ret) {
+      return ret;
+    }
+    const item = this.panoramaDatas.get(pid);
+    if (!item) {
+      return undefined;
+    }
+    const panorama = new TilePanorama(
+      item.pid,
+      item.seqID,
+      item.useLowTextureURLsOnly
+        ? (item.textureURLs || item.highTextureURLs)
+        : (item.highTextureURLs || item.textureURLs),
+      item.neighbourPanoramaIDs,
+      item.useLowTextureURLsOnly ? 1 : 2,
+      item.offLineTextureUrls,
+      item.offLineTextureLevel,
+      item.position,
+      item.quaternion,
+    );
+    panorama.scale.set(this.globalScale, this.globalScale, this.globalScale);
+    this.putPanorama(panorama);
+    return panorama;
+  }
+
+  /**
+   * 立刻获得指定ID的全景点对象
+   * @param pid 全景点ID
+   */
+  public getPanoramaByPIDInstant(pid: number): TilePanorama | null {
+    const ret = this.panoramaMap.get(pid);
+    return ret || null;
+  }
+
+  /**
+   * @ignore
+   * @param rayDirection
+   */
+  public getNeghbourPanoClosestToRay(rayDirection: NS_THREE.Vector3): number {
+    if (this.currentPanoramaID === -1) return -1;
+    const pano = this.panoramaMap.get(this.currentPanoramaID);
+    if (!pano) return -1;
+    if (!pano.neighborPanoramaIDs || pano.neighborPanoramaIDs.length === 0) return -1;
+
+    const AngleDegreeThreshold = 12.0;
+    const direction = rayDirection.clone().normalize();
+    let maxCos = -1.0;
+    let ret = -1;
+    pano.neighborPanoramaIDs.forEach((pid) => {
+      const neighbour = this.panoramaMap.get(pid);
+      if (!neighbour) return;
+
+      const cosin = neighbour.position.clone().sub(pano.position).normalize().dot(direction);
+      if (cosin > maxCos) {
+        maxCos = cosin;
+        ret = pid;
+      }
+    });
+    if (maxCos >= Math.cos(Math.PI * AngleDegreeThreshold / 180.0)) {
+      return ret;
+    }
+
+    return -1;
+  }
+
+  /**
+   * @ignore
+   */
+  public updateIndicatorGeometry(): void {
+    const { THREE } = Externals.getInstance();
+    let indicatorGeometry: NS_THREE.PlaneBufferGeometry | NS_THREE.CircleGeometry;
+    if (this.indicatorImageURL) {
+      indicatorGeometry = new THREE.PlaneBufferGeometry(
+        this.indicatorWidth,
+        this.indicatorHeight,
+      );
+    } else {
+      indicatorGeometry = new THREE.CircleGeometry(this.indicatorWidth / 2, 32);
+    }
+    const indicatorSet = new Set();
+    Array.from(this.indicatorMap).forEach(([, mesh]) => {
+      indicatorSet.add(mesh.geometry);
+      mesh.geometry = indicatorGeometry;
+    });
+    Array.from(indicatorSet).forEach((geometry: NS_THREE.PlaneBufferGeometry | NS_THREE.CircleGeometry) => {
+      geometry.dispose();
+    });
+    this.indicatorMeshPrototype.geometry = indicatorGeometry;
+    const indicator = new THREE.Mesh(indicatorGeometry, this.indicatorMeshPrototype.material);
+    this.setIndicatorMeshPrototype(indicator);
+  }
+
+  /**
+   * 改变地面全景点标识的尺寸
+   * @param width 宽度
+   * @param height 高度
+   */
+  public setIndicatorSize(width: number, height: number): void {
+    this.indicatorWidth = width;
+    this.indicatorHeight = height;
+    this.updateIndicatorGeometry();
+  }
+
+  /**
+   * 设置标签的图片
+   * @param url
+   */
+  public setIndicatorImageURL(url: string): void {
+    const { THREE } = Externals.getInstance();
+    new THREE.TextureLoader().load(url, (texture) => {
+      const vertexShader = `
+        varying vec2 vUv;
+        void main(){
+           vUv = uv;
+           gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+        }
+      `;
+      const fragmentShader = `
+        uniform sampler2D map;
+        uniform float opacity;
+        uniform vec4 blendColor;
+        varying vec2 vUv;
+        void main(){
+           vec4 texColor = texture2D(map, vUv);
+           gl_FragColor = vec4((texColor * (1.0 - blendColor.a) + blendColor * blendColor.a).rgb, texColor.a * opacity);
+        }
+      `;
+      let currentMaterial = this.getIndicatorMaterial(IndicatorDisplayMode.Editing, true)!;
+      let newMaterial = new THREE.ShaderMaterial({
+        // 设置透明属性，这样透过全景图就能看到标签
+        transparent: true,
+        vertexShader,
+        fragmentShader,
+        uniforms: this.indicatorShaderUniforms,
+        side: NS_THREE.DoubleSide,
+        depthTest: false,
+        depthWrite: false,
+        name: 'indicatorMaterial',
+      });
+      this.setIndicatorMaterial(newMaterial, IndicatorDisplayMode.Editing, true);
+      currentMaterial.dispose();
+
+      currentMaterial = this.getIndicatorMaterial(IndicatorDisplayMode.Show, true)!;
+      this.setIndicatorMaterial(newMaterial, IndicatorDisplayMode.Show, true);
+      currentMaterial.dispose();
+
+      newMaterial = new THREE.ShaderMaterial({
+        transparent: true,
+        vertexShader,
+        fragmentShader,
+        uniforms: this.invisibleIndicatorShaderUniforms,
+        side: NS_THREE.DoubleSide,
+        depthTest: false,
+        depthWrite: false,
+        name: 'invisibleIndicatorMaterial',
+      });
+
+      this.indicatorShaderUniforms.map.value = texture;
+      this.invisibleIndicatorShaderUniforms.map.value = texture;
+      this.setIndicatorMaterial(newMaterial, IndicatorDisplayMode.Editing, false);
+      if (!this.indicatorImageURL) {
+        this.setIndicatorMeshPrototype(new THREE.Mesh(
+          new THREE.PlaneBufferGeometry(
+            this.indicatorWidth,
+            this.indicatorHeight,
+          ),
+          newMaterial,
+        ));
+      }
+      this.indicatorImageURL = url;
+      this.needUpdate = true;
+      this.updateIndicatorGeometry();
+    });
+  }
+
+  /**
+   * 查询当前设置的地面全景点标识尺寸
+   * @returns number数组，依次是width, height
+   */
+  public getIndicatorSize(): number[] {
+    return [this.indicatorWidth, this.indicatorHeight];
+  }
+
+  private setIndicatorMeshPrototype(mesh: NS_THREE.Mesh): void {
+    this.indicatorMeshPrototype = mesh;
+    this.panoramaMap.forEach((pano: TilePanorama, pid: number) => {
+      const indicator = this.indicatorMap.get(pid);
+      if (indicator) {
+        this.group.remove(indicator);
+        this.indicatorMap.delete(pid);
+      }
+    });
+    mesh.renderOrder = 300;
+    this.needUpdate = true;
+  }
+
+  /**
+   * 设定全景点位标签的原型对象，每个全景点位的标签会以该原型对象为母本clone出来
+   * @param prototypeObject 点位标签原型Object3D对象
+   * @param mode 点位的展示模式
+   * @param visibility 点位的显隐状态设置
+   */
+  public setIndicatorMaterial(material: NS_THREE.Material, mode: IndicatorDisplayMode, visibility: boolean): void {
+    let map1 = this.indicatorMaterials.get(mode);
+    if (!map1) {
+      map1 = new Map();
+      this.indicatorMaterials.set(mode, map1);
+    }
+    map1.set(visibility, material);
+    this.needUpdate = true;
+  }
+
+  /**
+   * 获取标签材质
+   * @param mode
+   * @param visibility
+   * @returns
+   */
+  public getIndicatorMaterial(mode: IndicatorDisplayMode, visibility: boolean): NS_THREE.Material | undefined {
+    let map1 = this.indicatorMaterials.get(mode);
+    if (!map1) {
+      map1 = new Map();
+      this.indicatorMaterials.set(mode, map1);
+    }
+    return map1.get(visibility);
+  }
+
+  /**
+   * 配置全景图组在不同view中的显示状态
+   * @param configuration 全景图组配置，见[[PanoramaGroupViewConfiguration]]
+   */
+  public addGroupViewConfiguration(configuration: TilePanoramaGroupViewConfiguration): void {
+    const conf0 = this.viewConfigurations.get(configuration.targetView);
+    if (conf0) {
+      if (configuration.showBoundBox === undefined && conf0.showBoundBox !== undefined) {
+        configuration.showBoundBox = conf0.showBoundBox;
+      }
+      if (configuration.visibleRadius === undefined && conf0.visibleRadius !== undefined) {
+        configuration.visibleRadius = conf0.visibleRadius;
+      }
+      if (configuration.indicatorDisplayMode === undefined && conf0.indicatorDisplayMode !== undefined) {
+        configuration.indicatorDisplayMode = conf0.indicatorDisplayMode;
+      }
+    }
+    this.viewConfigurations.set(configuration.targetView, configuration);
+    this.needUpdate = true;
+    // /!!!For Debug #Async#
+    // this.setBoundBoxVisible(configuration.showBoundBox!);
+  }
+
+  /**
+   * 设置最大时间距离
+   * @param distance
+   */
+  public setMaxWorldDistance(distance: number): void {
+    this.maxWorldDistance = distance;
+  }
+
+  // /**
+  //  * @ignore
+  //  * @param view
+  //  */
+  // public renderingViewChanged(view: View): void {
+  //   if (this.currentPanorama) {
+  //     this.currentPanorama.renderingViewChanged(view);
+  //   }
+  //   // this.setBoundBoxVisible(conf.showBoundBox!);
+
+  //   // switch (conf.indicatorDisplayMode) {
+  //   //   case IndicatorDisplayMode.AlwaysHide:
+  //   //     this.panoramaDatas.forEach((pano: TilePanoramaData, pid: number) => {
+  //   //       const indicator = this.indicatorMap.get(pid);
+  //   //       if (!indicator) return;
+  //   //       if (indicator.material instanceof NS_THREE.ShaderMaterial) {
+  //   //         (indicator.material as NS_THREE.ShaderMaterial).uniforms.opacity.value = 0;
+  //   //       } else {
+  //   //         (indicator.material as NS_THREE.MeshBasicMaterial).opacity = 0;
+  //   //       }
+  //   //     });
+  //   //     break;
+  //   //   case IndicatorDisplayMode.AlwaysShow:
+  //   //     this.panoramaDatas.forEach((pano: TilePanoramaData, pid: number) => {
+  //   //       const indicator = this.indicatorMap.get(pid);
+  //   //       if (!indicator) return;
+
+  //   //       let visibility = this.indicatorVisibilityMap.get(pid);
+  //   //       if (visibility === undefined) visibility = true;
+  //   //       const material = this.getIndicatorMaterial(IndicatorDisplayMode.AlwaysShow, visibility);
+  //   //       if (material) indicator.material = material;
+
+  //   //       if (indicator.material instanceof NS_THREE.ShaderMaterial) {
+  //   //         (indicator.material as NS_THREE.ShaderMaterial).uniforms.opacity.value = 1;
+  //   //       } else {
+  //   //         (indicator.material as NS_THREE.MeshBasicMaterial).opacity = 1;
+  //   //       }
+  //   //     });
+  //   //     break;
+  //   //   case IndicatorDisplayMode.Editing:
+  //   //     this.panoramaDatas.forEach((pano: TilePanoramaData, pid: number) => {
+  //   //       const indicator = this.indicatorMap.get(pid);
+  //   //       if (!indicator) return;
+
+  //   //       let visibility = this.indicatorVisibilityMap.get(pid);
+  //   //       const hidden = !!this.indicatorHiddenMap.get(pid);
+  //   //       if (visibility === undefined) visibility = true;
+  //   //       indicator.visible = !hidden;
+  //   //       const material = this.getIndicatorMaterial(IndicatorDisplayMode.Editing, visibility);
+  //   //       if (material) indicator.material = material;
+  //   //       if (indicator.material instanceof NS_THREE.ShaderMaterial) {
+  //   //         (indicator.material as NS_THREE.ShaderMaterial).uniforms.opacity.value = 1;
+  //   //       } else {
+  //   //         (indicator.material as NS_THREE.MeshBasicMaterial).opacity = 1;
+  //   //       }
+  //   //     });
+  //   //     break;
+  //   //   case IndicatorDisplayMode.Show:
+  //   //     this.panoramaDatas.forEach((pano: TilePanoramaData, pid: number) => {
+  //   //       const indicator = this.indicatorMap.get(pid);
+  //   //       if (!indicator) return;
+  //   //       (indicator.material as NS_THREE.Material).visible = false;
+  //   //       indicator.visible = false;
+  //   //       if (indicator.material instanceof NS_THREE.ShaderMaterial) {
+  //   //         (indicator.material as NS_THREE.ShaderMaterial).uniforms.opacity.value = 0;
+  //   //       } else {
+  //   //         (indicator.material as NS_THREE.MeshBasicMaterial).opacity = 0;
+  //   //       }
+  //   //     });
+  //   //     this.inSightIndicators.forEach((pid: number) => {
+  //   //       const indicator = this.indicatorMap.get(pid);
+  //   //       if (!indicator) return;
+
+  //   //       let visibility = this.indicatorVisibilityMap.get(pid);
+  //   //       if (visibility === undefined) visibility = true;
+  //   //       const material = this.getIndicatorMaterial(IndicatorDisplayMode.Editing, visibility);
+  //   //       if (material) indicator.material = material;
+
+  //   //       const precisePosition = this.indicatorPositionMap.get(pid);
+  //   //       (indicator.material as NS_THREE.Material).visible = visibility && precisePosition !== undefined;
+  //   //       indicator.visible = visibility && precisePosition !== undefined;
+  //   //       if (indicator.material instanceof NS_THREE.ShaderMaterial) {
+  //   //         (indicator.material as NS_THREE.ShaderMaterial).uniforms.opacity.value = (
+  //   //           visibility && precisePosition !== undefined ? 1 : 0
+  //   //         );
+  //   //       } else {
+  //   //         (indicator.material as NS_THREE.MeshBasicMaterial).opacity = (
+  //   //           visibility && precisePosition !== undefined ? 1 : 0
+  //   //         );
+  //   //       }
+  //   //     });
+  //   //     break;
+  //   //   default:
+  //   //     break;
+  //   // }
+
+  //   // this.panoramaMap.forEach((panorama) => {
+  //   //   panorama.renderingViewChanged(view);
+  //   // });
+  // }
+
+  // TODO(rpeng)显示盒子处理
+  // public async showBox(visible: boolean, all: boolean, pids: number[]): Promise<void> {
+  //   if (all) {
+  //     this.panoramaMap.forEach((panorama) => {
+  //       const box = panorama.getBox();
+  //     });
+  //   } else {
+  //     pids.forEach((pid) => {
+  //       const panorama = this.panoramaMap.get(pid);
+  //       if (panorama) {
+  //         const box = panorama.getBox();
+  //       }
+  //     });
+  //   }
+  // }
+}
+
+export {
+  TilePanoramaGroup, IndicatorDisplayMode, TilePanoramaGroupViewConfiguration, TilePanoramaData,
+};