@aibee/owlly 1.0.25

package/src/owlly/element/gltf-mesh-element.ts

@@ -0,0 +1,184 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
+import { NS_THREE, Externals } from '../stage/externals';
+import { Element, ElementFrameContext } from './element';
+import { BasicTools } from '../utils/basic-tools';
+import { View } from '../view/view';
+import { Events } from '../utils/events';
+
+class GLTFMeshElement extends Element {
+    private initialized: boolean;
+
+    private loaded: boolean;
+
+    private needUpdate: boolean;
+
+    private meshes: NS_THREE.Mesh[];
+
+    private meshMaterials: NS_THREE.MeshBasicMaterial[];
+
+    private group: NS_THREE.Group;
+
+    private reloadTimes = 1;
+
+    private options: {
+      fillColor?: NS_THREE.Color | string | number;
+      transparent?: boolean;
+      depthTest?: boolean;
+      renderOrder?: number;
+    };
+
+    private eventListeners: {
+      onCurrentViewChanged: (view: View) => void;
+    };
+
+    constructor(
+      modelUrl: string,
+      optionalParams?: {
+        fillColor?: NS_THREE.Color | string | number;
+        transparent?: boolean;
+        depthTest?: boolean;
+        renderOrder?: number;
+      },
+      meshoptDecoder?: any,
+    ) {
+      super();
+      const { THREE } = Externals.getInstance();
+      this.options = optionalParams || {};
+      this.meshes = [];
+      this.meshMaterials = [];
+      this.group = new THREE.Group();
+      this.add(this.group);
+
+      // const material = options.material || new THREE.MeshBasicMaterial({
+      //   color: options.fillColor ? options.fillColor : 0x00ff00,
+      //   transparent: options.transparent !== undefined ? options.transparent : false,
+      //   opacity: options.opacity !== undefined ? options.opacity : 1,
+      //   side: DoubleSide,
+      //   depthWrite: true,
+      // });
+
+      // const plainVertices: number[] = [];
+      // vertices.forEach((vertex) => { plainVertices.push(vertex.x, vertex.y, vertex.z); });
+      // const vertexBuffer = new Float32Array(plainVertices);
+      // const bufferGeometry = new BufferGeometry();
+      // bufferGeometry.setAttribute('position', new BufferAttribute(vertexBuffer, 3));
+      // bufferGeometry.setIndex(triangles);
+      // const mesh = new THREE.Mesh(bufferGeometry, material);
+      // mesh.renderOrder = 1000;
+      // this.group.add(mesh);
+      if (modelUrl) this.load(modelUrl, 0, meshoptDecoder);
+      this.initialized = false;
+      this.loaded = false;
+    }
+
+    /**
+   * 读取Mesh模型
+   * @param url NS_THREE.Mesh模型地址
+   */
+    public load(url: string, index = 0, meshoptDecoder?: any): void {
+      this.initialized = false;
+      this.loaded = false;
+      const loader = new GLTFLoader();
+      if (meshoptDecoder) {
+        loader.setMeshoptDecoder(meshoptDecoder);
+      }
+      const { THREE } = Externals.getInstance();
+      loader.load(url, (gltf: any): void => {
+      // this.modelNode = gltf.scene;
+        this.add(gltf.scene);
+        this.group.add(gltf.scene);
+        this.loaded = true;
+        this.initialized = true;
+        this.needUpdate = true;
+        gltf.scene.traverse((obj: any) => {
+          if (obj instanceof THREE.Mesh) {
+            this.meshes.push(obj as NS_THREE.Mesh);
+            this.meshMaterials.push((obj as NS_THREE.Mesh).material as NS_THREE.MeshBasicMaterial);
+          }
+        });
+        this.setOptions(this.options);
+        // if (useBVH) {
+        //   this.bvh = BVHTree.createBVHTree(gltf.scene);
+        // } else {
+        //   this.raycaster = new Raycaster();
+        // }
+        // const box = new Box3().setFromObject(gltf.scene);
+        // const { max, min } = box;
+        // this.boundingBoxMesh.geometry = new BoxBufferGeometry(max.x - min.x, max.y - min.y, max.z - min.z);
+        // this.boundingBoxMesh.position.copy(max.clone().add(min.clone()).multiplyScalar(0.5));
+        this.emit(Events.ELEMENT_LOADED, this);
+      }, undefined, (error: ErrorEvent): void => {
+        const nextIndex = index + 1;
+        if (nextIndex > this.reloadTimes) {
+          this.emit(Events.ELEMENT_LOADED_ERROR, this, error);
+        } else {
+          this.load(url, nextIndex, meshoptDecoder);
+        }
+      });
+    }
+
+    private setOptions(options: {
+      fillColor?: NS_THREE.Color | string | number;
+      transparent?: boolean;
+      depthTest?: boolean;
+      renderOrder?: number;
+    }): void {
+      const { THREE } = Externals.getInstance();
+      this.meshes.forEach((m) => {
+        if (options.renderOrder) {
+          m.renderOrder = options.renderOrder;
+        }
+      });
+      this.meshMaterials.forEach((m) => {
+        m.depthTest = !!options.depthTest;
+        m.transparent = !!options.transparent;
+        if (options.fillColor) {
+          m.color = new THREE.Color(options.fillColor);
+        }
+      });
+      this.options = { ...options, ...this.options };
+    }
+
+    public setSacle(scale: number): void {
+      this.meshes.forEach((m) => {
+        m.geometry.scale(scale, scale, scale);
+      });
+      this.needUpdate = true;
+    }
+
+    public setOnCurrentViewChanged(func: (view: View) => void): void {
+      // if (this.eventListeners && this.eventListeners.onCurrentViewChanged) {
+      //   EventHub.off(OwllyEvents.RENDERING_VIEW_CHANGED, this.eventListeners.onCurrentViewChanged);
+      // }
+      this.eventListeners = {
+        onCurrentViewChanged: func,
+      };
+      // EventHub.on(OwllyEvents.RENDERING_VIEW_CHANGED, this.eventListeners.onCurrentViewChanged);
+    }
+
+    // renderingViewChanged(view: View): void {
+    //   if (this.eventListeners && this.eventListeners.onCurrentViewChanged) {
+    //     this.eventListeners.onCurrentViewChanged(view);
+    //   }
+    // }
+
+    public update(): ElementFrameContext {
+      const frameContext = new ElementFrameContext(this);
+      if (!this.initialized && this.loaded) {
+        this.initialized = true;
+        frameContext.needUpdate = true;
+      }
+      if (this.initialized && !this.parent) {
+        frameContext.shouldPlaceElement = true;
+      }
+      return frameContext;
+    }
+
+    public dispose(): void {
+      super.dispose();
+      BasicTools.dispose(this, true);
+    }
+}
+
+export { GLTFMeshElement };

