@aibee/owlly 1.0.25

package/src/owlly/element/svg-floor-model.ts

@@ -0,0 +1,200 @@
+import { parse } from 'svgson';
+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楼层模型, 不应再被维护
+ * @noInheritDoc
+ * @deprecated
+ */
+class SvgFloorModel extends Element {
+  private initialized: boolean;
+
+  private loaded: boolean;
+
+  private opacity: number;
+
+  private mapping: ModelSvgMapping;
+
+  private groundMeshes: NS_THREE.Mesh[];
+
+  constructor(url: string, mapping: ModelSvgMapping, opacity = 1) {
+    super();
+    this.initialized = false;
+    this.loaded = false;
+    this.opacity = opacity;
+    this.mapping = mapping;
+    this.groundMeshes = [];
+    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 });
+      }
+      result.push(shapeDef as ShapeDef);
+    }
+    if (canvasObject.children && canvasObject.children.length) {
+      canvasObject.children.forEach((child) => {
+        result.push(...SvgFloorModel.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 = SvgFloorModel.getShapeDefs(canvasObject);
+      const group = new THREE.Group();
+      shapeDefs.forEach(({ shape, color, tag }) => {
+        const options = {
+          steps: 1,
+          depth: 1,
+          bevelEnabled: false,
+          bevelThickness: 0.1,
+          bevelSize: 0.2,
+          bevelOffset: 0,
+          bevelSegments: 2,
+        };
+        switch (tag) {
+          case 'ground':
+            Object.assign(options, { bevelSize: 0.1, depth: 0.8 });
+            break;
+          case 'store':
+            Object.assign(
+              options,
+              { depth: 2, bevelThickness: 0.3, bevelSize: 0.3 },
+            );
+            break;
+          default:
+            break;
+        }
+        const geometry = new THREE.ExtrudeBufferGeometry(
+          shape,
+          options as NS_THREE.ExtrudeGeometryOptions,
+        );
+        const material = new THREE.MeshLambertMaterial({
+          color,
+          transparent: true,
+          opacity: this.opacity,
+        });
+        const mesh = new THREE.Mesh(geometry, material);
+        switch (tag) {
+          case 'ground':
+            mesh.receiveShadow = true;
+            mesh.position.set(0, 0, -0.2);
+            this.groundMeshes.push(mesh);
+            break;
+          case 'impassable':
+          case 'store':
+            mesh.castShadow = true;
+            break;
+          default:
+            break;
+        }
+        group.add(mesh);
+      });
+
+      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 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 = [];
+    BasicTools.dispose(this, true);
+  }
+}
+
+export { SvgFloorModel };

package/src/owlly/element/svg-floors.ts

@@ -0,0 +1,121 @@
+import TWEEN from '@tweenjs/tween.js';
+
+import { Element, ElementFrameContext } from './element';
+import { ModelSvgMapping } from '../view/svg-map-view';
+import { SvgFloorModel } from './svg-floor-model';
+
+interface SvgModelInfo {
+  url: string;
+  mapping: ModelSvgMapping;
+}
+
+/**
+ * SVG楼层模型组, 不应再被维护
+ * @noInheritDoc
+ * @deprecated
+ */
+class SvgFloors extends Element {
+  private initialized: boolean;
+
+  private loadCounter: number;
+
+  private floorInfos: SvgModelInfo[];
+
+  private floors: SvgFloorModel[];
+
+  private visibleFloorIndex: number;
+
+  private renderThisFrame: boolean;
+
+  constructor(floors: SvgModelInfo[], visibleFloorIndex = 0) {
+    super();
+    this.initialized = false;
+    this.loadCounter = 0;
+    this.floorInfos = floors;
+    this.visibleFloorIndex = visibleFloorIndex;
+    this.renderThisFrame = false;
+    this.floors = [];
+    this.floorInfos.forEach(({ url, mapping }) => {
+      this.floors.push(new SvgFloorModel(url, mapping));
+    });
+    this.add(...this.floors);
+    this.setFloorVisible(visibleFloorIndex);
+  }
+
+  public update(): ElementFrameContext {
+    this.floors.forEach((f) => {
+      const ctx = f.update();
+      if (ctx.shouldPlaceElement) this.loadCounter += 1;
+    });
+    const frameContext = new ElementFrameContext(this);
+    if (!this.initialized && this.loadCounter === this.floors.length) {
+      this.initialized = true;
+      frameContext.needUpdate = true;
+    }
+    if (this.renderThisFrame) frameContext.needUpdate = true;
+    this.renderThisFrame = false;
+    if (this.initialized && !this.parent) {
+      frameContext.shouldPlaceElement = true;
+    }
+    return frameContext;
+  }
+
+  public setFloorVisible(index: number): void {
+    this.floors.forEach((f, i) => { f.visible = i === index; });
+  }
+
+  public async switchToFloor(index: number): Promise<unknown> {
+    if (index < 0 || index >= this.floors.length) throw Error('Index out of range');
+    this.renderThisFrame = true;
+
+    if (index === this.visibleFloorIndex) return;
+    const modelFrom = this.floors[this.visibleFloorIndex];
+    const modelTo = this.floors[index];
+    const reverse = this.visibleFloorIndex < index;
+    modelTo.position.setZ(reverse ? 0 : -20);
+    modelTo.setOpacity(0);
+    modelTo.visible = true;
+    modelFrom.setShadowEnabled(false);
+
+    await new Promise((resolve) => {
+      new TWEEN.Tween({ z: 0, alpha: 1 })
+        .to({ z: 20, alpha: 0 }, 500)
+        .easing(TWEEN.Easing.Quadratic.InOut)
+        .onUpdate(({ z, alpha }) => {
+          if (reverse) {
+            modelFrom.position.setZ(-z);
+            modelTo.position.setZ(20 - z);
+          } else {
+            modelFrom.position.setZ(z);
+            modelTo.position.setZ(z - 20);
+          }
+          modelFrom.setOpacity(alpha);
+          modelTo.setOpacity(1 - alpha);
+          this.renderThisFrame = true;
+        })
+        .onComplete(() => {
+          modelFrom.visible = false;
+          this.renderThisFrame = true;
+          this.visibleFloorIndex = index;
+          modelTo.setShadowEnabled(true);
+          resolve(null);
+        })
+        .start();
+    });
+  }
+
+  public getCurrentVisibleFloorModel(): SvgFloorModel {
+    return this.floors[this.visibleFloorIndex];
+  }
+
+  public dispose(): void {
+    super.dispose();
+    while (this.floors.length) {
+      const f = this.floors.pop();
+      f!.dispose();
+    }
+    this.floorInfos = [];
+  }
+}
+
+export { SvgFloors, SvgModelInfo };