@aibee/owlly 1.0.25

package/src/owlly/element/meshline-o.ts

@@ -0,0 +1,802 @@
+/* eslint-disable max-len */
+import {
+  Vector3,
+  Vector2,
+  BufferGeometry,
+  InterleavedBuffer,
+  InterleavedBufferAttribute,
+  Mesh,
+  ShaderMaterial,
+  DoubleSide,
+  NormalBlending,
+  AddEquation,
+  SrcAlphaFactor,
+  OneMinusSrcAlphaFactor,
+  IUniform,
+  TextureLoader,
+  Texture,
+  RepeatWrapping,
+  Vector4,
+  MathUtils as ThreeMath,
+  MeshBasicMaterial,
+  PlaneGeometry,
+} from 'three';
+import Color from 'color';
+import * as turf from '@turf/turf';
+import { Element, ElementFrameContext } from './element';
+// import { BasicCalcTool, TurningInfo, Helper } from '../utils';
+import { BasicCalcTool, TurningInfo } from '../utils';
+
+class MeshLine2D extends Element {
+  public tailArrow: Mesh;
+
+  private initialized: boolean;
+
+  private ready: boolean;
+
+  private needsUpdate: boolean;
+
+  private points: [number, number, number][];
+
+  public orgedPoints: { point: [number, number, number]; normal: number[]; scale: number }[];
+
+  private distances: number[];
+
+  private mesh: Mesh;
+
+  private bufferGeometry: BufferGeometry;
+
+  private material: ShaderMaterial;
+
+  private options: {
+    textureUrl?: string;
+    textureMode: string;
+    textureSize?: [number, number];
+    color?: Color | number | string;
+    viewDistance?: number;
+    gradientDistance?: number;
+    current?: number;
+    gradientEnabled?: boolean;
+    width?: number;
+    strokeWidth?: number;
+    strokeColor?: Color | number | string;
+    animateEnabled?: boolean;
+    animateSpeed?: number;
+  };
+
+  private uniforms: { [uniform: string]: IUniform };
+
+  private static VertexShader = `
+    attribute vec4 last, current, next;
+    attribute vec2 normalVec;
+    attribute float normalScale;
+    attribute float texoff;
+    attribute float progress;
+
+    varying vec2 texcoord;
+    varying float vProgress;
+    varying float isBorder;
+
+    uniform float width;
+    uniform float texOffset;
+    uniform float strokeWidth;
+
+    float pi = 3.141592653589793;
+    float fwidth = width;
+    float swidth = strokeWidth;
+
+    vec4 transform(vec3 coord){
+      return projectionMatrix * modelViewMatrix * vec4(coord, 1.0);
+    }
+
+    void main(){
+      float off = 1.0;
+      if (current.w < 0.0 ) {
+        off = -1.0;
+      }
+      // float offsetW = fwidth / 2.0;
+      float offsetW = fwidth / 2.0 * normalScale;
+      isBorder = -1.0;
+      if (abs(current.w) > 1.0) {
+        offsetW = (swidth + (fwidth / 2.0)) * normalScale;
+        isBorder = 1.0;
+      }
+
+      vec2 dir = vec2(normalVec.x, normalVec.y)*off;
+      vec3 pos = vec3(current.xy + dir * offsetW, 0.0);
+
+      texcoord = vec2(off*0.5+0.5, texoff*0.2 + texOffset);
+      vProgress = progress;
+
+      gl_Position = transform(pos);
+    }
+  `;
+
+  private static FragmentShader = `
+    uniform sampler2D stripTexture;
+    uniform float currentDistance;
+    uniform float fullLength;
+    uniform float viewDistance;
+    uniform float gradientDistance;
+    uniform vec4 fillColor;
+    uniform vec4 strokeColor;
+    uniform bool gradientEnabled;
+
+    varying vec2 texcoord;
+    varying float vProgress;
+    varying float isBorder;
+
+    float opacity = 1.0;
+
+    void main(){
+      vec4 texColor = texture2D(stripTexture, texcoord);
+
+      float alpha = 1.0;
+      float cur = currentDistance;
+      float grad = gradientDistance;
+      float view = viewDistance;
+
+      if (gradientEnabled) {
+        if (vProgress < cur) {
+          alpha = 0.0;
+        } else {
+          if (vProgress > cur + view) {
+            alpha = 0.0;
+          } else {
+            if (fullLength <= cur + view) {
+              view = fullLength - cur;
+              if (view < 2.0 * grad) {
+                grad = view * 0.5;
+              }
+            }
+
+            if (vProgress > cur + grad) {
+              alpha = 1.0;
+              if (vProgress > cur + view - grad) {
+                  alpha = abs(cur + view - vProgress) / grad * 1.0;
+              }
+            } else {
+              alpha = abs(vProgress - cur) / grad * 1.0;
+            }
+          }
+        }
+      }
+      if (isBorder > -0.99) {
+        gl_FragColor = vec4(strokeColor.rgb, opacity * alpha * strokeColor.a);
+      } else {
+        gl_FragColor = vec4((fillColor * (1.0 - texColor.a) + texColor * texColor.a).rgb, opacity * alpha * (fillColor.a * (1.0 - texColor.a) + texColor.a));
+      }
+    }
+  `;
+
+  constructor(
+    points: [number, number, number][],
+    options: {
+      textureUrl?: string;
+      textureMode?: string;
+      textureSize?: [number, number];
+      color?: Color | number | string;
+      viewDistance?: number;
+      gradientDistance?: number;
+      current?: number;
+      gradientEnabled?: boolean;
+      width?: number;
+      strokeWidth?: number;
+      strokeColor?: Color | number | string;
+      animateEnabled?: boolean;
+      animateSpeed?: number;
+    } = { width: 0.3 },
+  ) {
+    super();
+    this.initialized = false;
+    this.ready = true;
+    this.points = [];
+    this.distances = [];
+    this.options = { textureMode: 'repeat', ...options };
+    if (!options.animateSpeed) {
+      this.options.animateSpeed = 0.01;
+    }
+    if (options.textureMode === 'tail') {
+      this.createTailArrow();
+    }
+    this.init(points);
+  }
+
+  public calcPoints(points: [number, number, number][], scale = 0.30): number[][] {
+    const len = points.length;
+    if (len < 3) return [];
+    const res = [];
+    const linePoints = points.map((v) => [v[0], v[1]]);
+    for (let i = 0; i < len; i++) {
+      const cur = new Vector2(...linePoints[i]);
+      const prev = i === 0 ? null : new Vector2(...linePoints[i - 1]);
+      const next = i === len - 1 ? null : new Vector2(...linePoints[i + 1]);
+      const formP2C = prev ? new Vector2().subVectors(cur, prev).normalize() : null;
+      const formC2N = next ? new Vector2().subVectors(next, cur).normalize() : null;
+      const fromP2N = formC2N && formP2C ? new Vector2().addVectors(formC2N, formP2C).normalize() : null;
+      // eslint-disable-next-line no-nested-ternary
+      const normal = i === 0 ? new Vector2(-(formC2N as Vector2).y, (formC2N as Vector2).x)
+        : (i === len - 1 ? new Vector2(-(formP2C as Vector2).y, (formP2C as Vector2).x)
+          : new Vector2(-(fromP2N as Vector2).y, (fromP2N as Vector2).x));
+      const n1 = new Vector2().addVectors(cur, normal.clone().multiplyScalar(-scale));
+      const n2 = new Vector2().addVectors(cur, normal.clone().multiplyScalar(scale));
+      res.push(
+        [n1.x, n1.y, 0],
+        [n2.x, n2.y, 0],
+        [normal.x, normal.y, 0],
+      );
+    }
+    return res;
+  }
+
+  public createTailArrow(): void {
+    const textureUrl = this.options.textureUrl;
+    new TextureLoader().load(textureUrl as string, (texture: Texture) => {
+      const fWidth = this.options.width || 0.3;
+      const renderPathWidth = this.options.strokeWidth ? fWidth + this.options.strokeWidth * 2 : this.options.width;
+      const width = this.options.textureSize ? this.options.textureSize[0] : renderPathWidth;
+      const height = this.options.textureSize ? this.options.textureSize[1] : width;
+      const planeG = new PlaneGeometry(width, height);
+      const color = this.options.color ? this.options.color : 0xffffff;
+      const material = new MeshBasicMaterial({
+        color: color as string,
+        map: texture,
+        transparent: true,
+        opacity: 1.0,
+        depthTest: false,
+      });
+      material.needsUpdate = true;
+      const plane = new Mesh(planeG, material);
+      plane.renderOrder = 2;
+      this.tailArrow = plane;
+      this.tailArrow.visible = false;
+      this.add(this.tailArrow);
+    });
+  }
+
+  // 返回 {point, normal: 法向量, scale: 沿着法向量增加/减少得到端点的 scale} 的格式、
+  public orgPoints(points: [number, number, number][], normalScale = 0.3): { point: [number, number, number]; normal: number[]; scale: number }[] {
+    // this.testLines = [];
+    // 得到路径上的拐点信息
+    const pLength = points.length;
+    const orgedPoints = this.calcPoints(points, normalScale); // 传入的一个点拓展为3个信息: 法向量 起 终
+    const vec3orgedPoint: Vector3[] = orgedPoints.map((pt) => new Vector3(...pt));
+    const vec3Chunk: Vector3[][] = BasicCalcTool.chunk(vec3orgedPoint, 3);
+    const res = points.map((v, i: number) => ({
+      point: v,
+      normal: [vec3Chunk[i][2].x, vec3Chunk[i][2].y],
+      scale: 1.0,
+    }));
+    const v2Pts = points.map((v) => [v[0], v[1]]);
+    const turningPoints = BasicCalcTool.calcTurning(v2Pts as [number, number][]);
+    if (!turningPoints.length) return res;
+    const turningAreas = turningPoints.map((v: TurningInfo) => {
+      const { startIndex, endIndex, angle } = v;
+      // angle < 180 右转   angle > 180 左转
+      const pickIndex = angle > 180 ? 1 : 0;
+
+      const line10 = startIndex > 0 ? vec3Chunk[startIndex - 2][pickIndex] : vec3Chunk[startIndex - 1][pickIndex];
+      const line11 = vec3Chunk[startIndex - 1][pickIndex];
+      const line1NormalizeVec = new Vector3().subVectors(line11, line10).normalize().multiplyScalar(normalScale);
+      const line12 = new Vector3().addVectors(line11, line1NormalizeVec);
+      const line13 = new Vector3().subVectors(line10, line1NormalizeVec);
+
+      const line20 = vec3Chunk[endIndex + 1][pickIndex];
+      const line21 = pLength > endIndex + 2 ? vec3Chunk[endIndex + 2][pickIndex] : vec3Chunk[endIndex][pickIndex];
+      const line2NormalizeVec = new Vector3().subVectors(line21, line20).normalize().multiplyScalar(normalScale);
+      const line22 = new Vector3().addVectors(line21, line2NormalizeVec);
+      const line23 = new Vector3().subVectors(line20, line2NormalizeVec);
+
+      const line1 = turf.lineString([[line13.x, line13.y], [line10.x, line10.y], [line11.x, line11.y], [line12.x, line12.y]]);
+      const line2 = turf.lineString([[line23.x, line23.y], [line20.x, line20.y], [line21.x, line21.y], [line22.x, line22.y]]);
+      const intersects = turf.lineIntersect(line1, line2);
+      if (!intersects.features[0]) {
+        // console.log('有拐角 但无相交');
+        return null;
+      }
+      const intersectCrd = intersects.features[0].geometry.coordinates;
+      // console.log('有交点', line1, line2, intersects, intersectCrd);
+      // 根据 endCrd 和 startCrd 取 向量作延长线s
+      const vecFromStE = new Vector2(points[endIndex][0] - points[startIndex - 1][0], points[endIndex][1] - points[startIndex - 1][1]).normalize().multiplyScalar(normalScale);
+      const p0 = [intersectCrd[0] - vecFromStE.x, intersectCrd[1] - vecFromStE.y];
+      const p2 = [intersectCrd[0] + vecFromStE.x, intersectCrd[1] + vecFromStE.y];
+      const normal = angle > 180 ? vecFromStE.normalize().multiplyScalar(-1) : vecFromStE.normalize().multiplyScalar(1);
+
+      // [p0, p2] 的连线中点就是intersectCrd
+      const p3 = [intersectCrd[0] - normal.y * normalScale, intersectCrd[1] + normal.x * normalScale];
+      const p4 = [intersectCrd[0] + normal.y * normalScale, intersectCrd[1] - normal.x * normalScale];
+
+      const poly = turf.featureCollection([
+        turf.point(p0),
+        turf.point(p4),
+        turf.point(p2),
+        turf.point(p3),
+        turf.point(p0),
+      ]);
+      // const lin1 = Helper.createLine([[p0[0], p0[1], 0], [p2[0], p2[1], 0]], '#ff0000', 3000);
+      // const lin2 = Helper.createLine([[p3[0], p3[1], 0], [p4[0], p4[1], 0]], '#00ff00', 3000);
+      // const lin3 = Helper.createLine([[p0[0], p0[1], 0], [p4[0], p4[1], 0], [p2[0], p2[1], 0], [p3[0], p3[1], 0]], '#0000ff', 3000);
+      // this.testLines.push(lin1);
+      // this.testLines.push(lin2);
+      // this.testLines.push(lin3);
+      const hull = turf.convex(poly);
+      return {
+        hull,
+        intersectCrd,
+        startIndex,
+        endIndex,
+      };
+    });
+    let inCurrentArea = 0;
+    let l = 0;
+    let ifInTuring = false;
+    while (l < pLength && turningAreas[inCurrentArea]) {
+      const [ls, le] = vec3Chunk[l];
+      const curHull: turf.Feature | null = turningAreas[inCurrentArea]!.hull;
+      const curIntersectCrd: number[] = turningAreas[inCurrentArea]!.intersectCrd;
+      const nextIntersectCrd = turningAreas[inCurrentArea + 1] ? turningAreas[inCurrentArea + 1]!.intersectCrd : null;
+      const nextHull = turningAreas[inCurrentArea + 1] ? turningAreas[inCurrentArea + 1]!.hull : null;
+      const ifBoolinLs = turf.booleanWithin(turf.point([ls.x, ls.y]), curHull as turf.Feature);
+      const ifBoolinLe = turf.booleanWithin(turf.point([le.x, le.y]), curHull as turf.Feature);
+
+      const ifBoolin = ifBoolinLs || ifBoolinLe;
+      if (ifBoolin && ifBoolinLs) {
+        // 右转
+        ifInTuring = true;
+        const startCoord = new Vector3(...curIntersectCrd, 0);
+        let end = le;
+        // 判断 end 是否在 下一个 area
+        if (nextIntersectCrd && nextHull && turf.booleanWithin(turf.point([le.x, le.y]), nextHull)) {
+          end = new Vector3(nextIntersectCrd[0], nextIntersectCrd[1], nextIntersectCrd[2]);
+        }
+        // 缩放比例是: V<ls.x - le.x, ls.y - le.y> 的length
+        const oL = new Vector3().subVectors(le, ls).length();
+        const newL = new Vector3().subVectors(end, new Vector3(startCoord.x, startCoord.y, 0)).length();
+        const nv = new Vector3().subVectors(end, new Vector3(startCoord.x, startCoord.y, 0)).normalize();
+        res.splice(l, 1, {
+          point: [(startCoord.x + end.x) / 2, (startCoord.y + end.y) / 2, 0],
+          scale: newL / oL,
+          normal: [nv.x, nv.y],
+        });
+      } else if (ifBoolin && ifBoolinLe) {
+        // 左转
+        // console.log('ifBoolin && ifBoolinLe', ifBoolinLs, ifBoolinLe);
+        ifInTuring = true;
+        const endCoord = new Vector3(...curIntersectCrd, 0);
+        let start = ls;
+        if (nextIntersectCrd && nextHull && turf.booleanWithin(turf.point([ls.x, ls.y]), nextHull)) {
+          start = new Vector3(nextIntersectCrd[0], nextIntersectCrd[1], nextIntersectCrd[2]);
+        }
+        const oL = new Vector3().subVectors(le, ls).length();
+        const newL = new Vector3().subVectors(start, new Vector3(endCoord.x, endCoord.y, 0)).length();
+        const nv = new Vector3().subVectors(new Vector3(endCoord.x, endCoord.y, 0), start).normalize();
+        res.splice(l, 1, {
+          point: [(endCoord.x + start.x) / 2, (endCoord.y + start.y) / 2, 0],
+          scale: newL / oL,
+          normal: [nv.x, nv.y],
+        });
+      } else if (ifInTuring) {
+        l--; // 当前点需要再判断一次
+        ifInTuring = false;
+        inCurrentArea++;
+      }
+      l++;
+    }
+
+    return res;
+  }
+
+  private init(pts: [number, number, number][]): void {
+    // const points = pts.map((v: any) => (v.length === 3 ? [+v[0].toFixed(4), +v[1].toFixed(4), +v[2].toFixed(4)] : v));
+    const points = pts;
+    const sWidth = this.options.strokeWidth || 0;
+    const fWidth = this.options.width ? this.options.width / 2 : 0.3;
+    const normalScale = sWidth + fWidth;
+    const res: { point: [number, number, number]; normal: number[]; scale: number }[] = this.orgPoints(points, normalScale);
+    this.orgedPoints = res;
+    this.points = [];
+    let firstDis = 0.1;
+    if (points.length > 1) {
+      const [first, second, secondLast, last] = [
+        points[0],
+        points[1],
+        points[points.length - 2],
+        points[points.length - 1],
+      ];
+      // TODO
+      const firstVec = new Vector3(...first);
+      const secondVec = new Vector3(...second);
+      const dirFirst = new Vector3().subVectors(firstVec, secondVec)
+        .normalize().multiplyScalar(firstVec.distanceTo(secondVec) * 0.05); // 增加端点[起始]
+      const head = firstVec.clone().add(dirFirst);
+      firstDis = dirFirst.length();
+      const secondLastVec = new Vector3(...secondLast);
+      const lastVec = new Vector3(...last);
+      const dirLast = new Vector3().subVectors(secondLastVec, lastVec)
+        .normalize().multiplyScalar(firstVec.distanceTo(secondVec) * 0.05);
+      const tail = lastVec.clone().sub(dirLast); // 增加端点[尾巴]
+      const originH = this.orgedPoints[0];
+      const originT = this.orgedPoints[this.orgedPoints.length - 1];
+      this.orgedPoints.unshift({ // 加入head
+        point: [head.x, head.y, head.z],
+        normal: originH.normal,
+        scale: 1.0,
+      });
+      this.orgedPoints.push({ // 加入head
+        point: [tail.x, tail.y, tail.z],
+        normal: originT.normal,
+        scale: 1.0,
+      });
+      this.points.push([head.x, head.y, head.z]);
+
+      this.points.push(...points);
+      this.points.push([tail.x, tail.y, tail.z]);
+    }
+    this.distances = [-firstDis];
+    for (
+      let i = 1, l = this.points.length, prevVec = new Vector3(...this.points[0]), currentVec = new Vector3();
+      i < l;
+      i += 1
+    ) {
+      currentVec.set(...this.points[i]);
+      this.distances.push(
+        i === 1 ? 0 : this.distances[i - 1] + currentVec.distanceTo(prevVec),
+      );
+      prevVec.copy(currentVec);
+    }
+
+    this.bufferGeometry = new BufferGeometry();
+    const components = 9;
+
+    let [lx, ly, lz] = this.points[0];
+    let d = 0;
+    const vertices = [];
+
+    for (let i = 0; i < this.orgedPoints.length; i += 1) {
+      const [x, y, z] = this.orgedPoints[i].point;
+      const [normalX, normalY] = this.orgedPoints[i].normal;
+      const scale = this.orgedPoints[i].scale;
+      let nx = x - lx;
+      let ny = y - ly;
+      let nz = z - lz;
+      const l = Math.sqrt(nx * nx + ny * ny + nz * nz);
+      nx /= l;
+      ny /= l;
+      nz /= l;
+
+      d += l * 3;
+
+      if (this.options.strokeWidth) {
+        vertices.push(x, y, z, -2, d, this.distances[i], normalX, normalY, scale);
+        vertices.push(x, y, z, -1, d, this.distances[i], normalX, normalY, scale);
+        vertices.push(x, y, z, 1, d, this.distances[i], normalX, normalY, scale);
+        vertices.push(x, y, z, 2, d, this.distances[i], normalX, normalY, scale);
+      } else {
+        vertices.push(x, y, z, -1, d, this.distances[i], normalX, normalY, scale);
+        vertices.push(x, y, z, 1, d, this.distances[i], normalX, normalY, scale);
+      }
+
+      lx = x;
+      ly = y;
+      lz = z;
+    }
+
+    const vertexBuffer = new Float32Array(vertices);
+    const pointToCrdsNum = this.options.strokeWidth ? 4 : 2; // 路线上的一个顶点会生成几个点
+    const verticesBuffer = new InterleavedBuffer(vertexBuffer, components); // 交叉存储, 表明多个类型的attributes(例如，顶点位置、法向量、UV 和颜色值)被存储到一个队列中。
+    // InterleavedBuffer( array : TypedArray 一个基于共享缓存的类型化队列, stride : Integer 每个顶点占用类型化队列的多少个元素 )
+
+    // InterleavedBufferAttribute(interleavedBuffer, itemSize 队列中每个矢量由多少个元素构成, offset 缓存队列中每个元素的起始位置的偏移量)
+    const lastAttrib = new InterleavedBufferAttribute(verticesBuffer, 4, 0, false);
+    this.bufferGeometry.setAttribute('last', lastAttrib);
+    const currentAttrib = new InterleavedBufferAttribute(verticesBuffer, 4, components * pointToCrdsNum, false);
+    this.bufferGeometry.setAttribute('current', currentAttrib);
+    const nextAttrib = new InterleavedBufferAttribute(verticesBuffer, 4, components * pointToCrdsNum * 2, false);
+    this.bufferGeometry.setAttribute('next', nextAttrib);
+    const texoffAttrib = new InterleavedBufferAttribute(verticesBuffer, 1, components * pointToCrdsNum + 4, false);
+    this.bufferGeometry.setAttribute('texoff', texoffAttrib);
+    const progressAttrib = new InterleavedBufferAttribute(verticesBuffer, 1, components * pointToCrdsNum + 5, false);
+    this.bufferGeometry.setAttribute('progress', progressAttrib);
+
+    const normalAttrib = new InterleavedBufferAttribute(verticesBuffer, 2, components * pointToCrdsNum + 6, false);
+    this.bufferGeometry.setAttribute('normalVec', normalAttrib);
+
+    const scaleAttrib = new InterleavedBufferAttribute(verticesBuffer, 1, components * pointToCrdsNum + 8, false);
+    this.bufferGeometry.setAttribute('normalScale', scaleAttrib);
+
+    const positionVertBuffer = new InterleavedBuffer(
+      vertexBuffer.slice(components * pointToCrdsNum, vertices.length - components * pointToCrdsNum),
+      components,
+    );
+    const positionAttrib = new InterleavedBufferAttribute(positionVertBuffer, 4, 0);
+    this.bufferGeometry.setAttribute('position', positionAttrib);
+
+    this.bufferGeometry.computeBoundingBox();
+    this.bufferGeometry.computeBoundingSphere();
+    this.bufferGeometry.computeVertexNormals();
+
+    let indices: number[] = [];
+
+    if (this.options.strokeWidth) {
+      const arr = [
+        0, 1, 4,
+        1, 4, 5,
+        1, 2, 5,
+        2, 5, 6,
+        2, 3, 6,
+        3, 6, 7,
+      ];
+      for (let i = 4; i < vertices.length / components - 8; i += 4) {
+        const curLineNum = i / 4 - 1;
+        const curInds = arr.map((v: number) => v + curLineNum * 4);
+        indices = [...indices, ...curInds];
+      }
+    } else {
+      for (let i = 2; i < vertices.length / components - 4; i += 2) {
+        indices.push(i - 2, i - 1, i);
+        indices.push(i, i - 1, i + 1);
+      }
+    }
+
+    this.bufferGeometry.setIndex(indices);
+
+    const fillColor = this.options.color ? new Color(this.options.color) : new Color('rgb(255, 255, 255)').alpha(0.0);
+    const strokeColor = this.options.strokeColor ? new Color(this.options.strokeColor) : new Color('rgb(240, 68, 55)');
+    this.uniforms = {
+      stripTexture: {
+        type: 't',
+        value: null,
+      },
+      fillColor: {
+        type: 'v4',
+        value: new Vector4(fillColor.red() / 255, fillColor.green() / 255, fillColor.blue() / 255, fillColor.alpha()),
+      },
+      strokeColor: {
+        type: 'v4',
+        // eslint-disable-next-line max-len
+        value: new Vector4(strokeColor.red() / 255, strokeColor.green() / 255, strokeColor.blue() / 255, strokeColor.alpha()),
+      },
+      width: {
+        type: 'f',
+        value: this.options.width || 0.3,
+      },
+      strokeWidth: {
+        type: 'f',
+        value: this.options.strokeWidth || 0.1,
+      },
+      currentDistance: { type: 'f', value: this.options.current || 0 },
+      texOffset: { type: 'f', value: 0 },
+      fullLength: { type: 'f', value: this.distances[this.distances.length - 1] },
+      viewDistance: { type: 'f', value: this.options.viewDistance || 15 },
+      gradientDistance: { type: 'f', value: this.options.gradientDistance || 4 },
+      gradientEnabled: { value: this.options.gradientEnabled || false },
+    } as { [uniform: string]: IUniform };
+
+    this.material = new ShaderMaterial({
+      fragmentShader: MeshLine2D.FragmentShader,
+      vertexShader: MeshLine2D.VertexShader,
+      uniforms: this.uniforms,
+      depthTest: false, // 不加入深度检测, 按照bind顺序渲染
+      side: DoubleSide,
+      // wireframe: true,
+      transparent: true,
+      opacity: 1.0,
+      blending: NormalBlending,
+      blendEquation: AddEquation,
+      blendSrc: SrcAlphaFactor,
+      blendDst: OneMinusSrcAlphaFactor,
+    });
+
+    if (this.options.textureUrl && this.options.textureMode === 'repeat') {
+      new TextureLoader().load(this.options.textureUrl, (texture: Texture) => {
+        texture.wrapS = RepeatWrapping;
+        texture.wrapT = RepeatWrapping;
+        texture.generateMipmaps = true;
+        this.uniforms.stripTexture.value = texture;
+        this.needsUpdate = true;
+      });
+    } else if (this.options.textureUrl && this.options.textureMode === 'tail') {
+      const lastDistance = this.distances[this.distances.length - 1];
+      this.updateTailArrowPos(lastDistance);
+    }
+
+    this.mesh = new Mesh(this.bufferGeometry, this.material);
+    this.add(this.mesh);
+  }
+
+  public getBestView(currentPoint: Vector3, fromDistance: number, toDistance: number): number {
+    let nearPoint = this.getPointOnDistance(fromDistance + 0.2).point;
+    let curPoint = currentPoint;
+
+    // 过滤0.5米转角
+    let f = fromDistance + 1;
+    for (; f < (fromDistance + 10); f += 1) {
+      const scan = this.getPointOnDistance(f);
+      const dir1 = new Vector3().subVectors(scan.point, nearPoint);
+      const dir2 = new Vector3().subVectors(nearPoint, curPoint);
+      const rad = ThreeMath.radToDeg(dir1.angleTo(dir2));
+      if (rad > 30) {
+        nearPoint = this.getPointOnDistance(f + 0.5).point;
+        curPoint = scan.point;
+        break;
+      }
+    }
+    let maxDistance = 0;
+    for (let i = f; i < toDistance; i++) {
+      const scan = this.getPointOnDistance(i);
+      const dir1 = new Vector3().subVectors(scan.point, nearPoint);
+      const dir2 = new Vector3().subVectors(nearPoint, curPoint);
+      const rad = ThreeMath.radToDeg(dir1.angleTo(dir2));
+
+      if (rad > 32 && (i - fromDistance) > 10) {
+        maxDistance = i;
+        break;
+      }
+      if (rad > 20 && (i - fromDistance) > 15) {
+        maxDistance = i;
+        break;
+      }
+    }
+    return (maxDistance - fromDistance);
+  }
+
+  public getPointOnDistance(distance: number): { point: Vector3; index: number } {
+    let left = 0;
+    const { distances, points } = this;
+    let right = points.length - 1;
+    let p = -1;
+    while (left < right - 1) {
+      p = Math.floor((left + right) / 2);
+      if (distances[p] > distance) right = p;
+      else if (distances[p] < distance) left = p;
+      else {
+        left = p;
+        break;
+      }
+    }
+    p = left;
+    if (p > -1) {
+      const from = new Vector3(...points[p]);
+      if (p === this.points.length - 1 || distance <= 0) {
+        return {
+          point: from,
+          index: p + 1,
+        };
+      }
+
+      const fromDist = this.distances[p];
+      const to = new Vector3(...this.points[p + 1]);
+      const toDist = this.distances[p + 1];
+      const distDiff = toDist - fromDist;
+      const vecDiff = to.clone().sub(from);
+      return {
+        point: from.clone().add(vecDiff.multiplyScalar((distance - fromDist) / distDiff)),
+        index: p + 1,
+      };
+    }
+    throw new Error(`Cannot find point on distance ${distance}`);
+  }
+
+  public getNearestPoint(position: Vector3, startDistance = 0): { point: Vector3; distance: number; index: number } {
+    const pathLength = this.distances[this.distances.length - 1];
+    let precision = 8;
+    let best: Vector3 = new Vector3();
+    let bestLength = 0;
+    let bestDistance = Infinity;
+    let bestIndex = -1;
+
+    for (let scan, scanLength = startDistance, scanDistance; scanLength <= pathLength; scanLength += precision) {
+      scan = this.getPointOnDistance(scanLength);
+      scanDistance = position.distanceTo(scan.point);
+      if (scanDistance < bestDistance) {
+        best = scan.point;
+        bestLength = scanLength;
+        bestDistance = scanDistance;
+        bestIndex = scan.index;
+      }
+    }
+
+    let before;
+    let after;
+    let beforeLength;
+    let afterLength;
+    let beforeDistance;
+    let afterDistance;
+    precision /= 2;
+    while (precision > 0.1) {
+      beforeLength = bestLength - precision;
+      beforeDistance = position.distanceTo(before = this.getPointOnDistance(beforeLength).point);
+      afterLength = bestLength + precision;
+      afterDistance = position.distanceTo(after = this.getPointOnDistance(afterLength).point);
+      if (beforeLength >= 0 && beforeDistance < bestDistance) {
+        best = before; bestLength = beforeLength; bestDistance = beforeDistance;
+      } else if (afterLength <= pathLength && afterDistance < bestDistance) {
+        best = after; bestLength = afterLength; bestDistance = afterDistance;
+      } else {
+        precision /= 2;
+      }
+    }
+
+    return {
+      point: best,
+      distance: bestLength,
+      index: bestIndex,
+    };
+  }
+
+  public update(): ElementFrameContext {
+    const frameContext = new ElementFrameContext(this);
+    if (!this.initialized && this.ready) {
+      this.initialized = true;
+      frameContext.needUpdate = true;
+    } else if (this.needsUpdate) {
+      frameContext.needUpdate = true;
+      this.needsUpdate = false;
+    }
+    if (this.options.animateEnabled) {
+      this.uniforms.texOffset.value -= this.options.animateSpeed!;
+      frameContext.needUpdate = true;
+    }
+    if (this.initialized && !this.parent) {
+      frameContext.shouldPlaceElement = true;
+    }
+    return frameContext;
+  }
+
+  public dispose(): void {
+    super.dispose();
+    this.remove(this.mesh);
+    this.material.dispose();
+    this.bufferGeometry.dispose();
+  }
+
+  public setCurrent(current: number): void {
+    this.uniforms.currentDistance.value = current;
+    this.needsUpdate = true;
+  }
+
+  public getCurrent(): number {
+    return this.uniforms.currentDistance.value as number;
+  }
+
+  public setViewDistance(value: number): void {
+    this.uniforms.viewDistance.value = value;
+    const distance = value + this.uniforms.currentDistance.value;
+    if (this.options.textureUrl && this.options.textureMode === 'tail') {
+      if (!this.tailArrow) {
+        setTimeout(() => {
+          this.setViewDistance(value);
+        }, 1000);
+        return;
+      }
+      this.updateTailArrowPos(distance);
+    }
+  }
+
+  public updateTailArrowPos(distance: number): void {
+    if (!this.tailArrow) {
+      setTimeout(() => {
+        this.updateTailArrowPos(distance);
+      }, 1000);
+      return;
+    }
+    this.tailArrow.visible = true;
+    const { index } = this.getPointOnDistance(distance);
+    const orgedPoint = this.orgedPoints[index];
+    const x = orgedPoint.point[0];
+    const y = orgedPoint.point[1];
+    const z = orgedPoint.point[2];
+    const normal2 = [-orgedPoint.normal[1], orgedPoint.normal[0]];
+    const atan3 = Math.atan2(normal2[1], normal2[0]);
+    const rotationZ = atan3 + Math.PI / 2;
+    this.tailArrow.position.set(x, y, z);
+    this.tailArrow.rotation.z = rotationZ;
+    this.needsUpdate = true;
+  }
+
+  public getViewDistance(): number {
+    return this.uniforms.viewDistance.value as number;
+  }
+}
+
+export { MeshLine2D };