package/src/owlly/element/index.ts

@@ -0,0 +1,25 @@
+export * from './map-kit';
+
+export * from './element';
+export * from './placeable-2d';
+export * from './mesh-line-2d';
+export * from './ring-element';
+export * from './bottom-nav-element';
+// #if WEB_ONLY
+export * from './floor-model';
+export * from './panorama';
+export * from './panorama-group';
+export * from './svg-floor-model';
+export * from './svg-floors';
+export * from './camera';
+export * from './path';
+export * from './path-group';
+export * from './gltf-mesh-element';
+export * from './mesh-element';
+export * from './polygon-mesh';
+export * from './sphere-mesh';
+// export * from './dom-3d-element';
+// export * from './dom-2d-element';
+export * from './dom-label-2d';
+export * from './video-element';
+// #endif

package/src/owlly/element/map-kit/area.ts

@@ -0,0 +1,232 @@
+import { parse } from 'svgson';
+import Color from 'color';
+import { Externals, NS_THREE } from '../../stage/externals';
+import { Element, ElementFrameContext } from '../element';
+import { SvgUtils, SvgNode, CanvasNode } from '../../utils/svgutils';
+import { ModelSvgMapping } from '../../view/svg-map-view';
+import { BasicTools } from '../../utils/basic-tools';
+
+interface ShapeDef {
+  shape: NS_THREE.Shape;
+  color: number;
+  tag?: string;
+}
+
+/**
+ * SVG楼层模型, 暂时弃用, 仅为ICBC项目设计
+ * @deprecated
+ * @noInheritDoc
+ */
+class Area extends Element {
+  private initialized: boolean;
+
+  private loaded: boolean;
+
+  private opacity: number;
+
+  private mapping: ModelSvgMapping;
+
+  private groundMeshes: NS_THREE.Mesh[];
+
+  private areas: NS_THREE.Mesh[];
+
+  constructor(url: string, mapping: ModelSvgMapping, opacity = 1) {
+    super();
+    this.initialized = false;
+    this.loaded = false;
+    this.mapping = mapping;
+    this.groundMeshes = [];
+    this.areas = [];
+    this.opacity = opacity;
+    if (url) this.load(url);
+  }
+
+  private static getShapeDefs(canvasObject: CanvasNode): ShapeDef[] {
+    const result: ShapeDef[] = [];
+    const { THREE } = Externals.getInstance();
+    if (canvasObject.commands && canvasObject.commands.length) {
+      const shape = new THREE.Shape();
+      const holes: NS_THREE.Path[] = [];
+      let hole: NS_THREE.Path | null = null;
+      let shapeCount = 0;
+      canvasObject.commands.forEach(({ command, args }) => {
+        if (hole && shapeCount > 1) {
+          if (command === 'M') {
+            if (hole) holes.push(hole);
+            hole = new THREE.Path();
+            hole.moveTo(args[0], args[1]);
+          }
+          if (command === 'C') hole.bezierCurveTo(args[0], args[1], args[2], args[3], args[4], args[5]);
+          if (command === 'L') hole.lineTo(args[0], args[1]);
+        } else {
+          if (command === 'M') {
+            shapeCount += 1;
+            if (shapeCount === 2) {
+              hole = new THREE.Path();
+              hole.moveTo(args[0], args[1]);
+            } else {
+              shape.moveTo(args[0], args[1]);
+            }
+          }
+          if (command === 'C') shape.bezierCurveTo(args[0], args[1], args[2], args[3], args[4], args[5]);
+          if (command === 'L') shape.lineTo(args[0], args[1]);
+        }
+      });
+      if (hole) holes.push(hole);
+      shape.holes = holes;
+      const shapeDef = { shape };
+      if (canvasObject.fill) {
+        Object.assign(
+          shapeDef,
+          { color: parseInt(canvasObject.fill.substr(1), 16) },
+        );
+      }
+      if (canvasObject.tag) {
+        Object.assign(shapeDef, { tag: canvasObject.tag });
+      }
+      if ((shapeDef as any).tag === 'ground' || (shapeDef as any).tag === 'area') result.push(shapeDef as ShapeDef); // eslint-disable-line
+    }
+    if (canvasObject.children && canvasObject.children.length) {
+      canvasObject.children.forEach((child) => {
+        result.push(...Area.getShapeDefs(child));
+      });
+    }
+    return result;
+  }
+
+  public async load(url: string): Promise<void> {
+    this.initialized = false;
+    this.loaded = false;
+    const { THREE } = Externals.getInstance();
+
+    // Avoid using axios. Use FileLoader instead.
+    const svg: string = await new Promise((resolve) => {
+      const fileLoader = new THREE.FileLoader();
+      fileLoader.load(url, (data: string) => {
+        resolve(data);
+      });
+    });
+    const svgObject = await parse(svg) as SvgNode;
+    const canvasObject = SvgUtils.svg2canvas(svgObject, this.mapping);
+    if (canvasObject !== null) {
+      const shapeDefs = Area.getShapeDefs(canvasObject);
+      const group = new THREE.Group();
+
+      shapeDefs.forEach(({ shape, color, tag }) => {
+        const geometry = new THREE.ShapeBufferGeometry(shape);
+        const material = new THREE.MeshBasicMaterial({
+          color,
+          transparent: true,
+          opacity: this.opacity,
+          side: THREE.DoubleSide,
+        });
+        const wallColor = Color(`#${color.toString(16)}`).lighten(0.5).desaturate(0.5).rotate(5)
+          .hex();
+        const wallMaterial = new THREE.MeshBasicMaterial({
+          color: wallColor,
+          transparent: true,
+          opacity: this.opacity * 0.7,
+          side: THREE.DoubleSide,
+          depthWrite: false,
+        });
+        const mesh = new THREE.Mesh(geometry, material);
+
+        group.add(mesh);
+        let offsetZ = 0;
+        if (tag === 'ground') {
+          mesh.position.set(0, 0, -0.5);
+          offsetZ = 0.5;
+        }
+
+        // walls
+        const shapePoints = shape.getPoints();
+        shapePoints.reduce((v0, v1) => {
+          const { x: x0, y: y0 } = v0;
+          const { x: x1, y: y1 } = v1;
+          const bufferGeometry = new THREE.BufferGeometry();
+          const vertices = new Float32Array([
+            x0, y0, 0.0 - offsetZ,
+            x0, y0, 5.0 + offsetZ,
+            x1, y1, 0.0 - offsetZ,
+            x0, y0, 5.0 + offsetZ,
+            x1, y1, 0.0 - offsetZ,
+            x1, y1, 5.0 + offsetZ,
+          ]);
+          bufferGeometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));
+          const wallMesh = new THREE.Mesh(bufferGeometry, wallMaterial);
+          group.add(wallMesh);
+          if (tag === 'area') {
+            this.areas.push(wallMesh);
+          }
+          return v1;
+        });
+        const { x: x0, y: y0 } = shapePoints[shapePoints.length - 1];
+        const { x: x1, y: y1 } = shapePoints[0];
+        const bufferGeometry = new THREE.BufferGeometry();
+        const vertices = new Float32Array([
+          x0, y0, 0.0 - offsetZ,
+          x0, y0, 5.0 + offsetZ,
+          x1, y1, 0.0 - offsetZ,
+          x0, y0, 5.0 + offsetZ,
+          x1, y1, 0.0 - offsetZ,
+          x1, y1, 5.0 + offsetZ,
+        ]);
+        bufferGeometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));
+        const wallMesh = new THREE.Mesh(bufferGeometry, wallMaterial);
+        group.add(wallMesh);
+        if (tag === 'area') {
+          this.areas.push(wallMesh);
+          this.areas.push(mesh);
+        }
+        // walls end
+      });
+
+      this.add(group);
+      this.loaded = true;
+    }
+  }
+
+  public setOpacity(value: number): void {
+    const { THREE } = Externals.getInstance();
+    this.traverse((o) => {
+      const m = (o as NS_THREE.Mesh);
+      if (m.isMesh && m.material instanceof THREE.Material) {
+        m.material.opacity = value;
+      }
+    });
+  }
+
+  public setShadowEnabled(value: boolean): void {
+    this.groundMeshes.forEach((m) => {
+      // eslint-disable-next-line
+      m.receiveShadow = value;
+    });
+  }
+
+  public setAreasVisible(value: boolean): void {
+    this.areas.forEach((m) => {
+      m.visible = value;
+    });
+  }
+
+  public update(): ElementFrameContext {
+    const frameContext = new ElementFrameContext(this);
+    if (!this.initialized && this.loaded) {
+      this.initialized = true;
+      frameContext.needUpdate = true;
+    }
+    if (this.initialized && !this.parent) {
+      frameContext.shouldPlaceElement = true;
+    }
+    return frameContext;
+  }
+
+  public dispose(): void {
+    super.dispose();
+    this.groundMeshes = [];
+    this.areas = [];
+    BasicTools.dispose(this, true);
+  }
+}
+
+export { Area };

