@aibee/owlly 1.0.25

package/src/owlly/element/panorama.ts

@@ -0,0 +1,1044 @@
+import { Externals, NS_THREE } from '../stage/externals';
+import { Element, ElementFrameContext } from './element';
+import { EventHub } from '../utils/event-hub';
+import { Events, OwllyEvents } from '../utils/events';
+// import { CubeTextureCache } from '../utils/cube-texture-cache';
+import { View } from '../view/view';
+import { TextureCache } from '../utils/texture-cache';
+import { DeviceUtils } from '../utils/device-utils';
+import { CubeTextureCache } from '../utils/cube-texture-cache';
+
+interface PanoramaViewConfiguration {
+  targetView: View;
+  showBorder?: boolean;
+  showSkyBox?: boolean;
+}
+
+/**
+ * 全景图对象
+ * @noInheritDoc
+ */
+class Panorama extends Element {
+  private initialized: boolean;
+
+  private needsUpdate: boolean;
+
+  private skyBox: NS_THREE.Mesh;
+
+  private sphereMesh: NS_THREE.Mesh;
+
+  private isPlayingVideo: boolean;
+
+  private video: HTMLVideoElement | null;
+
+  private skyBoxFaceGrids: NS_THREE.Mesh[][];
+
+  private wireFrame: NS_THREE.LineSegments;
+
+  private material: NS_THREE.Material;
+
+  private faceGridsMaterials: NS_THREE.Material[][];
+
+  private uniforms: { [uniform: string]: NS_THREE.IUniform };
+
+  private faceGridsUniformses: { [uniform: string]: NS_THREE.IUniform }[][];
+
+  private faceGridsStates: number[][]; // 0=空,1=低清,2=高清
+
+  private faceGridTextureCacheKeys: string[][];
+
+  private faceGridRows: number;
+
+  private faceGridCols: number;
+
+  private gridCenters: NS_THREE.Vector4[][][];
+
+  pid: number;
+
+  seqID: number;
+
+  neighborPanoramaIDs: number[];
+
+  highTextureURLs: string[];
+
+  textureURLs: string[];
+
+  useLowTextureURLsOnly: boolean;
+
+  tiledTextureURLRoot: string | undefined;
+
+  private baseQuaternion: NS_THREE.Quaternion;
+
+  private additionalQuaternion: NS_THREE.Quaternion;
+
+  private panoramaLoaded: boolean;
+
+  private eventListeners: {
+    onPanoramaSelected: Function;
+    onEnded: ((video?: HTMLVideoElement) => void) | null;
+  };
+
+  private isSelected: boolean;
+
+  private viewConfigurations: Map<View, PanoramaViewConfiguration>;
+
+  private panoViews: Set<View>;
+
+  private videoCanvas: HTMLCanvasElement | null;
+
+  private mpegVideoPlayer: any; // eslint-disable-line
+
+  private videoContentType: 'mp4' | 'ts';
+
+  legacyMode: boolean;
+
+  /**
+   * @param textureURLs 低清立方体贴图六张图的URL数组（本地相对路径或网络URL均可），按右左上下前后的顺序
+   * @param highTextureURLs 高清立方体贴图六张图的URL数组（本地相对路径或网络URL均可），按右左上下前后的顺序
+   * @param useLowTextureURLsOnly 可选，设置后则（如果没有提供瓦片贴图）只使用低清立方体贴图
+   * @param tiledTextureURLRoot 可选，瓦片贴图URL的前缀部分，若没有则用highTextureURLs和lowTextureURLs作为贴图源
+   */
+  constructor(
+    pid: number,
+    seqID: number,
+    textureURLs: string[],
+    faceGridsSize: number[],
+    neighborPanoramaIDs: number[] = [],
+    highTextureURLs?: string[],
+    useLowTextureURLsOnly?: boolean,
+    tiledTextureURLRoot?: string,
+    position?: NS_THREE.Vector3,
+    quaternion?: NS_THREE.Quaternion,
+    legacyMode = false,
+  ) {
+    super();
+
+    const { THREE } = Externals.getInstance();
+    this.pid = pid;
+    this.seqID = seqID;
+    this.highTextureURLs = highTextureURLs || [];
+    this.textureURLs = textureURLs;
+    this.useLowTextureURLsOnly = !!useLowTextureURLsOnly;
+    this.tiledTextureURLRoot = tiledTextureURLRoot;
+    this.neighborPanoramaIDs = neighborPanoramaIDs;
+    this.viewConfigurations = new Map<View, PanoramaViewConfiguration>();
+    this.panoViews = new Set<View>();
+
+    this.initialized = false;
+
+    this.needsUpdate = false;
+
+    this.legacyMode = legacyMode;
+
+    const boxGeometry = new THREE.BoxBufferGeometry(2, 2, 2);
+
+    this.wireFrame = new THREE.LineSegments(
+      new THREE.EdgesGeometry(boxGeometry),
+      new THREE.LineBasicMaterial({ color: 0xff0000 }),
+    );
+    (this.wireFrame.material as NS_THREE.Material).visible = false;
+    this.wireFrame.renderOrder = 100;
+    this.add(this.wireFrame);
+
+    const sphereGeometry = new THREE.SphereBufferGeometry(1, 60, 40);
+    sphereGeometry.scale(1, -1, 1);
+    sphereGeometry.rotateY(-90 * Math.PI / 180.0);
+    this.sphereMesh = new THREE.Mesh(sphereGeometry);
+    this.sphereMesh.visible = false;
+    this.sphereMesh.renderOrder = 150;
+    this.add(this.sphereMesh);
+    this.isPlayingVideo = false;
+    this.videoCanvas = null;
+    this.videoContentType = 'mp4';
+
+    if (this.legacyMode) {
+      // do nothing now
+
+      const vertexShader = `
+        varying vec3 v_position;
+        void main(){
+            v_position = position;
+            v_position.y = v_position.y * -1.0;
+            gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+        }`;
+      const fragmentShader = `
+        uniform samplerCube tCube;
+        varying vec3 v_position;
+        void main(){
+            gl_FragColor = textureCube(tCube, v_position);
+        }`;
+
+      const uniforms = {
+        tCube: {
+          type: 't',
+          value: null,
+        },
+      };
+      this.uniforms = uniforms;
+      this.material = new THREE.ShaderMaterial({
+        fragmentShader,
+        vertexShader,
+        uniforms,
+        depthTest: false,
+        side: THREE.BackSide,
+      });
+      this.skyBox = new THREE.Mesh(new THREE.SphereBufferGeometry(2, 32, 32));
+      // this.skyBox.visible = false;// /!!!#TiledCube#
+      // 设置天空盒不被视锥裁剪，这样天空盒资源就能直接加载到GPU里面
+      this.skyBox.frustumCulled = false;
+      this.skyBox.material = this.material;
+      this.skyBox.renderOrder = 100;
+      this.add(this.skyBox);
+      this.updateTexture();
+    } else {
+      const faceVertexShader = `
+        varying vec2 vUv;
+        void main(){
+           vUv = uv;
+           gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+        }`;
+      const faceFragmentShader = `
+          uniform sampler2D tFaceTexture;
+          uniform vec2 uvScalar;
+          uniform vec2 uvOffset;
+          uniform vec4 blendColor;
+          varying vec2 vUv;
+          void main(){
+            vec2 UV = vUv * uvScalar + uvOffset;
+             vec4 texColor = texture2D(tFaceTexture, vec2(UV.s, 1.0 - UV.t));
+             gl_FragColor = (1.0 - blendColor.a) * texColor + blendColor.a * blendColor;
+            //  gl_FragColor = vec4(vUv, 0.0, 1.0);
+          }`;
+
+      [this.faceGridRows, this.faceGridCols] = faceGridsSize;
+      const gridWidth = 2 / faceGridsSize[1];
+      const gridHeight = 2 / faceGridsSize[0];
+      this.faceGridsStates = [];
+      this.faceGridTextureCacheKeys = [];
+      this.panoViews = new Set();
+      this.faceGridsMaterials = [];
+      this.faceGridsUniformses = [];
+      this.skyBoxFaceGrids = [];
+      this.gridCenters = [];
+      for (let iFace = 0; iFace < 6; iFace++) {
+        const gridsStates = [];
+        const gridTextureCacheKeys = [];
+        const gridsUniforms = [];
+        const gridsMaterials = [];
+        const gridsMeshes = [];
+        const gridCenterRows: NS_THREE.Vector4[][] = [];
+        for (let iRow = 0; iRow < faceGridsSize[0]; iRow++) {
+          const gridCenterRowCols: NS_THREE.Vector4[] = [];
+          for (let iCol = 0; iCol < faceGridsSize[1]; iCol++) {
+            const gridIndex = iRow * faceGridsSize[1] + iCol;
+            gridsStates[gridIndex] = 0;
+            gridTextureCacheKeys[gridIndex] = '';
+            gridsUniforms[gridIndex] = {
+              tFaceTexture: {
+                type: 't',
+                value: null,
+              },
+              uvScalar: {
+                type: 'v2',
+                value: new THREE.Vector2(1, 1),
+              },
+              uvOffset: {
+                type: 'v2',
+                value: new THREE.Vector2(0, 0),
+              },
+              blendColor: {
+                type: 'v4',
+                value: new THREE.Vector4(0, 0, 0, 0),
+              },
+            } as { [uniform: string]: NS_THREE.IUniform };
+
+            gridsMaterials[gridIndex] = new THREE.ShaderMaterial({
+              fragmentShader: faceFragmentShader,
+              vertexShader: faceVertexShader,
+              uniforms: gridsUniforms[gridIndex],
+              depthTest: false,
+              side: THREE.BackSide,
+            });
+
+            const skyBoxFaceGeometry = new THREE.PlaneBufferGeometry(gridWidth, gridHeight);
+            const skyBoxFaceMesh = new THREE.Mesh(skyBoxFaceGeometry, gridsMaterials[gridIndex]);
+            gridsMeshes[gridIndex] = skyBoxFaceMesh;
+            skyBoxFaceMesh.visible = true;
+            // 设置天空盒不被视锥裁剪，这样天空盒资源就能直接加载到GPU里面
+            skyBoxFaceMesh.frustumCulled = false;
+            skyBoxFaceMesh.material = gridsMaterials[gridIndex];
+            skyBoxFaceMesh.renderOrder = 100;
+            this.add(skyBoxFaceMesh);
+
+            gridCenterRowCols[iCol] = new THREE.Vector4(0, 0, 0, 1);
+          }
+          gridCenterRows[iRow] = gridCenterRowCols;
+        }
+        this.faceGridsStates[iFace] = gridsStates;
+        this.faceGridTextureCacheKeys[iFace] = gridTextureCacheKeys;
+        this.faceGridsUniformses[iFace] = gridsUniforms;
+        this.faceGridsMaterials[iFace] = gridsMaterials;
+        this.skyBoxFaceGrids[iFace] = gridsMeshes;
+        this.gridCenters[iFace] = gridCenterRows;
+      }
+      const T2: NS_THREE.Matrix4 = new THREE.Matrix4();
+      const R1: NS_THREE.Matrix4 = new THREE.Matrix4();
+      for (let iRow = 0; iRow < faceGridsSize[0]; iRow++) {
+        for (let iCol = 0; iCol < faceGridsSize[1]; iCol++) {
+          const gridIndex = iRow * faceGridsSize[1] + iCol;
+          for (let iFace = 0; iFace < 6; iFace++) {
+            T2.makeTranslation(gridWidth / 2 - 1 + gridWidth * iCol, gridHeight / 2 - 1 + gridHeight * iRow, 0);
+            this.skyBoxFaceGrids[iFace][gridIndex].applyMatrix4(T2);
+            this.gridCenters[iFace][iRow][iCol].applyMatrix4(T2);
+          }
+        }
+      }
+      for (let iRow = 0; iRow < faceGridsSize[0]; iRow++) {
+        for (let iCol = 0; iCol < faceGridsSize[1]; iCol++) {
+          const gridIndex = iRow * faceGridsSize[1] + iCol;
+
+          T2.makeTranslation(1, 0, 0);
+          R1.makeRotationY(Math.PI / 2);
+          this.skyBoxFaceGrids[0][gridIndex].applyMatrix4(R1);// /???
+          this.skyBoxFaceGrids[0][gridIndex].applyMatrix4(T2);
+          // this.skyBoxFaceGrids[0][gridIndex].translateX(1.0).rotateY(Math.PI / 2);// R
+          this.gridCenters[0][iRow][iCol].applyMatrix4(R1).applyMatrix4(T2);
+
+          T2.makeTranslation(-1, 0, 0);
+          R1.makeRotationY(-Math.PI / 2);
+          this.skyBoxFaceGrids[1][gridIndex].applyMatrix4(R1);// /???
+          this.skyBoxFaceGrids[1][gridIndex].applyMatrix4(T2);
+          // this.skyBoxFaceGrids[1][gridIndex].translateX(-1.0).rotateY(-Math.PI / 2);// L
+          this.gridCenters[1][iRow][iCol].applyMatrix4(R1).applyMatrix4(T2);
+
+          T2.makeTranslation(0, -1, 0);
+          R1.makeRotationX(Math.PI / 2);
+          this.skyBoxFaceGrids[2][gridIndex].applyMatrix4(R1);// /???
+          this.skyBoxFaceGrids[2][gridIndex].applyMatrix4(T2);
+          // this.skyBoxFaceGrids[2][gridIndex].translateY(-1.0).rotateX(Math.PI / 2);// T
+          this.gridCenters[2][iRow][iCol].applyMatrix4(R1).applyMatrix4(T2);
+
+          T2.makeTranslation(0, 1, 0);
+          R1.makeRotationX(-Math.PI / 2);
+          this.skyBoxFaceGrids[3][gridIndex].applyMatrix4(R1);// /???
+          this.skyBoxFaceGrids[3][gridIndex].applyMatrix4(T2);
+          // this.skyBoxFaceGrids[3][gridIndex].translateY(1.0).rotateX(-Math.PI / 2);// D
+          this.gridCenters[3][iRow][iCol].applyMatrix4(R1).applyMatrix4(T2);
+
+          T2.makeTranslation(0, 0, 1);
+          R1.makeTranslation(0, 0, 0);
+          this.skyBoxFaceGrids[4][gridIndex].applyMatrix4(R1);// /???
+          this.skyBoxFaceGrids[4][gridIndex].applyMatrix4(T2);
+          // this.skyBoxFaceGrids[4][gridIndex].translateZ(1.0);// F
+          this.gridCenters[4][iRow][iCol].applyMatrix4(R1).applyMatrix4(T2);
+
+          T2.makeTranslation(0, 0, -1);
+          R1.makeRotationY(Math.PI);
+          this.skyBoxFaceGrids[5][gridIndex].applyMatrix4(R1);// /???
+          this.skyBoxFaceGrids[5][gridIndex].applyMatrix4(T2);
+          // this.skyBoxFaceGrids[5][gridIndex].translateZ(-1.0).rotateY(Math.PI);// B
+          this.gridCenters[5][iRow][iCol].applyMatrix4(R1).applyMatrix4(T2);
+        }
+      }
+    }
+
+    if (position) {
+      this.position.copy(position);
+    }
+    if (quaternion) {
+      this.quaternion.copy(quaternion);
+    }
+
+    this.baseQuaternion = new THREE.Quaternion().copy(this.quaternion);
+    this.additionalQuaternion = new THREE.Quaternion();
+
+    /* eslint-disable no-underscore-dangle */
+    const onQuaternionChangeCallback = this.quaternion._onChangeCallback;
+    this.quaternion._onChange(() => {
+      onQuaternionChangeCallback();
+      const targetQuaternion = new THREE.Quaternion().multiplyQuaternions(
+        this.baseQuaternion,
+        this.additionalQuaternion,
+      );
+      if (targetQuaternion.equals(this.quaternion)) return;
+      this.baseQuaternion = this.quaternion.clone();
+      const {
+        x, y, z, w,
+      } = new THREE.Quaternion().multiplyQuaternions(this.baseQuaternion, this.additionalQuaternion);
+      this.quaternion.set(x, y, z, w);
+      this.needsUpdate = true;
+    });
+    const onRotationChangeCallback = this.rotation._onChangeCallback;
+    this.rotation._onChange(() => {
+      onRotationChangeCallback();
+      const reverse = this.additionalQuaternion.clone().invert();
+      this.baseQuaternion = this.quaternion.clone().multiply(reverse);
+    });
+    this.eventListeners = {
+      onPanoramaSelected: (panorama: Element): void => {
+        this.isSelected = panorama === this;
+        if (!this.isSelected) return;
+        this.emit(Events.PANORAMA_SELECTED, this.pid);
+      },
+      onEnded: (): void => {},
+    };
+    EventHub.on(OwllyEvents.ELEMENT_SELECTED, this.eventListeners.onPanoramaSelected);
+  }
+
+  /**
+   * 为全景图对象设置立方体贴图
+   * @param cubeTexture 立方体贴图对象
+   */
+  public setTexture(cubeTexture: NS_THREE.CubeTexture): void {
+    this.uniforms.tCube.value = cubeTexture;
+    this.needsUpdate = true;
+    if (!this.panoramaLoaded) {
+      this.emit(Events.DID_LOAD_PANORAMA, this.pid);
+    }
+    this.panoramaLoaded = true;
+  }
+
+  /**
+   * 暂停视频播放
+   */
+  public pauseVideo(): void {
+    if (this.videoContentType === 'ts') {
+      if (this.mpegVideoPlayer) this.mpegVideoPlayer.pause();
+    } else {
+      const videoElementID = `pano_vid_${this.pid}`;
+      this.video = this.video || document.getElementById(videoElementID) as HTMLVideoElement;
+
+      if (!this.video) {
+        return;
+      }
+      this.video.pause();
+    }
+  }
+
+  /**
+   * 恢复视频播放
+   */
+  public async resumeVideo(): Promise<void> {
+    if (this.videoContentType === 'ts') {
+      if (this.mpegVideoPlayer) this.mpegVideoPlayer.play();
+    } else {
+      const videoElementID = `pano_vid_${this.pid}`;
+      this.video = this.video || document.getElementById(videoElementID) as HTMLVideoElement;
+
+      if (!this.video) {
+        return;
+      }
+      await this.video.play();
+    }
+  }
+
+  /**
+   * 停止视频播放，并释放视频相关资源
+   */
+  public stopVideo(): void {
+    this.sphereMesh.visible = false;
+
+    if (this.videoContentType === 'ts') {
+      if (this.mpegVideoPlayer) {
+        this.mpegVideoPlayer.stop();
+        this.mpegVideoPlayer.destroy();
+        this.mpegVideoPlayer = null;
+      }
+
+      const canvasTexture = (this.sphereMesh.material as NS_THREE.MeshBasicMaterial).map as NS_THREE.Texture|null;
+      if (canvasTexture) canvasTexture.dispose();
+      (this.sphereMesh.material as NS_THREE.MeshBasicMaterial).dispose();
+
+      this.videoCanvas = null;
+    } else {
+      const videoElementID = `pano_vid_${this.pid}`;
+      this.video = this.video || document.getElementById(videoElementID) as HTMLVideoElement;
+
+      const videoTexture = (this.sphereMesh.material as NS_THREE.MeshBasicMaterial).map as NS_THREE.Texture|null;
+      if (videoTexture) {
+        videoTexture.dispose();
+      }
+      (this.sphereMesh.material as NS_THREE.MeshBasicMaterial).dispose();
+      if (this.video) {
+        this.video.pause();
+        this.video.removeAttribute('src');
+        this.video.load();
+        this.video = null;
+      }
+    }
+
+    if (this.eventListeners.onEnded) this.eventListeners.onEnded();
+
+    this.isPlayingVideo = false;
+    this.needsUpdate = true;
+  }
+
+  /**
+   * 开始视频播放
+   * @param videoURL 视频地址
+   * @param loop 是否循环播放
+   * @param callbacks 回调函数集合，可选
+   */
+  public playVideo(
+    videoURL: string,
+    loop: boolean,
+    callbacks?: {
+      onPrepareToPlay?: (video?: HTMLVideoElement) => void;
+      onReadyToPlay?: (video?: HTMLVideoElement) => void;
+      onEnded?: (video?: HTMLVideoElement) => void;
+    },
+    contentType: 'mp4' | 'ts' = 'mp4',
+    canvasSize: [number, number] = [2048, 2048],
+  ): HTMLVideoElement | null {
+    const { onReadyToPlay, onEnded, onPrepareToPlay } = callbacks || {};
+    this.videoContentType = contentType;
+    const { THREE } = Externals.getInstance();
+
+    this.eventListeners.onEnded = onEnded || ((): void => {});
+
+    if (this.videoContentType === 'ts') {
+      if (!JSMpeg || !JSMpeg.Player) throw new Error('JSMpeg is needed. Please get JSMpeg from https://github.com/phoboslab/jsmpeg');
+      if (!this.videoCanvas) {
+        this.videoCanvas = document.createElement('canvas');
+        [this.videoCanvas.width, this.videoCanvas.height] = canvasSize;
+      }
+      this.mpegVideoPlayer = new JSMpeg.Player(
+        videoURL,
+        {
+          canvas: this.videoCanvas,
+          loop,
+          autoplay: false,
+          disableGl: false,
+          onSourceEstablished: (): void => {
+            this.needsUpdate = true;
+            if (onPrepareToPlay) onPrepareToPlay();
+          },
+          onPlay: (): void => {
+            this.sphereMesh.visible = true;
+            this.needsUpdate = true;
+            if (onReadyToPlay) onReadyToPlay();
+            this.isPlayingVideo = true;
+          },
+          onPause: (): void => {},
+          onStalled: (): void => {},
+          onEnded: (): void => {
+            this.stopVideo();
+          },
+          chunkSize: 8 * 1024 * 1024,
+          videoBufferSize: 8 * 512 * 1024,
+          decodeFirstFrame: false,
+          preserveDrawingBuffer: false,
+        },
+      );
+      const texture = new THREE.CanvasTexture(this.videoCanvas);
+      texture.needsUpdate = true;
+      if (DeviceUtils.DetectIOS()) texture.flipY = false;
+      this.sphereMesh.material = new THREE.MeshBasicMaterial({
+        map: texture,
+        // side: DoubleSide,
+        transparent: false,
+        depthTest: false,
+        depthWrite: false,
+      });
+      this.mpegVideoPlayer.source.established = false;
+      this.mpegVideoPlayer.source.loadedSize = 0;
+      this.mpegVideoPlayer.demuxer.startTime = 0;
+      this.mpegVideoPlayer.demuxer.currentTime = 0;
+      this.mpegVideoPlayer.demuxer.bits = null;
+      this.mpegVideoPlayer.demuxer.leftoverBytes = null;
+      this.mpegVideoPlayer.audioOut.resetEnqueuedTime();
+      this.mpegVideoPlayer.audioOut.unlock();
+      this.mpegVideoPlayer.seek(0);
+      this.mpegVideoPlayer.play();
+    } else {
+      const videoElementID = `pano_vid_${this.pid}`;
+      this.video = document.getElementById(videoElementID) as HTMLVideoElement;
+      if (!this.video) {
+        this.video = document.createElement('video');
+        this.video.id = videoElementID;
+        this.video.setAttribute('webkit-playsinline', 'true');
+        this.video.setAttribute('x5-playsinline', 'true');
+        this.video.setAttribute('playsinline', 'true');
+        this.video.setAttribute('crossorigin', 'anonymous');
+        // console.info('#Video# video', video);
+      }
+
+      this.video.src = videoURL;
+      this.video.loop = !!loop;
+      this.video.addEventListener('playing', () => {
+        // console.info('#Video# playing', ev);
+        this.sphereMesh.visible = true;
+        this.needsUpdate = true;
+        if (onReadyToPlay) {
+          onReadyToPlay(this.video!);
+        }
+        this.isPlayingVideo = true;
+      });
+      this.video.addEventListener('ended', () => {
+        this.stopVideo();
+      });
+      this.video.addEventListener('play', () => {
+        // console.info('#Video# play', ev);
+        this.needsUpdate = true;
+        if (onPrepareToPlay) {
+          onPrepareToPlay(this.video!);
+        }
+      });
+      this.video.play();
+      const texture = new THREE.VideoTexture(this.video);
+      texture.needsUpdate = true;
+      this.sphereMesh.material = new THREE.MeshBasicMaterial({
+        map: texture,
+        // side: DoubleSide,
+        transparent: false,
+        depthTest: false,
+        depthWrite: false,
+      });
+      return this.video;
+    }
+
+    return null;
+  }
+
+  public getIntersectedTiles(camera: NS_THREE.Camera | undefined): {
+    hdTiles: number[][];
+    ldTiles: number[][];
+  } {
+    if (!camera) {
+      return {
+        hdTiles: [],
+        ldTiles: [],
+      };
+    }
+    const { THREE } = Externals.getInstance();
+    this.updateMatrixWorld();
+    camera!.updateMatrixWorld();
+    const cameraPosition = camera!.position.clone();
+    const gridCenters = this.gridCenters.map((face: NS_THREE.Vector4[][]) => {
+      const newFace = face.map((row: NS_THREE.Vector4[]) => {
+        const newRow = row.map((v: NS_THREE.Vector4) => {
+          const v4 = v.clone().applyMatrix4(this.matrixWorld);
+          return new THREE.Vector3(v4.x, v4.y, v4.z).sub(cameraPosition).normalize();
+        });
+        return newRow;
+      });
+      return newFace;
+    });
+
+    const lookDirection = new THREE.Vector3(0, 0, -1).applyQuaternion(camera!.quaternion);
+    const retHDTiles: number[][] = [];
+    const retLDTiles: number[][] = [];
+    const cos45 = Math.SQRT1_2;
+    for (let iFace = 0; iFace < 6; iFace++) {
+      for (let iRow = 0; iRow < this.faceGridRows; iRow++) {
+        for (let iCol = 0; iCol < this.faceGridCols; iCol++) {
+          const dot = gridCenters[iFace][iRow][iCol].dot(lookDirection);
+          if (dot >= cos45) {
+            retHDTiles.push([iFace, iRow, iCol, dot]);
+          // } else if (dot >= 0) {
+          //   retLDTiles.push([iFace, iRow, iCol, dot]);
+          } else {
+            retLDTiles.push([iFace, iRow, iCol, dot]); // TODO(dqiu): 优化此处
+          }
+        }
+      }
+    }
+    if (this.isPlayingVideo) {
+      return {
+        hdTiles: [],
+        ldTiles: retLDTiles,
+      };
+    }
+    return {
+      hdTiles: retHDTiles,
+      ldTiles: retLDTiles,
+    };
+  }
+
+  // /**
+  //  * 为天空盒设置六个面的贴图
+  //  * @param textures 天空盒六个面的贴图数组，按右左上下前后顺序
+  //  */
+  // private setFaceTextures(textures: Texture[]): void {
+  //   for (let i = 0; i < 6; i++) {
+  //     this.faceUniformses[i].tFaceTexture.value = textures[i];
+  //   }
+  //   this.needsUpdate = true;
+  // }
+
+  private setFaceTexture(faceRowColDot: number[], texture: NS_THREE.Texture | null,
+    uniformValues?: {
+      uvScalar?: NS_THREE.Vector2;
+      uvOffset?: NS_THREE.Vector2;
+      blendColor?: NS_THREE.Vector4;
+    }, cacheKey?: string): void {
+    const { THREE } = Externals.getInstance();
+    const faceIndex = faceRowColDot[0];
+    const gridRow = faceRowColDot[1];
+    const gridCol = faceRowColDot[2];
+    // const dot = faceRowColDot[3];
+    const gridIndex = gridRow * this.faceGridCols + gridCol;
+    this.faceGridsUniformses[faceIndex][gridIndex].tFaceTexture.value = texture;
+    // const divCols = 1 / this.faceGridCols;
+    // const divRows = 1 / this.faceGridRows;
+    const { uvScalar, uvOffset, blendColor } = uniformValues || {};
+    this.faceGridsUniformses[faceIndex][gridIndex].uvScalar.value = uvScalar || new THREE.Vector2(1, 1);
+    this.faceGridsUniformses[faceIndex][gridIndex].uvOffset.value = uvOffset || new THREE.Vector2(0, 0);
+    this.faceGridsUniformses[faceIndex][gridIndex].blendColor.value = blendColor || new THREE.Vector4(0, 0, 0, 0);
+    // this.faceGridsUniformses[faceIndex][gridIndex].blendColor.value = new Vector4(dot, 0, 1 - dot, 0.5);// /!!!For Debug
+    // console.info(`#TiledCube# setFaceTexture (face, row, col)=(${faceIndex}, ${gridRow}, ${gridCol}):`, texture);
+    if (cacheKey) {
+      this.faceGridTextureCacheKeys[faceIndex][gridIndex] = cacheKey;
+    }
+    this.needsUpdate = true;
+  }
+
+  // /**
+  //  * 异步加载立方体贴图
+  //  * @param textureURLs 新的立方体贴图六面图像URL（如果需要更新的话）
+  //  */
+  public async updateTexture(textureURLs?: string[]): Promise<void> {
+    if (this.legacyMode) {
+      if (textureURLs) {
+        this.textureURLs = textureURLs;
+      }
+      const cubeTexture: NS_THREE.CubeTexture = await CubeTextureCache.sharedInstance.loadCubeTexture(this.textureURLs);
+      this.setTexture(cubeTexture);
+    } else {
+      for (let f = 0; f < 6; f++) {
+        for (let g = this.faceGridCols * this.faceGridRows - 1; g >= 0; g--) {
+          this.faceGridsStates[f][g] = 0;
+        }
+      }
+
+      if (textureURLs) {
+        this.highTextureURLs = textureURLs;
+        this.textureURLs = textureURLs;
+      }
+    }
+
+    this.needsUpdate = true;
+  }
+
+  /**
+   * @param hdFaceGrids [][faceIndex, row, col]
+   */
+  private async updateHDGridTextures(hdFaceGrids: number[][]): Promise<NS_THREE.Texture[]> {
+    if (this.useLowTextureURLsOnly) {
+      return [];
+    }
+    const { THREE } = Externals.getInstance();
+    if (this.tiledTextureURLRoot) {
+      // console.log('#TiledCube# updateHDGridTextures with tiles');
+      const faceName = ['r', 'l', 't', 'd', 'f', 'b'];
+      // const hdTextureURLs = hdFaceGrids.map((value: number[]) => this.highTextureURLs[value[0]]);
+      const hdTextureURLs = hdFaceGrids.map((value: number[]) => `${this.tiledTextureURLRoot}${this.seqID}_${faceName[value[0]]}_${value[1]}-${value[2]}`);
+      // console.info(`#TextureLeak# Panorama.updateHDGridTextures #${this.pid} Before hdFaceTexturesCache.preloadTextures()#1 ${hdFaceGrids.length} tiles, HD.totalCost=${TextureCache.hdFaceTexturesCache.getTotalCost()}`);
+      const hdTextures = await TextureCache.hdFaceTexturesCache.preloadTextures(
+        hdTextureURLs,
+        hdFaceGrids.length,
+      );
+      // console.info(`#TextureLeak# Panorama.updateHDGridTextures #${this.pid} After hdFaceTexturesCache.preloadTextures()#1 ${hdFaceGrids.length} tiles, HD.totalCost=${TextureCache.hdFaceTexturesCache.getTotalCost()}`);
+      for (let i = hdFaceGrids.length - 1; i >= 0; i--) {
+        this.setFaceTexture(hdFaceGrids[i], hdTextures[i], undefined, hdTextureURLs[i]);
+      }
+      return hdTextures;
+    }
+
+    if (!this.highTextureURLs.length) {
+      return [];
+    }
+    const hdTextureURLs = hdFaceGrids.map((value: number[]) => `${this.highTextureURLs[value[0]]}`);
+    // console.log(`#TiledCube# hdTextureURLs[0]=${hdTextureURLs[0]}`);
+    // console.info(`#TextureLeak# Panorama.updateHDGridTextures #${this.pid} Before hdFaceTexturesCache.preloadTextures()#2 ${hdFaceGrids.length} tiles, HD.totalCost=${TextureCache.hdFaceTexturesCache.getTotalCost()}`);
+    const hdTextures = await TextureCache.hdFaceTexturesCache.preloadTextures(
+      hdTextureURLs,
+      hdFaceGrids.length,
+    );
+    // console.info(`#TextureLeak# Panorama.updateHDGridTextures #${this.pid} After hdFaceTexturesCache.preloadTextures()#2 ${hdFaceGrids.length} tiles, HD.totalCost=${TextureCache.hdFaceTexturesCache.getTotalCost()}`);
+    const uvScalar = new THREE.Vector2(1.0 / this.faceGridCols, 1.0 / this.faceGridRows);
+    for (let i = hdFaceGrids.length - 1; i >= 0; i--) {
+      const uvOffset = new THREE.Vector2(uvScalar.x * hdFaceGrids[i][2], uvScalar.y * hdFaceGrids[i][1]);
+      this.setFaceTexture(hdFaceGrids[i], hdTextures[i], {
+        uvScalar,
+        uvOffset,
+      }, hdTextureURLs[i]);
+    }
+    return hdTextures;
+  }
+
+  private async updateLDGridTextures(ldFaceGrids: number[][]): Promise<NS_THREE.Texture[]> {
+    const { THREE } = Externals.getInstance();
+    // const ldTextureURLs = ldFaceGrids.map((value: number[]) => this.highTextureURLs[value[0]]);
+    const ldTextureURLs = ldFaceGrids.map((value: number[]) => `${this.textureURLs[value[0]]}`);
+    // console.info(`#TextureLeak# Panorama.updateLDGridTextures #${this.pid} Before ldFaceTexturesCache.preloadTextures()#1 ${ldFaceGrids.length} tiles, LD.totalCost=${TextureCache.ldFaceTexturesCache.getTotalCost()}`);
+    const ldTextures = await TextureCache.ldFaceTexturesCache.preloadTextures(
+      ldTextureURLs,
+      ldFaceGrids.length,
+    );
+    // console.info(`#TextureLeak# Panorama.updateLDGridTextures #${this.pid} After ldFaceTexturesCache.preloadTextures()#1 ${ldFaceGrids.length} tiles, LD.totalCost=${TextureCache.ldFaceTexturesCache.getTotalCost()}`);
+    const uvScalar = new THREE.Vector2(1.0 / this.faceGridCols, 1.0 / this.faceGridRows);
+    for (let i = ldFaceGrids.length - 1; i >= 0; i--) {
+      const uvOffset = new THREE.Vector2(uvScalar.x * ldFaceGrids[i][2], uvScalar.y * ldFaceGrids[i][1]);
+      this.setFaceTexture(ldFaceGrids[i], ldTextures[i], {
+        uvScalar,
+        uvOffset,
+      }, ldTextureURLs[i]);
+    }
+    return ldTextures;
+  }
+
+  /**
+   * 异步加载天空盒贴图，优先从cache中获取
+   * @param textureURLs 新的天空盒贴图六面图像URL（如果需要更新的话）
+   */
+  public async updateFaceGridsTextures(hdFaceGrids: number[][], ldFaceGrids: number[][]): Promise<void> {
+    if (!this.panoramaLoaded) {
+      this.emit(Events.WILL_LOAD_PANORAMA, this.pid);
+    }
+    const newHDFaceGrids: number[][] = [];
+    hdFaceGrids.forEach((grid: number[]) => {
+      if (this.faceGridsStates[grid[0]][this.faceGridCols * grid[1] + grid[2]] !== 2) {
+        newHDFaceGrids.push(grid);
+      }
+    });
+    await this.updateLDGridTextures(newHDFaceGrids);
+    const newLDFaceGrids: number[][] = [];
+    ldFaceGrids.forEach((grid: number[]) => {
+      if (this.faceGridsStates[grid[0]][this.faceGridCols * grid[1] + grid[2]] !== 1) {
+        newLDFaceGrids.push(grid);
+      }
+    });
+    await this.updateLDGridTextures(newLDFaceGrids);
+    // console.info('#TiledCube# LD faces updated:', ldFaceGrids);
+    for (let f = 0; f < 6; f++) {
+      for (let g = this.faceGridRows * this.faceGridCols - 1; g >= 0; g--) {
+        this.faceGridsStates[f][g] = 0;
+      }
+    }
+    hdFaceGrids.forEach((grid: number[]) => {
+      this.faceGridsStates[grid[0]][this.faceGridCols * grid[1] + grid[2]] = 2;
+    });
+    ldFaceGrids.forEach((grid: number[]) => {
+      this.faceGridsStates[grid[0]][this.faceGridCols * grid[1] + grid[2]] = 1;
+    });
+    this.updateHDGridTextures(newHDFaceGrids);
+    if (!this.panoramaLoaded) {
+      this.emit(Events.DID_LOAD_PANORAMA, this.pid);
+    }
+    this.panoramaLoaded = true;
+  }
+
+  // /**
+  //  * 若立方体贴图还未加载过，则加载，否则无操作
+  //  */
+  // public async loadTextureIfNecessary(): Promise<CubeTexture> {
+  //   if (!this.uniforms.tCube.value) {
+  //     return this.updateTexture();
+  //   }
+  //   return this.uniforms.tCube.value;
+  // }
+
+  // /**
+  //  * 设置线框的显示隐藏
+  //  * @param visible 是否显示线框，同时隐藏立方体贴图
+  //  */
+  // public setFrameVisible(visible: boolean): void {
+  //   this.wireFrame.visible = visible;
+  //   this.skyBox.visible = !visible;
+  //   this.needsUpdate = true;
+  // }
+
+  /**
+   * 设置是否只使用低分辨率贴图
+   * @param useLowTexturesOnly 是否只使用低分辨率贴图
+   */
+  public setUseLowTexturesOnly(useLowTexturesOnly: boolean): void {
+    this.useLowTextureURLsOnly = useLowTexturesOnly;
+  }
+
+  public isUseLowTexturesOnly(): boolean {
+    return this.useLowTextureURLsOnly;
+  }
+
+  dispose(): void {
+    super.dispose();
+    // 销毁材质资源
+    // if (this.material) {
+    //   this.material.dispose();
+    // }
+    // // 销毁天空盒实体资源
+    // if (this.skyBox.geometry) {
+    //   this.skyBox.geometry.dispose();
+    // }
+    if (this.faceGridsMaterials) {
+      this.faceGridsMaterials.forEach((materials) => {
+        materials.forEach((material) => {
+          material.dispose();
+        });
+      });
+    }
+    if (this.skyBoxFaceGrids) {
+      this.skyBoxFaceGrids.forEach((meshes: NS_THREE.Mesh[]) => {
+        meshes.forEach((mesh) => {
+          if (mesh.geometry) {
+            mesh.geometry.dispose();
+          }
+        });
+      });
+    }
+    this.stopVideo();
+    if (this.eventListeners.onEnded) this.eventListeners.onEnded = null;
+    if (this.sphereMesh && this.sphereMesh.material) {
+      (this.sphereMesh.material as NS_THREE.Material).dispose();
+    }
+    this.initialized = false;
+    EventHub.off(OwllyEvents.ELEMENT_SELECTED, this.eventListeners.onPanoramaSelected);
+  }
+
+  /**
+   * @ignore
+   */
+  public update(): ElementFrameContext {
+    const frameContext = new ElementFrameContext(this);
+    if (!this.initialized) {
+      this.initialized = true;
+      frameContext.needUpdate = true;
+    } else if (this.needsUpdate || this.isPlayingVideo) {
+      frameContext.needUpdate = true;
+      if (this.isPlayingVideo && this.videoCanvas && (this.sphereMesh.material as NS_THREE.MeshBasicMaterial).map) {
+        (this.sphereMesh.material as NS_THREE.MeshBasicMaterial).map!.needsUpdate = true;
+      }
+      this.needsUpdate = false;
+    }
+    if (this.initialized && !this.parent) {
+      frameContext.shouldPlaceElement = true;
+    }
+    return frameContext;
+  }
+
+  /**
+   * 使用欧拉角模式设置矫正
+   * @param roll 横滚角, 坐标轴为x
+   * @param pitch 俯仰角, 坐标轴为y
+   * @param yaw 偏航角, 坐标轴为z
+   */
+  public setAdditionalRotationInEuler(
+    roll: number,
+    pitch: number,
+    yaw: number,
+  ): NS_THREE.Quaternion {
+    const { THREE } = Externals.getInstance();
+    this.additionalQuaternion.setFromEuler(new THREE.Euler(roll, pitch, yaw));
+    const {
+      x, y, z, w,
+    } = this.baseQuaternion.clone().multiply(this.additionalQuaternion);
+    this.quaternion.set(x, y, z, w);
+    this.needsUpdate = true;
+    return this.additionalQuaternion.clone();
+  }
+
+  /**
+   * 使用四元数模式设置矫正
+   * @param x 四元数的x值
+   * @param y 四元数的y值
+   * @param z 四元数的y值
+   * @param w 四元数的w值
+   */
+  public setAdditionalRotationInQuaternion(
+    x: number,
+    y: number,
+    z: number,
+    w: number,
+  ): NS_THREE.Euler {
+    const { THREE } = Externals.getInstance();
+    this.additionalQuaternion.set(x, y, z, w);
+    const {
+      x: tx, y: ty, z: tz, w: tw,
+    } = this.baseQuaternion.clone().multiply(this.additionalQuaternion);
+    this.quaternion.set(tx, ty, tz, tw);
+    this.needsUpdate = true;
+    return new THREE.Euler().setFromQuaternion(this.additionalQuaternion);
+  }
+
+  /**
+   * 配置全景图在不同view中的显示状态
+   * @param configuration 全景图配置
+   */
+  public addViewConfiguration(configuration: PanoramaViewConfiguration): void { // , applyImmediately?: boolean
+    const prevConfig = this.viewConfigurations.get(configuration.targetView);
+    const conf = { ...prevConfig, ...configuration } as PanoramaViewConfiguration;
+    this.viewConfigurations.set(configuration.targetView, conf);
+    this.needsUpdate = true;
+    // /!!!#Async#
+    // if (applyImmediately === true) {
+    //   this.renderingViewChanged(configuration.targetView);
+    // }
+  }
+
+  // renderingViewChanged(view: View): void {
+  //   if (!view.camera) return;
+  //   super.renderingViewChanged(view);
+  //   const conf = { showBorder: false, showSkyBox: false };
+  //   const conf1 = this.viewConfigurations.get(view);
+  //   if (conf1) {
+  //     if (conf1.showBorder !== undefined) {
+  //       conf.showBorder = conf1.showBorder;
+  //     }
+  //     if (conf1.showSkyBox !== undefined) {
+  //       conf.showSkyBox = conf1.showSkyBox;
+  //     }
+  //   }
+  //   (this.wireFrame.material as NS_THREE.Material).visible = conf.showBorder;
+  //   if (!this.legacyMode) {
+  //     this.skyBoxFaceGrids.forEach((meshes: NS_THREE.Mesh[]) => {
+  //       meshes.forEach((mesh: NS_THREE.Mesh) => {
+  //         (mesh.material as NS_THREE.Material).visible = this.isPlayingVideo ? false : conf.showSkyBox;
+  //       });
+  //     });
+  //   }
+  //   const inSight = (this.position.distanceTo(view.camera.position) < 0.1);
+  //   const isCurrentPanorama = this.panoViews.has(view);
+  //   if (inSight) {
+  //     if (!isCurrentPanorama && !this.legacyMode) {
+  //       this.panoViews.add(view);
+  //       for (let f = 0; f < 6; f++) {
+  //         for (let g = this.faceGridCols * this.faceGridRows - 1; g >= 0; g--) {
+  //           this.faceGridsStates[f][g] = 0;
+  //         }
+  //       }
+  //     }
+  //   } else if (isCurrentPanorama) {
+  //     this.panoViews.delete(view);
+  //     if (this.isPlayingVideo) {
+  //       this.stopVideo();
+  //     }
+  //     if (!this.legacyMode) {
+  //       for (let f = 0; f < 6; f++) {
+  //         for (let g = this.faceGridCols * this.faceGridRows - 1; g >= 0; g--) {
+  //           const cacheKey = this.faceGridTextureCacheKeys[f][g];
+  //           TextureCache.hdFaceTexturesCache.recycleTexture(cacheKey);
+  //           TextureCache.ldFaceTexturesCache.recycleTexture(cacheKey);
+  //         }
+  //       }
+  //     }
+  //   }
+  //   if (conf.showSkyBox && inSight && isCurrentPanorama && !this.legacyMode) {
+  //     const tiles = this.getIntersectedTiles(view.camera);
+  //     // TODO(jyfang): 纯异步执行, 不打断事件
+  //     this.updateFaceGridsTextures(tiles.hdTiles, tiles.ldTiles);
+  //   }
+  //   (this.wireFrame.material as NS_THREE.Material).visible = conf.showBorder;
+  //   if (!this.legacyMode) {
+  //     this.skyBoxFaceGrids.forEach((meshes: NS_THREE.Mesh[]) => {
+  //       meshes.forEach((mesh: NS_THREE.Mesh) => {
+  //         (mesh.material as NS_THREE.Material).visible = this.isPlayingVideo
+  //           ? false : conf.showSkyBox && isCurrentPanorama;
+  //       });
+  //     });
+  //   }
+  //   this.visible = (conf.showSkyBox === true || conf.showBorder === true);
+  // }
+}
+
+export { Panorama, PanoramaViewConfiguration };