@aibee/owlly 1.0.25

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

@@ -0,0 +1,636 @@
+import { NS_THREE, Externals } from '../stage/externals';
+import { Element, ElementFrameContext } from './element';
+import { EventHub } from '../utils/event-hub';
+import { Events, OwllyEvents } from '../utils/events';
+import { View } from '../view';
+import { DeviceUtils } from '../utils/device-utils';
+import { TilePlane, TilePlaneUtil } from './tile-plane';
+import { CubeFaceConfig, TileTextureInfo, TileUtil } from '../utils/tile-util';
+
+interface TilePanoramaViewConfiguration {
+  targetView: View;
+  showBorder?: boolean;
+  showSkyBox?: boolean;
+}
+
+let sphereInstance: NS_THREE.Mesh;
+
+const TILE_PANORAMA_SIZE = 2;
+/**
+ * 全景图对象
+ * @noInheritDoc
+ */
+class TilePanorama extends Element {
+  private initialized: boolean;
+
+  private needsUpdate: boolean;
+
+  private level = 0;
+
+  /** @ignore */
+  public levelMax = 0;
+
+  private sphereMesh: NS_THREE.Mesh | null;
+
+  private isPlayingVideo: boolean;
+
+  private video: HTMLVideoElement | null;
+
+  private wireFrame: NS_THREE.LineSegments;
+
+  /** @ignore */
+  public tilePlanes: TilePlane[];
+
+  public pid: number;
+
+  /** @ignore */
+  public seqID: number;
+
+  /** @ignore */
+  public neighborPanoramaIDs: number[];
+
+  /** @ignore */
+  public highTextureURLs: string[];
+
+  /** @ignore */
+  public textureURLs: string[];
+
+  /** @ignore */
+  public offLinTextureUrls: string[];
+
+  /** @ignore */
+  public offLineTextureLevel = -1;
+
+  /** @ignore */
+  public useLowTextureURLsOnly: boolean;
+
+  /** @ignore */
+  public 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 videoCanvas: HTMLCanvasElement | null;
+
+  private mpegVideoPlayer: any; // eslint-disable-line
+
+  private videoContentType: 'mp4' | 'ts';
+
+  private mounted: boolean;
+
+  /**
+   * @param textureURLs 低清立方体贴图六张图的URL数组（本地相对路径或网络URL均可），按右左上下前后的顺序
+   * @param highTextureURLs 高清立方体贴图六张图的URL数组（本地相对路径或网络URL均可），按右左上下前后的顺序
+   * @param useLowTextureURLsOnly 可选，设置后则（如果没有提供瓦片贴图）只使用低清立方体贴图
+   * @param tiledTextureURLRoot 可选，瓦片贴图URL的前缀部分，若没有则用highTextureURLs和lowTextureURLs作为贴图源
+   */
+  constructor(
+    pid: number,
+    seqID: number,
+    textureURLs: string[],
+    neighborPanoramaIDs: number[] = [],
+    levelMax: number,
+    offLinTextureUrls?: string[],
+    offLineTextureLevel?: number,
+    position?: NS_THREE.Vector3,
+    quaternion?: NS_THREE.Quaternion,
+  ) {
+    super();
+    this.pid = pid;
+    this.seqID = seqID;
+    this.textureURLs = textureURLs;
+    this.levelMax = levelMax;
+    this.neighborPanoramaIDs = neighborPanoramaIDs;
+    this.offLinTextureUrls = offLinTextureUrls || [];
+    if (offLineTextureLevel != null) {
+      this.offLineTextureLevel = offLineTextureLevel;
+    }
+    this.initialized = false;
+    this.mounted = false;
+    this.needsUpdate = false;
+    this.tilePlanes = [];
+    this.isPlayingVideo = false;
+    this.videoCanvas = null;
+    this.videoContentType = 'mp4';
+    this.setTransform(position, quaternion);
+  }
+
+  /**
+   * 关联包围框
+   * @param size
+   */
+  private linkLineBox(size: number): void {
+    const { THREE } = Externals.getInstance();
+    const boxGeometry = new THREE.BoxBufferGeometry(size, size, size);
+
+    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);
+  }
+
+  /**
+   * 关联球
+   * @returns
+   */
+  private linkShere(): NS_THREE.Mesh {
+    const { THREE } = Externals.getInstance();
+    if (!sphereInstance) {
+      const sphereGeometry = new THREE.SphereBufferGeometry(1, 60, 40);
+      sphereGeometry.scale(1, -1, 1);
+      sphereGeometry.rotateY(-90 * Math.PI / 180.0);
+      sphereInstance = new THREE.Mesh(sphereGeometry);
+      sphereInstance.visible = false;
+      sphereInstance.renderOrder = 150;
+    } else {
+      // sphereInstance.matrix.identity();
+    }
+    // sphereInstance.applyMatrix4(matrix);
+    return sphereInstance;
+  }
+
+  /**
+   * 挂载
+   * @ignore
+   */
+  public mount(): void {
+    TilePlaneUtil.setPlanesVisible(true);
+    this.tilePlanes = TilePlaneUtil.getPlanesByMatrix(
+      this.pid, this.level, this.textureURLs, this.offLineTextureLevel, this.offLinTextureUrls,
+    );
+    this.tilePlanes.forEach((plane) => {
+      this.add(plane);
+      plane.visible = true;
+      // plane.renderOnce();
+    });
+    this.sphereMesh = this.linkShere();
+    this.linkLineBox(TILE_PANORAMA_SIZE);
+    this.add(this.sphereMesh);
+    this.mounted = true;
+    this.emit(Events.DID_LOAD_PANORAMA, this.pid);
+  }
+
+  /**
+   * 卸载
+   */
+  public unMount(): void {
+    TilePlaneUtil.setPlanesVisible(false);
+    this.tilePlanes.forEach((plane) => {
+      // plane.visible = false;
+      this.remove(plane);
+    });
+    this.tilePlanes = [];
+    if (this.sphereMesh) {
+      this.remove();
+      this.sphereMesh = null;
+    }
+
+    this.mounted = false;
+  }
+
+  /**
+   * 更新等级
+   * @param level
+   */
+  public updateLevel(level: number): void {
+    const tLevel = Math.min(level, this.levelMax);
+    if (this.level !== tLevel) {
+      this.level = tLevel;
+      if (this.tilePlanes) {
+        this.tilePlanes.forEach((plane) => {
+          plane.level = tLevel;
+        });
+      }
+    }
+  }
+
+  /**
+   * 获取预处理纹理信息
+   * @returns
+   */
+  public getPreTextureInfos(): TileTextureInfo[] {
+    const ref = [] as TileTextureInfo[];
+    CubeFaceConfig.forEach((config, index) => {
+      const {
+        face,
+      } = config;
+      const {
+        level, textureURLs, offLineTextureLevel, offLinTextureUrls,
+      } = this;
+      const pPid = this.pid + (face + 1) / 10;
+      const count = TileUtil.getCount(this.level);
+      for (let i = 0; i < count; i++) {
+        const info = new TileTextureInfo(
+          pPid, 0, level, i, textureURLs[index], offLineTextureLevel, offLinTextureUrls[index],
+        );
+        if (level === 0) {
+          info.frize = true;
+        }
+        ref.push(info);
+      }
+    });
+    return ref;
+  }
+
+  /**
+   * 设置位移
+   * @param position
+   * @param quaternion
+   */
+  private setTransform(position: NS_THREE.Vector3 | undefined, quaternion: NS_THREE.Quaternion | undefined): void {
+    if (position) {
+      this.position.copy(position);
+    }
+    if (quaternion) {
+      this.quaternion.copy(quaternion);
+    }
+    const { THREE } = Externals.getInstance();
+    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(): void {
+  //   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 {
+    if (!this.sphereMesh) {
+      return;
+    }
+    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 {
+    if (!this.sphereMesh) {
+      return null;
+    }
+    const { THREE } = Externals.getInstance();
+    const { onReadyToPlay, onEnded, onPrepareToPlay } = callbacks || {};
+    this.videoContentType = contentType;
+
+    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 => {
+            if (this.sphereMesh) { 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);
+        if (this.sphereMesh) { 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;
+  }
+
+  /**
+   * 设置是否只使用低分辨率贴图
+   * @param useLowTexturesOnly 是否只使用低分辨率贴图
+   */
+  public setUseLowTexturesOnly(useLowTexturesOnly: boolean): void {
+    this.useLowTextureURLsOnly = useLowTexturesOnly;
+  }
+
+  /**
+   * 是否使用地分辨率贴图
+   * @returns
+   */
+  public isUseLowTexturesOnly(): boolean {
+    return this.useLowTextureURLsOnly;
+  }
+
+  /**
+   * 清理
+   */
+  public dispose(): void {
+    super.dispose();
+    if (this.mounted) {
+      this.unMount();
+    }
+    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.sphereMesh
+        && 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);
+  }
+
+  // /**
+  //  * @ignore
+  //  * @param view
+  //  * @returns
+  //  */
+  // public renderingViewChanged(view: View): void {
+  //   if (!view.camera) return;
+  //   super.renderingViewChanged(view);
+  //   this.tilePlanes.forEach((tilePlane) => {
+  //     tilePlane.renderingViewChanged(view);
+  //   });
+  // }
+
+  /**
+   * 获取盒子
+   * @ignore
+   * @returns
+   */
+  public getBox(): { size: number; matrix: NS_THREE.Matrix4 } {
+    return { size: 2, matrix: this.matrix };
+  }
+}
+
+export { TilePanorama, TilePanoramaViewConfiguration };