package/src/owlly/element/map-kit/block-set.ts

@@ -0,0 +1,102 @@
+import { Element, ElementFrameContext } from '../element';
+import { BasicTools } from '../../utils/basic-tools';
+import { Shape } from './shape';
+import { Block } from './block';
+import { Events } from '../../utils/events';
+
+/**
+ * 块状模型组
+ * @noInheritDoc
+ */
+class BlockSet extends Element {
+  private initialized: boolean;
+
+  private loaded: boolean;
+
+  private lowPerformance: boolean;
+
+  public blocks: Block[];
+
+  private viewWidth: number;
+
+  private viewHeight: number;
+
+  private tag: string;
+
+  private renderStroke: boolean;
+
+  /**
+   * 块状模型组通用类
+   * @param shapes 块状模型基础图形组
+   * @example
+   * ```typescript
+   * // 以使用svg生成Shape对象为例, 首先将svg解析为Shape对象
+   * const shapes = await SvgUtils.parseSVG(
+   *   <svg url>,
+   *   [0.02, 0, 0, 0, 0, -0.02, 0, 0, 0, 0, 0, 0, -40, 40, 0, 1], // 对齐矩阵
+   * );
+   * // 用每个shape生成对应的block
+   * const blocks = new Block(shapes);
+   * // 绑定block
+   * stage.bindElement(blocks);
+   * ```
+   */
+  constructor(shapes: Shape[], lowPerformance = false, tag = '', renderStroke = true) {
+    super();
+    this.initialized = false;
+    this.loaded = false;
+    this.blocks = [];
+    this.lowPerformance = lowPerformance;
+    this.tag = tag;
+    this.renderStroke = renderStroke;
+    if (shapes) this.load(shapes, this.lowPerformance, this.renderStroke);
+  }
+
+  public async load(shapes: Shape[], lowPerformance = false, renderStroke = true): Promise<void> {
+    this.initialized = false;
+    this.loaded = false;
+    this.lowPerformance = lowPerformance;
+    this.renderStroke = renderStroke;
+
+    shapes.forEach((shape) => {
+      const block = new Block(shape, this.lowPerformance, this.tag, renderStroke);
+      this.blocks.push(block);
+      this.add(block);
+    });
+
+    this.loaded = true;
+  }
+
+  public update(): ElementFrameContext {
+    const frameContext = new ElementFrameContext(this);
+    if (!this.initialized && this.loaded) {
+      this.initialized = true;
+      frameContext.needUpdate = true;
+    }
+    if (this.initialized && !this.parent) {
+      frameContext.shouldPlaceElement = true;
+      this.emit(Events.ELEMENT_LOADED, this);
+    }
+    return frameContext;
+  }
+
+  public dispose(): void {
+    super.dispose();
+    this.blocks.forEach((block) => {
+      this.remove(block);
+      block.dispose();
+    });
+    BasicTools.dispose(this, true);
+  }
+
+  public resize(width: number, height: number): void {
+    if (this.viewWidth === width && this.viewHeight === height) return;
+    this.blocks.forEach((block) => {
+      block.resize(width, height);
+    });
+    this.viewWidth = width;
+    this.viewHeight = height;
+  }
+}
+
+export { BlockSet };