@aibee/owlly 1.0.25

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

@@ -0,0 +1,344 @@
+import earcut from 'earcut';
+import { Externals, NS_THREE } from '../stage/externals';
+import { Element, ElementFrameContext } from './element';
+import { BasicTools } from '../utils/basic-tools';
+import { Shape, PathStep, PathCommand } from './map-kit/shape';
+
+class PolygonMesh extends Element {
+  private initialized: boolean;
+
+  private loaded: boolean;
+
+  private verticesInvalidated: boolean;
+
+  private shape: Shape;
+
+  private zShape: Shape;
+
+  private vertices: number[];
+
+  private group: NS_THREE.Group;
+
+  /**
+   * 生成三角化多边形网格
+   * 通过一个Shape描述形状, 通过第二个Shape来做高度的描述.
+   * @param shape 如果shape是一个"line", 则它是一个从折线描述的一个立面, 此时zShape的pathStep里面应该是和shape相同长度的PathStep数组, 里面的command和coords长度与第一个shape逐一对应, 但coords表示是z的起始位置和z的结束位置
+   * 并以每个类型为MOVE的PathStep作为折线段的起点
+   * 如果shape是一个'shape', 则它是一个从多边形描述的水平图形, 这时zShape的pathStep里面应该是和shape相同长度的PathStep数组, 里面的command和coords长度与第一个shape逐一对应, 但coords[0]表示其z高度
+   * 除第一个以外的类型为MOVE的PathStep作为一个孔的起点，可参考earcut的定义方式：https://github.com/mapbox/earcut
+   * @param zShape 见上述说明
+   * @example
+   * ```
+   const rectsLinesShapeData = {
+      id: 'rectsLines',
+      x: panoData[2].position.x,
+      y: panoData[2].position.y,
+      zIndex: 1000,
+      height: panoData[2].position.z - 0.5,
+      shapeType: 'line',
+      path: 'm-2,-2l-2,2l2,2l2,-2l-2,-2m-1,-1l-1,1l1,1l1,-1l-1,-1',
+      fill: 0x00ffff,
+      opacity: 1.0,
+      scale: [1.0, 1.0, 1.0],
+      rotation: [0.0, 0.0, 0.0, 1.0],
+    };
+    const rectsLines = new Shape(rectsLinesShapeData);
+
+    const rectsSidesShapeData = {
+      id: 'rectsSides',
+      shapeType: 'line',
+      path: 'm1,0l1,0l1,0l1,0l1,0m1,-1l1,-1l1,-1l1,-1l1,-1',
+    };
+    const rectsSides = new Shape(rectsSidesShapeData);
+
+    const facade = new PolygonMesh(
+      rectsLines,
+      rectsSides,
+    );
+    stage.bindElement(facade);
+
+    const rectsPolygonShapeData = {
+      id: 'rectsPolygon',
+      x: panoData[2].position.x,
+      y: panoData[2].position.y,
+      zIndex: 1100,
+      height: panoData[2].position.z - 0.5,
+      shapeType: 'shape',
+      path: 'm-2,-2l-2,2l2,2l2,-2l-2,-2m-1,-1l-1,1l1,1l1,-1l-1,-1',
+      fill: 0xff00ff,
+      opacity: 1.0,
+      scale: [1.0, 1.0, 1.0],
+      rotation: [0.0, 0.0, 0.0, 1.0],
+    };
+    const rectsPolygon = new Shape(rectsPolygonShapeData);
+    const polygon = new PolygonMesh(
+      rectsPolygon,
+      rectsSides,
+    );
+    stage.bindElement(polygon);
+   * ```
+   */
+  constructor(
+    shape: Shape,
+    zShape: Shape,
+    optionalParams?: {
+      material?: NS_THREE.Material;
+    },
+  ) {
+    super();
+    const { THREE } = Externals.getInstance();
+    this.shape = shape;
+    this.zShape = zShape;
+
+    this.group = new THREE.Group();
+    this.add(this.group);
+
+    const shapeData = shape.getData();
+    const options = optionalParams || {};
+    const material = options.material || new THREE.MeshBasicMaterial({
+      color: shape.getData().fill || 0xffff00,
+      transparent: shapeData.opacity !== 1.0,
+      opacity: shapeData.opacity || 1.0,
+      side: THREE.DoubleSide,
+      depthWrite: false,
+    });
+
+    this.vertices = [];
+    const vertices2D: number[] = [];
+    const holes: number[] = [];
+    const pathSteps = shape.getSteps();
+    const zPathSteps = zShape.getSteps();
+    pathSteps.forEach((pathStep: PathStep, index: number) => {
+      if (index > 0 && pathStep.command === PathCommand.MOVE) {
+        holes.push(index);
+      }
+
+      const coord = pathStep.coords[0];
+      const zCoord = zPathSteps[index].coords[0];
+      this.vertices.push(coord[0], coord[1], zCoord[0]);
+      vertices2D.push(...coord);
+    });
+
+    const shapeType = shape.getShapeType();
+    if (shapeType === 'shape') {
+      const vertexBuffer = new Float32Array(this.vertices);
+      const bufferGeometry = new THREE.BufferGeometry();
+      bufferGeometry.setAttribute('position', new THREE.BufferAttribute(vertexBuffer, 3));
+
+      const indices = earcut(vertices2D, holes, 2);
+      bufferGeometry.setIndex(indices);
+
+      const mesh = new THREE.Mesh(bufferGeometry, material);
+      mesh.renderOrder = shapeData.zIndex || 1000;
+      this.group.add(mesh);
+    } else if (shapeType === 'line') {
+      const oneSideVertexCount = vertices2D.length / 2;
+      pathSteps.forEach((pathStep: PathStep, index: number) => {
+        const coord = pathStep.coords[0];
+        const zCoord = zPathSteps[index].coords[0];
+        this.vertices.push(coord[0], coord[1], zCoord[1]);
+      });
+      const vertexBuffer = new Float32Array(this.vertices);
+
+      let endIndices: number[];
+      if (holes) {
+        endIndices = holes.concat([oneSideVertexCount]);
+      } else {
+        endIndices = [oneSideVertexCount];
+      }
+      let startIndex = 0;
+      endIndices.forEach((endIndex: number) => {
+        const bufferGeometry = new THREE.BufferGeometry();
+        bufferGeometry.setAttribute('position', new THREE.BufferAttribute(vertexBuffer, 3));
+        const indices: number[] = [];
+        for (let i = startIndex; i < endIndex - 1; i += 1) {
+          indices.push(i, i + oneSideVertexCount, i + 1, i + 1, i + oneSideVertexCount, i + oneSideVertexCount + 1);
+        }
+        startIndex = endIndex;
+        bufferGeometry.setIndex(indices);
+        const mesh = new THREE.Mesh(bufferGeometry, material);
+        mesh.renderOrder = shapeData.zIndex || 1000;
+        this.group.add(mesh);
+      });
+    }
+    if (shapeData.x !== undefined && shapeData.y !== undefined) {
+      this.group.position.set(shapeData.x, shapeData.y, shapeData.height || 0.0);
+    }
+    if (shapeData.rotation !== undefined) {
+      this.group.quaternion.set(...shapeData.rotation);
+    }
+    if (shapeData.scale !== undefined) {
+      this.group.scale.set(...shapeData.scale);
+    }
+
+    this.initialized = false;
+    this.loaded = true;
+    this.verticesInvalidated = false;
+  }
+
+  private updateGeometries(): void {
+    const { THREE } = Externals.getInstance();
+    const vertexBuffer = new Float32Array(this.vertices);
+    this.group.children.forEach((child: NS_THREE.Object3D) => {
+      const mesh = child as NS_THREE.Mesh;
+      const bufferGeometry = mesh.geometry as NS_THREE.BufferGeometry;
+      bufferGeometry.setAttribute('position', new THREE.BufferAttribute(vertexBuffer, 3));
+    });
+  }
+
+  private updateMaterials(material: NS_THREE.Material | NS_THREE.Material[]): void {
+    this.group.children.forEach((child: NS_THREE.Object3D) => {
+      const mesh = child as NS_THREE.Mesh;
+      mesh.material = material;
+    });
+  }
+
+  /**
+   * 以当前Shape成员更新Mesh
+   */
+  public applyShapes(shape?: Shape, zShape?: Shape): void {
+    const { THREE } = Externals.getInstance();
+    if (shape) this.shape = shape;
+    if (zShape) this.zShape = zShape;
+    this.vertices = [];
+    const pathSteps = this.shape.getSteps();
+    const zPathSteps = this.zShape.getSteps();
+    pathSteps.forEach((pathStep: PathStep, index: number) => {
+      const coord = pathStep.coords[0];
+      const zCoord = zPathSteps[index].coords[0];
+      this.vertices.push(coord[0], coord[1], zCoord[0]);
+    });
+    if (this.shape.getShapeType() === 'line') {
+      pathSteps.forEach((pathStep: PathStep, index: number) => {
+        const coord = pathStep.coords[0];
+        const zCoord = zPathSteps[index].coords[0];
+        this.vertices.push(coord[0], coord[1], zCoord[1]);
+      });
+    }
+    this.updateGeometries();
+
+    const material = new THREE.MeshBasicMaterial({
+      color: this.shape.getData().fill || 0xffff00,
+      transparent: this.shape.getData().opacity !== 1.0,
+      opacity: this.shape.getData().opacity || 1.0,
+      side: THREE.DoubleSide,
+      depthWrite: false,
+    });
+    this.updateMaterials(material);
+  }
+
+  public setColor(color: NS_THREE.Color | string | number, opacity?: number): void {
+    const { THREE } = Externals.getInstance();
+    const material = new THREE.MeshBasicMaterial({
+      color,
+      transparent: opacity !== 1.0,
+      opacity: opacity || this.shape.getData().opacity,
+      side: THREE.DoubleSide,
+      depthWrite: false,
+    });
+    this.updateMaterials(material);
+  }
+
+  /**
+   * 把当前顶点数组同步到Mesh的Geometry以及Shape成员的PathSteps中
+   */
+  private applyVertices(): void {
+    const pathSteps = this.shape.getSteps();
+    const zPathSteps = this.zShape.getSteps();
+    let pathStepIndex = 0;
+    if (this.shape.getShapeType() === 'line') {
+      for (let i = 0; i < this.vertices.length / 2; i += 3) {
+        const coord = pathSteps[pathStepIndex].coords[0];
+        coord[0] = this.vertices[i];
+        coord[1] = this.vertices[i + 1];
+        const zCoord = zPathSteps[pathStepIndex].coords[0];
+        zCoord[0] = this.vertices[i + 2];
+        pathStepIndex += 1;
+      }
+      pathStepIndex = 0;
+      for (let i = this.vertices.length / 2; i < this.vertices.length; i += 3) {
+        const coord = pathSteps[pathStepIndex].coords[0];
+        coord[0] = this.vertices[i];
+        coord[1] = this.vertices[i + 1];
+        const zCoord = zPathSteps[pathStepIndex].coords[0];
+        zCoord[1] = this.vertices[i + 2];
+        pathStepIndex += 1;
+      }
+    } else {
+      for (let i = 0; i < this.vertices.length; i += 3) {
+        const zCoord = zPathSteps[pathStepIndex].coords[0];
+        zCoord[0] = this.vertices[i + 2];
+        pathStepIndex += 1;
+      }
+    }
+    this.updateGeometries();
+    this.verticesInvalidated = false;
+  }
+
+  /**
+   * 设置单个已有顶点的位置
+   * @param index 顶点序号
+   * @param position 三维坐标
+   * @returns 若顶点序号越界，则返回false
+   */
+  public setVertex(index: number, position: NS_THREE.Vector3): boolean {
+    if (index < 0 || index >= this.vertices.length / 3) {
+      return false;
+    }
+    this.group.updateMatrixWorld();
+    const matrix = this.group.matrixWorld.clone().invert();
+    const newPosition = position.clone().applyMatrix4(matrix);
+    this.vertices[3 * index] = newPosition.x;
+    this.vertices[3 * index + 1] = newPosition.y;
+    this.vertices[3 * index + 2] = newPosition.z;
+    this.verticesInvalidated = true;
+    return true;
+  }
+
+  /**
+   * 获得从顶点序号到顶点位置的映射Map
+   */
+  public getVertexMap(): Map<number, NS_THREE.Vector3> {
+    const { THREE } = Externals.getInstance();
+    this.group.updateMatrixWorld();
+    const matrix = this.group.matrixWorld;
+    const ret = new Map();
+    for (let i = this.vertices.length / 3 - 1; i >= 0; --i) {
+      const position = new THREE.Vector3(this.vertices[3 * i], this.vertices[3 * i + 1], this.vertices[3 * i + 2]);
+      ret.set(i, position.applyMatrix4(matrix));
+    }
+    return ret;
+  }
+
+  /**
+   * 得到当前用以描述顶面/线的Shape对象
+   */
+  public getShape(): Shape { return this.shape; }
+
+  /**
+   * 得到当前用以描述侧面的Shape对象
+   */
+  public getZShape(): Shape { return this.zShape; }
+
+  public update(): ElementFrameContext {
+    const frameContext = new ElementFrameContext(this);
+    if (!this.initialized && this.loaded) {
+      this.initialized = true;
+      frameContext.needUpdate = true;
+    } else if (this.verticesInvalidated) {
+      this.applyVertices();
+      frameContext.needUpdate = true;
+    }
+    if (this.initialized && !this.parent) {
+      frameContext.shouldPlaceElement = true;
+    }
+    return frameContext;
+  }
+
+  public dispose(): void {
+    super.dispose();
+    BasicTools.dispose(this, true);
+  }
+}
+
+export { PolygonMesh };