@aibee/owlly 1.0.25

package/src/owlly/element/placeable-2d.ts

@@ -0,0 +1,627 @@
+import { Externals, NS_THREE } from '../stage/externals';
+import { CSS2DObject } from '../../external/renderers/css-2d-renderer';
+import { Element, ElementFrameContext } from './element';
+import { View } from '../view/view';
+import { EventHub } from '../utils/event-hub';
+import { OwllyEvents, Events } from '../utils/events';
+import { Gif } from './gif-kit/Gif';
+import { GifPresenter } from './gif-kit/GifPresenter';
+
+/**
+ * @param targetView  指定的View
+ * @param faceToCamera  是否始终朝向摄像机，即公告牌模式。默认为true
+ * @param keepZOnFaceToCamera 是否保持Z轴垂直于地面
+ * @param visibilities  全景图pid与可见性对应关系的数组
+ * 其中如果有某个元素的pid为-1，表示其对应的visible属性会应用到所有未特别设置的全景点上
+ * @param positions  全景图pid与位置对应关系的数组
+ * 其中如果有某个元素的pid为-1，表示其对应的position属性会应用到所有未特别设置的全景点上
+ */
+interface Placeable2DViewConfiguration {
+  targetView: View;
+  visibilities?: { pid: number; visible: boolean }[];
+  positions?: { pid: number; position: NS_THREE.Vector3 }[];
+  faceToCamera?: boolean;
+  keepZOnFaceToCamera?: boolean;
+  showMesh?: boolean;
+  showDom?: boolean;
+  visibleScope?: number;
+}
+
+interface Placeable2DViewConfigurationInternal {
+  targetView: View;
+  visibilities?: Map<number, boolean>;
+  positions?: Map<number, NS_THREE.Vector3>;
+  faceToCamera?: boolean;
+  keepZOnFaceToCamera?: boolean;
+  showMesh?: boolean;
+  showDom?: boolean;
+  visibleScope?: number;
+}
+
+/**
+ * 2D贴图对象
+ * @noInheritDoc
+ */
+class Placeable2D extends Element {
+  private initialized: boolean;
+
+  private needUpdate: boolean;
+
+  private material: NS_THREE.Material;
+
+  private uniforms: { [uniform: string]: NS_THREE.IUniform };
+
+  private labelMesh: NS_THREE.Mesh;
+
+  private gif: Gif;
+
+  private gifLabelMesh: NS_THREE.Mesh;
+
+  private currentDisplayTime: number;
+
+  private frameIndex: number;
+
+  private gifMaterial: NS_THREE.MeshBasicMaterial;
+
+  // eslint-disable-next-line
+  private frames:Array<any> =[];
+
+  private tileDispDuration: number;
+
+  private gifCanvas: HTMLCanvasElement;
+
+  private gifContext: CanvasRenderingContext2D | null;
+
+  private giftexture: NS_THREE.Texture;
+
+  private width: number;
+
+  private height: number;
+
+  public labelID: number;
+
+  public viewConfigurations: Map<View, Placeable2DViewConfigurationInternal>;
+
+  private eventListeners: {
+    // onCurrentViewChanged: Function;
+    onMoveToPanorama: Function;
+    onPositionChanged: Function;
+  };
+
+  private currentPID: number;
+
+  private isEditingInView: Map<View, boolean>;
+
+  private movedToNewPanorama: boolean;
+
+  private cssObject: CSS2DObject | null;
+
+  private imgElement: HTMLDivElement | null;
+
+  private outOfRange: boolean;
+
+  private currentPanoramaPosition: NS_THREE.Vector3 | null;
+
+  public isDomElement: boolean;
+
+  private hidden: boolean;
+
+  private depthTest: boolean;
+
+  /**
+   * 注意：最好在[PanoramaController]初始化视角之前就添加好，否则会漏掉初始所在全景图的[MOVE_TO_PANORAMA]事件通知
+   * @param labelID 唯一ID
+   * @param url 图片地址
+   * @param options 可选参数，如矩形宽高
+   * @example
+   * ```typescript
+   * const placeable = new Placeable2D(1, url,
+   *  {
+   *    width: 0.3,
+   *    height: 0.3,
+   *  });
+   * stage.bindElement(placeable);
+   * ```
+   */
+  constructor(labelID: number, url: string,
+    options?: {
+      width?: number;
+      height?: number;
+      depthTest?: boolean;
+    }) {
+    super();
+    this.labelID = labelID;
+
+    this.initialized = false;
+    this.needUpdate = false;
+
+    this.isEditingInView = new Map();
+
+    this.currentPID = -1;
+
+    this.movedToNewPanorama = true;
+
+    this.outOfRange = true;
+
+    this.currentDisplayTime = 0;
+
+    this.frameIndex = 0;
+
+    this.tileDispDuration = 60;
+
+    this.hidden = false;
+
+    const { THREE } = Externals.getInstance();
+
+    const {
+      width,
+      height,
+      depthTest,
+    } = options || {};
+    this.width = width || 0.1;
+    this.height = height || 0.1;
+    this.depthTest = depthTest || false;
+
+    const geometry = new THREE.PlaneBufferGeometry(this.width, this.height);
+    // 顶点着色器
+    const vertexShader = `
+      varying vec2 vUv;
+      void main(){
+         vUv = uv;
+         gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+      }`;
+    // 片源着色器
+    const fragmentShader = `
+      uniform sampler2D map;
+      uniform vec4 blendColor;
+      uniform float opacity;
+      varying vec2 vUv;
+      void main(){
+         vec4 texColor = texture2D(map, vUv);
+         gl_FragColor = vec4((texColor * (1.0 - blendColor.a) + blendColor * blendColor.a).rgb, texColor.a) * vec4(1, 1, 1, opacity);
+      }`;
+
+    // uniform参数
+    this.uniforms = {
+      map: {
+        type: 't',
+        value: null,
+      },
+      blendColor: {
+        type: 'v4',
+        value: new THREE.Vector4(0, 0, 0, 0.0),
+      },
+      opacity: { value: 1 },
+    } as { [uniform: string]: NS_THREE.IUniform };
+
+    this.material = new THREE.ShaderMaterial({
+      // 设置透明属性，这样透过全景图就能看到标签
+      transparent: true,
+      vertexShader,
+      fragmentShader,
+      uniforms: this.uniforms,
+      depthTest: this.depthTest,
+      depthWrite: false,
+      name: 'placeable2DMaterial',
+      side: THREE.DoubleSide,
+    });
+
+    this.labelMesh = new THREE.Mesh(geometry, this.material);
+    this.labelMesh.renderOrder = 400;
+
+    this.add(this.labelMesh);
+
+    this.imgElement = document.createElement('div');
+    this.imgElement.style.pointerEvents = 'none';
+    this.imgElement.innerHTML = `<div><img width=50px height=50px src="${url}"></div>`;
+
+    this.cssObject = new CSS2DObject(this.imgElement);
+    this.add(this.cssObject);
+
+    this.viewConfigurations = new Map();
+    this.eventListeners = {
+      onMoveToPanorama: (pid: number, position: NS_THREE.Vector3): void => {
+        this.updateCurrentBindingPanorama(pid, position);
+      },
+      onPositionChanged: (position: NS_THREE.Vector3, element: Element, view: View): void => {
+        if (element !== this) return;
+        const { visible } = this.getViewConfigurationByPanoramaId(view, this.currentPID);
+        this.updateViewConfigurationByPanoramaId(view, this.currentPID, { visible, position });
+      },
+    };
+    // EventHub.on(OwllyEvents.RENDERING_VIEW_CHANGED, this.eventListeners.onCurrentViewChanged);
+
+    EventHub.on(Events.MOVE_TO_PANORAMA, this.eventListeners.onMoveToPanorama);
+
+    EventHub.on(OwllyEvents.ELEMENT_POSITION_UPDATED, this.eventListeners.onPositionChanged);
+
+    if (url) this.load(url);
+  }
+
+  // private async parseStream(stream: SuperGifStream): Promise<void> {
+  //   try {
+  //     const parser = new SuperGifParser(stream, this.handler);
+  //     await parser.parse();
+  //   } catch (err) {
+  //     //  this.handleError('parse');
+  //   }
+  // }
+
+  // private handler = {
+  //   img: (imgs: any) => {
+  //     console.log('-------------------------', imgs);
+  //   },
+  // }
+
+  public async load(url: string): Promise<void> {
+    this.initialized = false;
+    const regex = /\.gif$/;
+    const n = url.search(regex);
+    const { THREE } = Externals.getInstance();
+    if (n > 0) {
+      const xhr = new XMLHttpRequest();
+      xhr.open('GET', url, true);
+      xhr.responseType = 'arraybuffer';
+      xhr.onload = async (): Promise<void> => {
+        let arrayBuffer;
+        arrayBuffer = xhr.response;
+        this.gif = Gif.parse(arrayBuffer);
+
+        if (arrayBuffer.toString().indexOf('ArrayBuffer') > 0) {
+          arrayBuffer = new Uint8Array(arrayBuffer);
+        }
+        // const stream = new SuperGifStream(arrayBuffer);
+        // await this.parseStream(stream);
+
+        this.gif.split(true).forEach(async (i): Promise<void> => {
+          const img = new Image();
+          const blob = GifPresenter.writeToBlob(i.writeToArrayBuffer());
+          // img.src = GifPresenter.writeToDataUrl(i.writeToArrayBuffer());
+          img.src = URL.createObjectURL(blob);
+          img.onload = async (): Promise<void> => {
+            this.frames.push(img);
+            if (this.gif.frames.length === this.frames.length) {
+              this.frameIndex = 0;
+              this.currentDisplayTime = new Date().getTime();
+              const geometry = new THREE.PlaneBufferGeometry(this.width, this.height);
+              this.gifCanvas = document.createElement('canvas');
+              this.gifCanvas.width = this.gif.width;
+              this.gifCanvas.height = this.gif.height;
+
+              this.gifContext = this.gifCanvas.getContext('2d');
+              // document.body.appendChild(cnv);
+              if (this.gifContext) {
+                this.gifContext.drawImage(this.frames[this.frameIndex], 0, 0, this.gif.width, this.gif.height);
+              }
+              this.giftexture = new THREE.Texture(this.gifCanvas);
+              this.giftexture.needsUpdate = true;
+              this.gifMaterial = new THREE.MeshBasicMaterial({
+                map: this.giftexture,
+                transparent: true,
+                side: THREE.DoubleSide,
+              });
+              // this.gifMaterial = new MeshBasicMaterial({ color: 0x2194ce, transparent: true, side: DoubleSide });
+              this.gifLabelMesh = new THREE.Mesh(geometry, this.gifMaterial);
+              this.add(this.gifLabelMesh);
+              // console.log('----texture-------', this.gif.width, this.gif.height, this.giftexture);
+              this.needUpdate = true;
+              this.emit(Events.ELEMENT_LOADED, this);
+            }
+          };
+        });
+      };
+      xhr.send();
+    } else {
+      // console.log(`## Loading texture from:${url}`);
+      new THREE.TextureLoader().load(url,
+        (texture) => {
+          // console.log('## Texture loaded');
+          this.uniforms.map.value = texture;
+          this.needUpdate = true;
+          this.emit(Events.ELEMENT_LOADED, this);
+        });
+      // url.slice();
+    }
+  }
+
+  private drawCanvas(): void{
+    if (this.gifContext) {
+      this.gifContext.clearRect(0, 0, this.gif.width, this.gif.height);
+      this.gifContext.drawImage(this.frames[this.frameIndex], 0, 0, this.gif.width, this.gif.height);
+      this.giftexture.needsUpdate = true;
+      this.needUpdate = true;
+    }
+    // this._texture.needsUpdate = true;
+  }
+
+  public update(): ElementFrameContext {
+    const frameContext = new ElementFrameContext(this);
+    if (!this.initialized) {
+      this.initialized = true;
+      frameContext.needUpdate = true;
+    }
+    if (this.needUpdate) {
+      frameContext.needUpdate = true;
+      this.needUpdate = false;
+    }
+
+    if (this.gifLabelMesh !== null) {
+      const time = new Date().getTime();
+      if ((time - this.currentDisplayTime) >= this.tileDispDuration) {
+        this.currentDisplayTime = time;
+        this.frameIndex += 1;
+        if (this.frameIndex >= this.frames.length) {
+          this.frameIndex = 0;
+        }
+        this.drawCanvas();
+        // console.log('Add Frame', this.frameIndex);
+      }
+    }
+    if (this.initialized && !this.parent) {
+      frameContext.shouldPlaceElement = true;
+    }
+    return frameContext;
+  }
+
+  public dispose(): void {
+    const texture = this.uniforms.map.value as NS_THREE.Texture;
+    if (texture) {
+      texture.dispose();
+    }
+    // EventHub.off(OwllyEvents.RENDERING_VIEW_CHANGED, this.eventListeners.onCurrentViewChanged);
+    EventHub.off(Events.MOVE_TO_PANORAMA, this.eventListeners.onMoveToPanorama);
+    EventHub.off(OwllyEvents.ELEMENT_POSITION_UPDATED, this.eventListeners.onPositionChanged);
+    this.imgElement = null;
+    this.cssObject!.dispatchEvent({ type: 'remove' });
+    this.remove(this.cssObject!);
+    this.cssObject = null;
+    super.dispose();
+  }
+
+  // renderingViewChanged(view: View): void {
+  //   const conf0 = this.viewConfigurations.get(view);
+  //   const { THREE } = Externals.getInstance();
+  //   if (!conf0) return;
+  //   const conf = {
+  //     faceToCamera: true,
+  //     keepZOnFaceToCamera: true,
+  //   } as Placeable2DViewConfigurationInternal;
+  //   if (undefined !== conf0.faceToCamera) {
+  //     conf.faceToCamera = conf0.faceToCamera;
+  //   }
+  //   if (undefined !== conf0.keepZOnFaceToCamera) {
+  //     conf.keepZOnFaceToCamera = conf0.keepZOnFaceToCamera;
+  //   }
+  //   conf.visibilities = conf0.visibilities;
+
+  //   if (this.movedToNewPanorama && this.currentPanoramaPosition) {
+  //     conf.positions = conf0.positions;
+  //     if (conf.positions) {
+  //       let position = conf.positions.get(this.currentPID);
+  //       if (!position) {
+  //         position = conf.positions.get(-1);
+  //       }
+  //       if (position) {
+  //         this.position.copy(position);
+  //       }
+  //     }
+
+  //     this.outOfRange = this.currentPanoramaPosition.distanceTo(this.position) >= conf0.visibleScope!;
+
+  //     this.movedToNewPanorama = false;
+  //   }
+
+  //   if (conf.visibilities) {
+  //     let visibility = conf.visibilities.get(this.currentPID);
+  //     if (undefined === visibility) {
+  //       visibility = conf.visibilities.get(-1);
+  //     }
+  //     visibility = visibility && !this.outOfRange;
+  //     const editing = !!this.isEditingInView.get(view);
+  //     this.labelMesh.visible = !!((visibility || editing) && conf0.showMesh) && !this.hidden;
+  //     this.cssObject!.visible = !!((visibility || editing) && conf0.showDom) && !this.hidden;
+  //     this.visible = this.labelMesh.visible || this.cssObject!.visible;
+  //     this.uniforms.opacity.value = 1;
+  //     if (this.cssObject!.visible && !conf0.showMesh) {
+  //       this.labelMesh.visible = true;
+  //       this.uniforms.opacity.value = 0;
+  //     }
+  //     if (this.isEditingInView.get(view) && !visibility) {
+  //       this.uniforms.blendColor.value = new THREE.Vector4(1, 0, 0, 0.5);
+  //     } else this.uniforms.blendColor.value = new THREE.Vector4(0, 0, 0, 0);
+  //   }
+
+  //   if (conf.faceToCamera && view.camera) {
+  //     this.up.copy(view.camera.up).normalize();
+  //     if (conf.keepZOnFaceToCamera) {
+  //       const v = new THREE.Vector3().copy(view.camera.position).sub(this.position);
+  //       const positionOnZ = view.camera.position.clone().addScaledVector(this.up, -v.dot(this.up));
+  //       this.lookAt(positionOnZ);
+  //     } else {
+  //       this.lookAt(view.camera.position);
+  //     }
+  //   }
+  // }
+
+  /**
+   * 设置在指定View中的显示配置参数
+   * @param configuration 显示配置对象
+   * @example
+   * ```typescript
+   * label2D.addViewConfiguration({
+   *   targetView: view,
+   *   positions: [
+   *     { pid: 6, position: labelPosition3 },
+   *     { pid: 3, position: labelPosition6 },
+   *   ],
+   *   visibilities: [{ pid: -1, visible: false }],
+   *   faceToCamera: true,
+   * });
+   * ```
+   */
+  public addViewConfiguration(configuration: Placeable2DViewConfiguration): void {
+    const config = {
+      targetView: configuration.targetView,
+      faceToCamera: configuration.faceToCamera,
+      keepZOnFaceToCamera: configuration.keepZOnFaceToCamera,
+      showDom: false,
+      showMesh: true,
+      visibleScope: 5,
+    } as Placeable2DViewConfigurationInternal;
+    const prevConfig = this.viewConfigurations.get(configuration.targetView);
+    if (prevConfig) {
+      config.visibilities = prevConfig.visibilities;
+      config.positions = prevConfig.positions;
+      if (undefined === config.faceToCamera) {
+        config.faceToCamera = prevConfig.faceToCamera;
+      }
+      if (undefined === config.keepZOnFaceToCamera) {
+        config.keepZOnFaceToCamera = prevConfig.keepZOnFaceToCamera;
+      }
+      config.showDom = prevConfig.showDom;
+      config.showMesh = prevConfig.showMesh;
+      config.visibleScope = prevConfig.visibleScope;
+    }
+
+    if (configuration.showDom !== undefined) config.showDom = configuration.showDom;
+    if (configuration.showMesh !== undefined) config.showMesh = configuration.showMesh;
+    if (configuration.visibleScope !== undefined) config.visibleScope = configuration.visibleScope;
+
+    if (configuration.visibilities) {
+      if (!config.visibilities) {
+        config.visibilities = new Map();
+      }
+      configuration.visibilities.forEach(
+        (
+          item: {
+              pid: number;
+              visible: boolean;
+            },
+        ) => {
+            config.visibilities!.set(item.pid, item.visible);
+        },
+      );
+    }
+
+    if (configuration.positions) {
+      if (!config.positions) {
+        config.positions = new Map();
+      }
+      configuration.positions.forEach(
+        (
+          item: {
+              pid: number;
+              position: NS_THREE.Vector3;
+            },
+        ) => {
+            config.positions!.set(item.pid, item.position);
+        },
+      );
+    }
+    this.viewConfigurations.set(config.targetView, config);
+  }
+
+  /**
+   * 设置当前标签是否处于编辑模式
+   * @param editingMode 是否设置为编辑模式
+   */
+  public setEditingMode(targetView: View, editingMode: boolean): void {
+    this.isEditingInView.set(targetView, editingMode);
+    this.needUpdate = true;
+    // if (editingMode) {
+    //   this.editViewConfiguration(targetView, {
+    //     position: this.position.clone(),
+    //     visibility: this.visible,
+    //   });
+    // }
+  }
+
+  public isEditing(targetView: View): boolean {
+    return !!this.isEditingInView.get(targetView);
+  }
+
+  /**
+   * 设置标签尺寸
+   * @param width 宽度
+   * @param height 高度
+   */
+  public setSize(width: number, height: number): void {
+    const { THREE } = Externals.getInstance();
+    this.width = width;
+    this.height = height;
+    const geometry = new THREE.PlaneBufferGeometry(width, height);
+    this.labelMesh.geometry = geometry;
+  }
+
+  /**
+     * 查询当前设置的标签尺寸
+     * @returns number数组，依次是width, height
+     */
+  public getSize(): number[] {
+    return [this.width, this.height];
+  }
+
+  /**
+   * 设置imgElement Css
+   * @param cssText string
+   * @param width 宽
+   * @param height 高
+   */
+  public setDomCSS(width: number, height: number, cssText?: string): void {
+    if (this.imgElement) {
+      const img = this.imgElement.getElementsByTagName('img')[0];
+      let css;
+      if (cssText) {
+        css = `${cssText};width:${width.toString()}px;height:${height.toString()}px;`;
+      } else css = `width:${width.toString()}px;height:${height.toString()}px;`;
+
+      img.style.cssText = css;
+      this.width = width;
+      this.height = height;
+      this.isDomElement = true;
+    }
+  }
+
+  public getViewConfigurationByPanoramaId(
+    view: View,
+    pid: number,
+  ): { visible: boolean; position: NS_THREE.Vector3 } {
+    const conf = this.viewConfigurations.get(view);
+    if (!conf) throw new Error('Cannot find view configuration');
+    const position = conf.positions!.has(pid) ? conf.positions!.get(pid)! : conf.positions!.get(-1)!;
+    const visible = conf.visibilities!.has(pid) ? conf.visibilities!.get(pid)! : conf.visibilities!.get(-1)!;
+    return { visible, position };
+  }
+
+  public updateViewConfigurationByPanoramaId(
+    view: View,
+    pid: number,
+    { visible, position }: { visible?: boolean; position?: NS_THREE.Vector3 },
+  ): void {
+    const conf = this.viewConfigurations.get(view);
+    if (!conf) throw new Error('Cannot find view configuration');
+    if (position !== undefined) conf.positions!.set(pid, position);
+    if (visible !== undefined) conf.visibilities!.set(pid, visible);
+    this.needUpdate = true;
+  }
+
+  /**
+   * 手动更新Placeable2D当前所在全景点位
+   * @param pid 点位id
+   * @param position 全景点位坐标
+   */
+  public updateCurrentBindingPanorama(pid: number, position: NS_THREE.Vector3): void {
+    this.currentPID = pid;
+    this.movedToNewPanorama = true;
+    this.currentPanoramaPosition = position ? position.clone() : null;
+  }
+
+  /**
+   * 将Placeable2D设置为不可见
+   */
+  public setHidden(hidden: boolean): void {
+    this.hidden = hidden;
+  }
+}
+
+export { Placeable2D, Placeable2DViewConfiguration };