@aibee/owlly 1.0.25

package/src/owlly/element/mesh-line-2d.ts

@@ -0,0 +1,1032 @@
+/* eslint-disable max-len */
+import Color from 'color';
+import * as turf from '@turf/turf';
+import { Externals, NS_THREE } from '../stage/externals';
+import { Element, ElementFrameContext } from './element';
+import { PathOverlay2 } from '../overlay/path-overlay2';
+import { Env, EnvironmentUtils } from '../utils/environment-utils';
+import { BasicCalcTool, TurningInfo } from '../utils';
+// import { BasicCalcTool, TurningInfo, Helper } from '../utils';
+
+class MeshLine2D extends Element {
+  public tailArrow: NS_THREE.Mesh;
+
+  // public testLines: any;
+
+  private initialized: boolean;
+
+  private ready: boolean;
+
+  public renderPixelLine: boolean;
+
+  private needsUpdate: boolean;
+
+  private points: [number, number, number][];
+
+  public orgedPoints: { point: [number, number, number]; normal: number[]; scale: number }[];
+
+  private distances: number[];
+
+  private mesh: NS_THREE.Mesh;
+
+  private bufferGeometry: NS_THREE.BufferGeometry;
+
+  private material: NS_THREE.ShaderMaterial;
+
+  private currentMoveIndex: number; // 当前到了哪里
+
+  private parentOverlay: PathOverlay2;
+
+  private viewWidth: number;
+
+  private viewHeight: number;
+
+  private options: {
+    textureUrl?: string;
+    textureMode: string;
+    textureSize?: [number, number];
+    fillOpacity?: 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]: NS_THREE.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;
+    uniform float renderPixelLine;
+    uniform vec2 resolution;
+
+    float pi = 3.141592653589793;
+    float fwidth = width;
+    float swidth = strokeWidth;
+
+    vec4 transform(vec3 coord){
+      return projectionMatrix * modelViewMatrix * vec4(coord, 1.0);
+    }
+
+    vec2 project(vec4 device) {
+      vec3 device_normal = device.xyz / device.w;
+      vec2 clip_pos = (device_normal * 0.5 + 0.5).xy;
+      return clip_pos * resolution;
+    }
+
+    vec4 unproject(vec2 screen, float z, float w) {
+      vec2 clip_pos = screen / resolution;
+      vec2 device_normal = clip_pos * 2.0 - 1.0;
+      return vec4(device_normal * w, z, w);
+    }
+
+    // 计算系数: 0,0,0 到 0,1,0 对应的屏幕坐标距离 越大,  coefficient越大
+    float calcCoefficient() {
+      vec3 p1 = vec3(0, 0, 0);
+      vec2 sp1 = project(transform(p1.xyz));
+      vec3 p2 = vec3(0, 1, 0);
+      vec2 sp2 = project(transform(p2.xyz));
+      // 计算屏幕坐标的距离
+      float dist = distance(sp1, sp2);
+      return dist * 10.0 / width;
+    }
+
+    void main(){
+      vec2 sLast; // screenLast
+      vec2 sNext; // screenNext
+      vec2 sCurrent; // screenCurrent
+      vec2 normal1; // normal1
+      vec2 normal2; // normal2
+      vec2 normal; // 当前normal
+      vec4 dCurrent; //
+
+      float coefficient = 10.0;
+      float off = 1.0;
+      if (current.w < 0.0 ) {
+        off = -1.0;
+      }
+      vec4 position = vec4(0, 0, 0, 0);
+      vec3 pos;
+
+      float offsetW = fwidth / 2.0 * normalScale;
+      isBorder = -1.0;
+      if (abs(current.w) > 1.0) {
+        offsetW = swidth + (fwidth / 2.0) * normalScale;
+        isBorder = 1.0;
+      }
+      if (renderPixelLine < 1.0) {
+        // 3d 中
+        vec2 dir = vec2(normalVec.x, normalVec.y)*off;
+        float factor = 0.6 / fwidth * 0.2;
+        pos = vec3(current.xy + dir * offsetW, 0.0);
+        texcoord = vec2(off*0.5+0.5, texoff * factor + texOffset);
+        vProgress = progress;
+        gl_Position = transform(pos);
+      } else {
+        // vec2 dir = vec2(normalVec.x, normalVec.y)*off;
+        // 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);
+
+        coefficient = calcCoefficient();
+        sLast = project(transform(last.xyz)); // last的屏幕坐标
+        sNext = project(transform(next.xyz)); // next的屏幕坐标
+
+        dCurrent = transform(current.xyz);
+        sCurrent = project(dCurrent); // current的屏幕坐标
+
+        normal1 = normalize(sLast - sCurrent);
+        vec2 normal2 = normalize(sCurrent - sNext);
+        normal = normalize(normal1 + normal2);
+        texcoord = vec2(off*0.5+0.5, texoff* 0.03 * coefficient + texOffset);
+        vProgress = progress;
+
+        vec2 dir = vec2(-normal.y, normal.x) * off;
+        float cosAngle = abs(dot(dir, -normal1)); // cos 45 基本 为 0.79   得到的是弧度值
+        float x = 90.0 - acos(cosAngle) * 180.0 / pi; // 得到角度 90 - x 则为需要 20 / length = cos(x)
+        float divideBy = cos(x / 180.0 * pi);
+        if (abs(divideBy) < 0.6) {
+          float positiveNum = divideBy > 0.0 ? 1.0 : -1.0;
+          divideBy = 0.6 * positiveNum;
+        }
+        pos = vec3((sCurrent + offsetW / divideBy * dir).xy, 0.0);
+        position = unproject(pos.xy, 0.0, 1.0);
+        gl_Position = position;
+      }
+
+      // texcoord = vec2(off*0.5+0.5, texoff* 0.03 * coefficient + texOffset);
+      // vProgress = progress;
+
+      // vec2 dir = vec2(-normal.y, normal.x) * off;
+      // float cosAngle = abs(dot(dir, -normal1)); // cos 45 基本 为 0.79   得到的是弧度值
+      // float x = 90.0 - acos(cosAngle) * 180.0 / pi; // 得到角度 90 - x 则为需要 20 / length = cos(x)
+      // float divideBy = cos(x / 180.0 * pi);
+
+      // vec4 position = vec4(0, 0, 0, 0);
+      // vec3 pos;
+
+      // if (renderPixelLine < 1.0) {
+      //   pos = current.xyz + vec3(dir * offsetW, 0.0);
+      //   position = transform(pos);
+      // } else {
+      //   // 计算 dir 和 normal1 的夹角 , 要 叠加的长度 是 offsetW * dir
+      //   pos = vec3((sCurrent + offsetW / divideBy * dir).xy, 0.0);
+      //   position = unproject(pos.xy, 0.0, 1.0);
+      // }
+
+      // gl_Position = position;
+    }
+  `;
+
+  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;
+    uniform float renderPixelLine;
+    uniform float fillOpacity;
+
+    varying vec2 texcoord;
+    varying float vProgress;
+    varying float isBorder;
+
+    float opacity = 1.0;
+
+    void main(){
+      vec4 texColor = texture2D(stripTexture, texcoord);
+
+      float alpha = fillOpacity;
+      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 = fillOpacity;
+              if (vProgress > cur + view - grad) {
+                  alpha = abs(cur + view - vProgress) / grad * fillOpacity;
+              }
+            } else {
+              alpha = abs(vProgress - cur) / grad * fillOpacity;
+            }
+          }
+        }
+      } else if (renderPixelLine == 1.0) {
+        if (vProgress < cur) {
+          alpha = 0.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: {
+      renderPixelLine?: boolean;
+      fillOpacity?: number;
+      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.currentMoveIndex = 0;
+    this.options = { textureMode: 'repeat', ...options };
+
+    if (!options.animateSpeed) {
+      this.options.animateSpeed = 0.01;
+    }
+    if (options.textureMode === 'tail') {
+      this.createTailArrow();
+    }
+    this.renderPixelLine = options.renderPixelLine || false;
+    this.init(points);
+  }
+
+  public calcPoints(points: [number, number, number][], scale = 0.30): number[][] {
+    const { THREE } = Externals.getInstance();
+    const len = points.length;
+    if (len < 2) return [];
+    const res = [];
+    const linePoints = points.map((v) => [v[0], v[1]]);
+    for (let i = 0; i < len; i++) {
+      const cur = new THREE.Vector2(...linePoints[i]);
+      const prev = i === 0 ? null : new THREE.Vector2(...linePoints[i - 1]);
+      const next = i === len - 1 ? null : new THREE.Vector2(...linePoints[i + 1]);
+      const formP2C = prev ? new THREE.Vector2().subVectors(cur, prev).normalize() : null;
+      const formC2N = next ? new THREE.Vector2().subVectors(next, cur).normalize() : null;
+      const fromP2N = formC2N && formP2C ? new THREE.Vector2().addVectors(formC2N, formP2C).normalize() : null;
+      // eslint-disable-next-line no-nested-ternary
+      const normal = i === 0 ? new THREE.Vector2(-(formC2N as THREE.Vector2).y, (formC2N as THREE.Vector2).x)
+        : (i === len - 1 ? new THREE.Vector2(-(formP2C as THREE.Vector2).y, (formP2C as THREE.Vector2).x)
+          : new THREE.Vector2(-(fromP2N as THREE.Vector2).y, (fromP2N as THREE.Vector2).x));
+      const n1 = new THREE.Vector2().addVectors(cur, normal.clone().multiplyScalar(-scale));
+      const n2 = new THREE.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 { THREE } = Externals.getInstance();
+    const textureUrl = this.options.textureUrl;
+    new NS_THREE.TextureLoader().load(textureUrl as string, (texture: THREE.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 THREE.PlaneGeometry(width, height);
+      const color = this.options.color ? this.options.color : 0xffffff;
+      const material = new THREE.MeshBasicMaterial({
+        color: color as string,
+        map: texture,
+        transparent: true,
+        opacity: 1.0,
+        depthTest: false,
+      });
+      material.needsUpdate = true;
+      const plane = new THREE.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][], nScale = 0.3): { point: [number, number, number]; normal: number[]; scale: number }[] {
+    const normalScale = nScale > 1 ? 0.01 : nScale;
+    const { THREE } = Externals.getInstance();
+    // this.testLines = [];
+    // 得到路径上的拐点信息
+    const pLength = points.length;
+    const orgedPoints = this.calcPoints(points, normalScale); // 传入的一个点拓展为3个信息: 法向量 起 终
+    const vec3orgedPoint: THREE.Vector3[] = orgedPoints.map((pt) => new THREE.Vector3(...pt));
+    const vec3Chunk: THREE.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 - 1][pickIndex] : vec3Chunk[startIndex - 1][pickIndex];
+      const line11 = vec3Chunk[startIndex - 1][pickIndex];
+      const line1NormalizeVec = new THREE.Vector3().subVectors(line11, line10).normalize().multiplyScalar(normalScale);
+      const line12 = new THREE.Vector3().addVectors(line11, line1NormalizeVec);
+      const line13 = new THREE.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 THREE.Vector3().subVectors(line21, line20).normalize().multiplyScalar(normalScale);
+      const line22 = new THREE.Vector3().addVectors(line21, line2NormalizeVec);
+      const line23 = new THREE.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('有拐角 但无相交');
+        // const lin01 = Helper.createLine([[line13.x, line13.y, 0], [line10.x, line10.y, 0], [line11.x, line11.y, 0], [line12.x, line12.y, 0]], '#ff0000', 3000);
+        // const lin02 = 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(lin01);
+        // this.testLines.push(lin2);
+        // this.testLines.push(lin3);
+        return null;
+      }
+      const intersectCrd = intersects.features[0].geometry.coordinates;
+      // console.log('有交点', line1, line2, intersects, intersectCrd);
+      // 根据 endCrd 和 startCrd 取 向量作延长线s
+      const vecFromStE = new THREE.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 THREE.Vector3(...curIntersectCrd, 0);
+        let end = le;
+        // 判断 end 是否在 下一个 area
+        if (nextIntersectCrd && nextHull && turf.booleanWithin(turf.point([le.x, le.y]), nextHull)) {
+          end = new THREE.Vector3(nextIntersectCrd[0], nextIntersectCrd[1], nextIntersectCrd[2]);
+        }
+        // 缩放比例是: V<ls.x - le.x, ls.y - le.y> 的length
+        const oL = new THREE.Vector3().subVectors(le, ls).length();
+        const newL = new THREE.Vector3().subVectors(end, new THREE.Vector3(startCoord.x, startCoord.y, 0)).length();
+        const nv = new THREE.Vector3().subVectors(end, new THREE.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 THREE.Vector3(...curIntersectCrd, 0);
+        let start = ls;
+        if (nextIntersectCrd && nextHull && turf.booleanWithin(turf.point([ls.x, ls.y]), nextHull)) {
+          start = new THREE.Vector3(nextIntersectCrd[0], nextIntersectCrd[1], nextIntersectCrd[2]);
+        }
+        const oL = new THREE.Vector3().subVectors(le, ls).length();
+        const newL = new THREE.Vector3().subVectors(start, new THREE.Vector3(endCoord.x, endCoord.y, 0)).length();
+        const nv = new THREE.Vector3().subVectors(new THREE.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 { THREE } = Externals.getInstance();
+    const points = pts;
+    const sWidth = this.options.strokeWidth || 0;
+    const fWidth = this.options.width ? this.options.width : 0.3;
+    const normalScale = sWidth + fWidth / 2;
+    const res: { point: [number, number, number]; normal: number[]; scale: number }[] = this.orgPoints(points, normalScale);
+    this.orgedPoints = res;
+    this.points = [];
+    const firstDis = 0.1;
+
+    if (points.length > 1) {
+      const [first, second, secondLast, last] = [
+        points[0],
+        points[1],
+        points[points.length - 2],
+        points[points.length - 1],
+      ];
+
+      const firstVec = new THREE.Vector3(...first);
+      const secondVec = new THREE.Vector3(...second);
+      const dirFirst = new THREE.Vector3().subVectors(firstVec, secondVec)
+        .normalize().multiplyScalar(firstVec.distanceTo(secondVec) * 0.05);
+      const head = firstVec.clone().add(dirFirst);
+      const secondLastVec = new THREE.Vector3(...secondLast);
+      const lastVec = new THREE.Vector3(...last);
+      const dirLast = new THREE.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 THREE.Vector3(...this.points[0]),
+        currentVec = new THREE.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 THREE.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 THREE.InterleavedBuffer(vertexBuffer, components); // 交叉存储, 表明多个类型的attributes(例如，顶点位置、法向量、UV 和颜色值)被存储到一个队列中。
+    // InterleavedBuffer( array : TypedArray 一个基于共享缓存的类型化队列, stride : Integer 每个顶点占用类型化队列的多少个元素 )
+
+    const lastAttrib = new THREE.InterleavedBufferAttribute(verticesBuffer, 4, 0, false);
+    this.bufferGeometry.setAttribute('last', lastAttrib);
+    const currentAttrib = new THREE.InterleavedBufferAttribute(verticesBuffer, 4, components * pointToCrdsNum, false);
+    this.bufferGeometry.setAttribute('current', currentAttrib);
+    const nextAttrib = new THREE.InterleavedBufferAttribute(verticesBuffer, 4, components * pointToCrdsNum * 2, false);
+    this.bufferGeometry.setAttribute('next', nextAttrib);
+    const texoffAttrib = new THREE.InterleavedBufferAttribute(
+      verticesBuffer, 1, components * pointToCrdsNum + 4, false,
+    );
+    this.bufferGeometry.setAttribute('texoff', texoffAttrib);
+    const progressAttrib = new THREE.InterleavedBufferAttribute(
+      verticesBuffer, 1, components * pointToCrdsNum + 5, false,
+    );
+    this.bufferGeometry.setAttribute('progress', progressAttrib);
+
+    const normalAttrib = new THREE.InterleavedBufferAttribute(verticesBuffer, 2, components * pointToCrdsNum + 6, false);
+    this.bufferGeometry.setAttribute('normalVec', normalAttrib);
+
+    const scaleAttrib = new THREE.InterleavedBufferAttribute(verticesBuffer, 1, components * pointToCrdsNum + 8, false);
+    this.bufferGeometry.setAttribute('normalScale', scaleAttrib);
+
+    const positionVertBuffer = new THREE.InterleavedBuffer(
+      vertexBuffer.slice(components * pointToCrdsNum, vertices.length - components * pointToCrdsNum),
+      components,
+    );
+
+    const positionAttrib = new THREE.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 resolution = new THREE.Vector2(window.innerWidth, window.innerHeight);
+    const resolution = new THREE.Vector2(1, 1);
+
+    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(255, 255, 255)').alpha(0.0);
+    this.uniforms = {
+      stripTexture: {
+        type: 't',
+        value: null,
+      },
+      fillColor: {
+        type: 'v4',
+        value: new THREE.Vector4(
+          fillColor.red() / 255,
+          fillColor.green() / 255,
+          fillColor.blue() / 255,
+          fillColor.alpha(),
+        ),
+      },
+      strokeColor: {
+        type: 'v4',
+        // eslint-disable-next-line max-len
+        value: new THREE.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,
+      },
+      renderPixelLine: {
+        type: 'f',
+        value: this.renderPixelLine ? 1.0 : 0.0,
+      },
+      fillOpacity: {
+        type: 'f',
+        value: this.options.fillOpacity || 0.8,
+      },
+      resolution: {
+        type: 'v2',
+        value: resolution,
+      },
+      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 === null || typeof (this.options.viewDistance) === 'undefined' ? 15 : this.options.viewDistance },
+      gradientDistance: { type: 'f', value: this.options.gradientDistance || 4 },
+      gradientEnabled: { value: this.options.gradientEnabled || false },
+    } as { [uniform: string]: NS_THREE.IUniform };
+
+    this.material = new THREE.ShaderMaterial({
+      fragmentShader: MeshLine2D.FragmentShader,
+      vertexShader: MeshLine2D.VertexShader,
+      uniforms: this.uniforms,
+      depthTest: false, // 不加入深度检测, 按照bind顺序渲染
+      side: THREE.DoubleSide,
+      wireframe: false,
+      transparent: true,
+      opacity: 1.0,
+      blending: THREE.NormalBlending,
+      blendEquation: THREE.AddEquation,
+      blendSrc: THREE.SrcAlphaFactor,
+      blendDst: THREE.OneMinusSrcAlphaFactor,
+    });
+
+    if (this.options.textureUrl && this.options.textureMode === 'repeat') {
+      new THREE.TextureLoader().load(this.options.textureUrl, (texture: THREE.Texture) => {
+        texture.wrapS = THREE.RepeatWrapping;
+        texture.wrapT = THREE.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 THREE.Mesh(this.bufferGeometry, this.material);
+    this.mesh.renderOrder = 1000;
+    this.add(this.mesh);
+  }
+
+  public setContainer(container: HTMLElement): void {
+    if (EnvironmentUtils.GetEnv() === Env.Miniapp) return;
+    this.resize(container.clientWidth, container.clientHeight);
+  }
+
+  public resize(containerWidth: number, containerHeight: number): void {
+    if (this.viewWidth === containerWidth && this.viewHeight === containerHeight) return;
+    const resolution = new NS_THREE.Vector2(containerWidth, containerHeight);
+    this.uniforms.resolution.value = resolution;
+    this.needsUpdate = true;
+    this.viewWidth = containerWidth;
+    this.viewHeight = containerHeight;
+  }
+
+  public getBestView(currentPoint: NS_THREE.Vector3, fromDistance: number, toDistance: number): number {
+    let nearPoint = this.getPointOnDistance(fromDistance + 0.2).point;
+    let curPoint = currentPoint;
+    const { THREE } = Externals.getInstance();
+
+    // 过滤0.5米转角
+    let f = fromDistance + 1;
+    for (; f < (fromDistance + 10); f += 1) {
+      const scan = this.getPointOnDistance(f);
+      const dir1 = new THREE.Vector3().subVectors(scan.point, nearPoint);
+      const dir2 = new THREE.Vector3().subVectors(nearPoint, curPoint);
+      const rad = THREE.MathUtils.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 THREE.Vector3().subVectors(scan.point, nearPoint);
+      const dir2 = new THREE.Vector3().subVectors(nearPoint, curPoint);
+      const rad = THREE.MathUtils.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: NS_THREE.Vector3; index: number } {
+    const { THREE } = Externals.getInstance();
+    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 THREE.Vector3(...this.points[p]);
+      if (p === this.points.length - 1 || distance <= 0) {
+        return {
+          point: from,
+          index: p + 1,
+        };
+      }
+
+      const fromDist = this.distances[p];
+      const to = new THREE.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: NS_THREE.Vector3, startDistance = 0): { point: NS_THREE.Vector3; distance: number; index: number } {
+    const { THREE } = Externals.getInstance();
+    const pathLength = this.distances[this.distances.length - 1];
+    let precision = 8;
+    let best: NS_THREE.Vector3 = new THREE.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,
+    };
+  }
+
+  getPathWithScope(startDistance: number, endDistance: number): [number, number, number][] {
+    if (startDistance >= endDistance) {
+      const endPoint = this.getPointOnDistance(endDistance).point;
+      return [
+        [endPoint.x, endPoint.y, 0],
+      ];
+    }
+    let i = this.distances.length - 1;
+    let j = 0;
+    while (i >= 0 && this.distances[i] > startDistance) i -= 1;
+    while (j < this.distances.length && this.distances[j] < endDistance) j += 1;
+    const startPoint = this.getPointOnDistance(startDistance).point;
+    const endPoint = this.getPointOnDistance(endDistance).point;
+    return [
+      [startPoint.x, startPoint.y, 0],
+      ...this.points.slice(i + 1, j - i - 1),
+      [endPoint.x, endPoint.y, 0],
+    ];
+  }
+
+  getPathBaseStartPoint(distance: number): [number, number, number][] {
+    const startPoint = this.getPointOnDistance(distance).point;
+    for (let i = 0; i < this.distances.length; i += 1) {
+      if (this.distances[i] > distance) {
+        return [
+          [startPoint.x, startPoint.y, 0],
+          ...this.points.slice(i),
+        ];
+      }
+    }
+    return this.points.slice(this.distances.length - 1);
+  }
+
+  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!;
+      // this.uniforms.texOffset.value -= this.options.animateSpeed!;
+      frameContext.needUpdate = true;
+    }
+    if (this.initialized && !this.parent) {
+      frameContext.shouldPlaceElement = true;
+    }
+    return frameContext;
+  }
+
+  public dispose(): void {
+    if (this.parentOverlay) {
+      this.parentOverlay.removePath(this);
+    }
+    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 getLength(): number {
+    return this.distances[this.distances.length - 1];
+  }
+
+  public setCurrentIndex(currentIndex: number): void {
+    this.currentMoveIndex = currentIndex;
+    const current = this.distances[currentIndex + 1];
+    this.uniforms.currentDistance.value = current;
+    this.needsUpdate = true;
+  }
+
+  public getCurrent(): number {
+    return this.uniforms.currentDistance.value as number;
+  }
+
+  public getCurrentIndex(): number {
+    return this.currentMoveIndex;
+    // 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 setWidth(width: number): void {
+    if (this.uniforms.width.value !== width) {
+      this.uniforms.width.value = width;
+      this.needsUpdate = true;
+    }
+  }
+
+  public setColor(color: number|string): void{
+    if (color == null) return;
+    const c = new Color(color);
+    const v = this.uniforms.fillColor.value;
+    const { THREE } = Externals.getInstance();
+    const cv = new THREE.Vector4(c.red(), c.green(), c.blue(), c.alpha());
+    if (cv.equals(v)) return;
+    this.uniforms.fillColor.value = cv;
+    this.needsUpdate = true;
+  }
+
+  public getViewDistance(): number {
+    return this.uniforms.viewDistance.value as number;
+  }
+
+  public setParentOverlay(parent: PathOverlay2): void {
+    this.parentOverlay = parent;
+  }
+}
+
+export { MeshLine2D };