@aibee/owlly 1.0.25

package/src/owlly/element/path.ts

@@ -0,0 +1,727 @@
+import { Externals, NS_THREE } from '../stage/externals';
+import { ElementFrameContext, Element } from './element';
+import { BasicTools } from '../utils/basic-tools';
+import { PathUtils } from '../utils/path-utils';
+import { FloorModel, GroundParameters } from './floor-model';
+import { EventHub } from '../utils/event-hub';
+import { OwllyEvents } from '../utils/events';
+
+/**
+ * 路径元素, 渲染路径箭头(暂未引入箭头Mesh)
+ * @noInheritDoc
+ */
+class Path extends Element {
+  private modelInitialized: boolean;
+
+  // private pointMap: { x: number, y: number }
+
+  private gradientDistance: number;
+
+  pathMesh: NS_THREE.Mesh;
+
+  arrowMeshes: NS_THREE.Mesh[];
+
+  // private path: [number, number][];
+
+  private pathMinX: number;
+
+  private pathMinY: number;
+
+  private pathDistance: number[];
+
+  private pointMap: Map<string, Map<string, number[][]>>;
+
+  private viewDistance: number;
+
+  private bindedCamera: NS_THREE.Camera;
+
+  private dynamicPathEnabled: boolean;
+
+  private pathArrowMeshes: { arrowMesh: NS_THREE.Mesh; index: number }[];
+
+  /**
+   * @param path 路径
+   * @param options 可选参数集
+   * @param floorModel FloorModel对象，用于计算地面高度坐标
+   * @param groundParams GroundParameters对象，用于计算地面高度坐标
+   * @param color 路劲的颜色
+   * 当有groundParams时则优先使用它计算，忽略floorModel参数
+   */
+  constructor(
+    path?: { x: number; y: number }[],
+    options?: {
+      groundParams?: GroundParameters;
+      floorModel?: FloorModel;
+      arrowImageURL?: string;
+      color?: string;
+      viewDistance?: number;
+      // gradientDistance?: number;
+      dynamicPathEnabled?: boolean;
+      width?: number;
+    },
+  ) {
+    super();
+    this.modelInitialized = false;
+
+    this.pointMap = new Map();
+    this.gradientDistance = 2;
+    this.viewDistance = (options || {}).viewDistance || 30;
+    // this.gradientDistance = options?.gradientDistance || 2;
+    // this.dynamicPathEnabled = options?.dynamicPathEnabled || false;
+    // this.jointHintDistance = 10;
+
+    if (path) this.load(path, options);
+  }
+
+  /**
+   *
+   * @param path 路径点二维坐标数组
+   * @param params 其它可选参数
+   * @param arrowImageRatio 箭头图像的宽高比，用于生成纹理坐标
+   * @param arrowImageURL 箭头图像URL
+   * @param floorModel FloorModel对象，用于计算地面高度坐标
+   * @param groundParams GroundParameters对象，用于计算地面高度坐标
+   * @param color 路劲的颜色
+   * 当存在groundParams时优先用它计算，忽略floorModel
+   */
+  static generatePathMesh(
+    path: { x: number; y: number }[],
+    params?: {
+      viewDistance?: number;
+      gradientDistance?: number;
+      arrowImageRatio?: number;
+      arrowImageURL?: string;
+      floorModel?: FloorModel;
+      groundParams?: GroundParameters;
+      color?: string;
+      dynamicPathEnabled?: boolean;
+      width?: number;
+    },
+  ): {
+    mesh: NS_THREE.Mesh;
+    arrowMeshes: { arrowMesh: NS_THREE.Mesh; index: number }[];
+    newPath: [number, number][];
+    pointMap: Map<string, Map<string, number[][]>>;
+    pathMinX: number;
+    pathMinY: number;
+    progressBuffer: Float32Array;
+    pathDistance: number[];
+  } {
+    const {
+      viewDistance = 10,
+      gradientDistance = 2,
+      arrowImageRatio = 1,
+      arrowImageURL,
+      floorModel,
+      groundParams,
+      color,
+      dynamicPathEnabled,
+      width = 0.3,
+    } = params || {};
+    // const simplifiedPath = PathUtils.simplify(path, true).map((p) => ({ x: p.x, y: -p.y }));
+    const simplifiedPath = PathUtils.simplify(path, true);
+    const smoothedPath = PathUtils.smoothPath(simplifiedPath.map((p) => ([p.x, p.y])));
+    const centerNormals: NS_THREE.Vector2[] = [];
+    const pathDistance = [0];
+    const pathProgress = [0];
+    const { THREE } = Externals.getInstance();
+    smoothedPath.reduce(([x0, y0], [x1, y1], i) => {
+      centerNormals.push(new THREE.Vector2(y0 - y1, x1 - x0).normalize());
+      const len = Math.sqrt(((x0 - x1) ** 2) + ((y0 - y1) ** 2));
+      pathDistance.push(pathDistance[i - 1] + len);
+      return [x1, y1];
+    });
+    for (let i = 0, pathLen = pathDistance.length; i < pathLen; i += 1) {
+      pathProgress[i] = pathDistance[i] / pathDistance[pathLen - 1];
+    }
+
+    const sideAPath: [number, number][] = [];
+    const sideBPath: [number, number][] = [];
+    const halfWidth = width;
+    centerNormals.forEach((n, i) => {
+      if (i === 0) {
+        const [x0, y0] = smoothedPath[0];
+        sideAPath.push([x0 + n.x * halfWidth, y0 + n.y * halfWidth]);
+        sideBPath.push([x0 - n.x * halfWidth, y0 - n.y * halfWidth]);
+        // console.log(`#Path# SideA[${i}]=(${x0 + n.x * halfWidth}, ${y0 + n.y * halfWidth}), SideB[${i}]=(${x0 - n.x * halfWidth}, ${y0 - n.y * halfWidth})`);
+      }
+      const [x, y] = smoothedPath[i + 1];
+      sideAPath.push([x + n.x * halfWidth, y + n.y * halfWidth]);
+      sideBPath.push([x - n.x * halfWidth, y - n.y * halfWidth]);
+      // console.log(`#Path# SideA[${i}+1]=(${x + n.x * halfWidth}, ${y + n.y * halfWidth}), SideB[${i}+1]=(${x - n.x * halfWidth}, ${y - n.y * halfWidth})`);
+    });
+    sideBPath.reverse();
+    const shape = new THREE.Shape();
+    shape.moveTo(...sideAPath[0]);
+    sideAPath.forEach((p, i) => {
+      if (i === 0) return;
+      shape.lineTo(...p);
+    });
+    sideBPath.forEach((p) => {
+      shape.lineTo(...p);
+    });
+    shape.lineTo(...sideAPath[0]);
+
+    const geometry = new THREE.ShapeBufferGeometry(shape);
+    const arrowTexcoordScaleT = arrowImageRatio / halfWidth * 0.5;
+
+    let dynamicPath = false;
+    if (dynamicPathEnabled) {
+      dynamicPath = true;
+    }
+
+    const uniforms: { [uniform: string]: NS_THREE.IUniform } = {
+      // arrowTexture: {
+      //   value: null,
+      // },
+      arrowTexcoordScaleT: {
+        value: arrowTexcoordScaleT,
+      },
+      current: { value: 0.0 },
+      dynamic: { value: dynamicPath },
+      /* eslint-disable @typescript-eslint/camelcase */
+      full_length: { value: pathDistance[pathDistance.length - 1] },
+      view_distance: { value: viewDistance },
+      gradient_distance: { value: gradientDistance },
+      /* eslint-enable @typescript-eslint/camelcase */
+    };
+    if (arrowImageURL) {
+      new THREE.TextureLoader().load(arrowImageURL, (texture: NS_THREE.Texture) => {
+        texture.wrapS = THREE.RepeatWrapping;
+        texture.wrapT = THREE.RepeatWrapping;
+        texture.generateMipmaps = true;
+        texture.minFilter = THREE.LinearMipMapLinearFilter;
+        texture.magFilter = THREE.LinearMipMapLinearFilter;
+        // uniforms.arrowTexture.value = texture;
+        if (texture.image && texture.image.width && texture.image.height) {
+          uniforms.arrowTexcoordScaleT.value = texture.image.width / texture.image.height / halfWidth * 0.5;
+        }
+      });
+    }
+    const material = new THREE.ShaderMaterial({
+      vertexShader: `
+        attribute vec3 a_color;
+        attribute vec2 a_texcoord;
+        attribute float progress;
+        varying float vProgress;
+        varying vec3 vColor;
+        varying vec2 vTexcoord;
+        void main() {
+            gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+            vProgress = progress;
+            vColor = a_color;
+            vTexcoord = a_texcoord;
+        }
+        `,
+      fragmentShader: `
+        precision mediump float;
+        varying float vProgress;
+        varying vec3 vColor;
+        varying vec2 vTexcoord;
+        uniform float current;
+        uniform bool dynamic;
+        uniform float full_length;
+        uniform float view_distance;
+        uniform float gradient_distance;
+        // uniform sampler2D arrowTexture;
+        uniform float arrowTexcoordScaleT;
+        float alpha;
+        float cur;
+        bool dy;
+        void main() {
+            alpha = 0.8;
+            cur = current;
+            dy = dynamic;
+            if (vProgress < cur) {
+            alpha = 0.0;
+            } else {
+            if (vProgress > cur + view_distance) {
+                alpha = 0.0;
+            } else {
+                if (vProgress > cur + gradient_distance) {
+                  alpha = 0.8;
+                  if (cur > full_length - view_distance) {
+                      cur = full_length - view_distance;
+                  }
+                  if (vProgress > cur + view_distance - gradient_distance) {
+                      alpha = abs(cur + view_distance - vProgress) / gradient_distance * 0.8;
+                  }
+                } else {
+                  alpha = abs(vProgress - cur) / gradient_distance * 0.8;
+                }
+            }
+            }
+
+            // vec4 textureColor = texture2D(arrowTexture, vec2(vTexcoord.s, vTexcoord.t * arrowTexcoordScaleT));
+            // gl_FragColor = vec4((1.0 - textureColor.a) * vColor + textureColor.a * textureColor.rgb, 0.8);
+            if(dy) {
+              gl_FragColor = vec4(vColor,alpha);
+            } else {
+              gl_FragColor = vec4(vColor,0.8);
+            }
+
+        }
+        `,
+      uniforms,
+      side: THREE.DoubleSide,
+      depthTest: !dynamicPath,
+    });
+
+    let minX = Number.MAX_SAFE_INTEGER;
+    let minY = Number.MAX_SAFE_INTEGER;
+    const { array, count } = geometry.attributes.position;
+    for (let i = 0, j = 0; i < count; i += 1, j += 3) {
+      const x = array[j];
+      const y = array[j + 1];
+      if (array[j] < minX) minX = x;
+      if (array[j + 1] < minY) minY = y;
+    }
+    // const { index: indices } = geometry;
+    if (groundParams && groundParams.groundPlane) {
+      for (let i = 0, j = 0; i < count; i += 1, j += 3) {
+        const x = array[j];
+        const y = array[j + 1];
+        let z = 0.5;
+        const groundPoint = FloorModel.intersectWithGroundPlane(new THREE.Vector3(x, y, z), groundParams);
+        if (groundPoint) {
+          z = groundPoint.z + PathUtils.PathMeshOffsetZ;
+        }
+        (array as number[])[j + 2] = z;
+      }
+    } else {
+      const updateZWithFloorModel = (): void => {
+        if (!floorModel || !floorModel.isModelLoaded()) return;
+        for (let i = 0, j = 0; i < count; i += 1, j += 3) {
+          const x = array[j];
+          const y = array[j + 1];
+          let z = 0.5;
+          const groundPoint = floorModel.intersectGround(new THREE.Vector3(x, y, z));
+          // console.info('#PathArrow# groundPoint:', groundPoint);
+          if (groundPoint) {
+            z = groundPoint.z + PathUtils.PathMeshOffsetZ;
+          }
+          (array as number[])[j + 2] = z;
+        }
+        (geometry.attributes.position as NS_THREE.BufferAttribute).needsUpdate = true;
+      };
+
+      if (floorModel && floorModel.isModelLoaded()) {
+        updateZWithFloorModel();
+      }
+      EventHub.on(OwllyEvents.ELEMENT_LOADED, (element: Element) => {
+        if (!(element instanceof FloorModel)) return;
+        if ((element as FloorModel) !== floorModel) return;
+        updateZWithFloorModel();
+      });
+    }
+    (geometry.attributes.position as NS_THREE.BufferAttribute).needsUpdate = true;
+
+    // TODO(jyfang): arrow meshes not needed now
+    const arrowMeshes = [];
+    if (arrowImageURL) {
+      const geom = new THREE.PlaneBufferGeometry(0.5 * halfWidth / 0.3, 0.5 * halfWidth / 0.3);
+      const materialTop = new THREE.MeshBasicMaterial({
+        color: 0xFFFFFF,
+        transparent: true,
+        opacity: 0.8,
+        blending: THREE.NormalBlending,
+        side: THREE.DoubleSide,
+        depthTest: !dynamicPath,
+      });
+      const texture = new THREE.TextureLoader().load(arrowImageURL);
+      texture.needsUpdate = true;
+      materialTop.needsUpdate = true;
+      materialTop.map = texture;
+      const baseArrowMesh = new THREE.Mesh(geom, materialTop);
+      for (let i = 0, threshold = 0.8, pathLen = smoothedPath.length; i < pathLen; i += 1) {
+        if (pathDistance[i] > threshold) {
+          threshold += 0.8;
+          const [x, y] = smoothedPath[i];
+          const { x: nx, y: ny } = centerNormals[i === pathLen - 1 ? i - 1 : i];
+          const newMesh = baseArrowMesh.clone();
+          newMesh.position.set(x, y, -0.5);
+          if (groundParams) {
+            const floorPos = FloorModel.intersectWithGroundPlane(new THREE.Vector3(x, y, 2), groundParams);
+            if (floorPos) {
+              floorPos.z += PathUtils.ArrowMeshOffsetZ;
+              newMesh.position.copy(floorPos);
+            }
+          } else if (floorModel) {
+            const floorPos = floorModel.intersectGround(new THREE.Vector3(x, y, 2));
+            if (floorPos) {
+              floorPos.z += PathUtils.ArrowMeshOffsetZ;
+              newMesh.position.copy(floorPos);
+            }
+          }
+          newMesh.material = materialTop.clone();
+          newMesh.rotateZ(new THREE.Vector2(ny, -nx).angle() - 0.5 * Math.PI);
+          arrowMeshes.push({ arrowMesh: newMesh, index: i });
+        }
+      }
+    }
+
+    const pathMinX = Math.floor(minX);
+    const pathMinY = Math.floor(minY);
+    const pointMap = new Map<string, Map<string, number[][]>>();
+    smoothedPath.forEach(([x, y], i) => {
+      const [row, col] = PathUtils.getPointHash(
+        x, y, pathMinX, pathMinY, 25,
+      );
+      if (!pointMap.has(`${row}`)) pointMap.set(`${row}`, new Map<string, number[][]>());
+      const mapRow = pointMap.get(`${row}`)!;
+      if (!mapRow.has(`${col}`)) mapRow.set(`${col}`, []);
+      mapRow.get(`${col}`)!.push([i, x, y]);
+    });
+
+    // TODO(jyfang): no floating arrows right now.
+    // const floatingArrows = [];
+    // let lastTurnIndex = 0;
+    // for (let i = 0; i < simplifiedPath.length - 2; i += 1) {
+    //     const p0 = simplifiedPath[i];
+    //     const p1 = simplifiedPath[i + 1];
+    //     const p2 = simplifiedPath[i + 2];
+    //     const v0 = new Vector2(p0.x - p1.x, p0.y - p1.y);
+    //     const v1 = new Vector2(p2.x - p1.x, p2.y - p1.y);
+    //     const deg = NavigationPath.getAngle(v0, v1) / Math.PI * 180;
+
+    //     if (deg < 135) {
+    //     const newMesh = this.baseFloatingArrowMesh.clone();
+    //     newMesh.position.setX(p1.x);
+    //     newMesh.position.setY(p1.y);
+    //     newMesh.material = this.baseFloatingArrowMesh.material.clone();
+    //     newMesh.up.set(0, 0, 1);
+    //     newMesh.rotateZ(Math.PI + v1.angle());
+    //     newMesh.rotateX(Math.PI / 2);
+    //     newMesh.renderOrder = 250;
+    //     newMesh.scale.set(2, 2, 2);
+    //     const pathPointIndex = NavigationPath.findNeareastPathPoint(
+    //         p1.x, p1.y, pathMinX, pathMinY, pointMap, true,
+    //     );
+    //     if (pathDistance[pathPointIndex] - pathDistance[lastTurnIndex] > this.jointHintDistance) {
+    //         floatingArrows.push({ mesh: newMesh, index: pathPointIndex });
+    //         lastTurnIndex = pathPointIndex;
+    //     }
+    //     }
+    // }
+
+    const progressBuffer = new Float32Array(count);
+    const colorBuffer = new Float32Array(count * 3);
+    // rgb(255, 140, 0) rgb(240, 68, 55)
+    /* eslint-disable */
+
+    let rs = 1.0, gs = 140 / 255, bs = 0;
+    let rd = 240 / 255, gd = 68 / 255, bd = 55 / 255;
+    if(color)
+    {
+      const colorChange: Array<any> = [];
+      for (let i = 2; i < 8; i += 2) {
+        colorChange.push(parseInt(`0x${color.slice(i, i + 2)}`));
+      }
+      rs = colorChange[0] / 255, gs = colorChange[1] / 255, bs = colorChange[2] / 255;
+      rd = colorChange[0] / 255, gd = colorChange[1] / 255, bd = colorChange[2] / 255;
+    }
+
+
+    const rdiff = rd - rs, gdiff = gd - gs, bdiff = bd - bs;
+    /* eslint-enable */
+    for (let i = 0, j = 0; i < count; i += 1, j += 3) {
+      const px = array[j];
+      const py = array[j + 1];
+      const [row, col] = PathUtils.getPointHash(
+        px, py, pathMinX, pathMinY, 25,
+      );
+      let dist = Number.MAX_SAFE_INTEGER;
+      if (
+        pointMap.has(`${row}`)
+        && pointMap.get(`${row}`)!.has(`${col}`)
+      ) {
+        pointMap.get(`${row}`)!.get(`${col}`)!.forEach(([index, x, y]) => {
+          const d2 = ((px - x) ** 2) + ((py - y) ** 2);
+          if (d2 > dist) return;
+          dist = d2;
+          const l = pathDistance[index];
+          const p = pathProgress[index];
+          progressBuffer[i] = l;
+          colorBuffer[i * 3] = rs + p * rdiff;
+          colorBuffer[i * 3 + 1] = gs + p * gdiff;
+          colorBuffer[i * 3 + 2] = bs + p * bdiff;
+        });
+      }
+    }
+    // const texcoordBuffer = new Float32Array(count * 2);
+    // let x0 = (array[0] + array[(count - 1) * 3]) / 2;
+    // let y0 = (array[1] + array[(count - 1) * 3 + 1]) / 2;
+    // let totalDistance = 0;
+    // for (let i = 0; i < count / 2; i += 1) {
+    //   const x1 = (array[i * 3] + array[(count - 1 - i) * 3]) / 2;
+    //   const y1 = (array[i * 3 + 1] + array[(count - 1 - i) * 3 + 1]) / 2;
+    //   totalDistance += Math.sqrt((x1 - x0) * (x1 - x0) + (y1 - y0) * (y1 - y0));
+    //   x0 = x1;
+    //   y0 = y1;
+
+    //   texcoordBuffer[i * 2] = 0.0;
+    //   texcoordBuffer[(count - 1 - i) * 2] = 1.0;
+
+    //   if (i === count / 2 - 1) {
+    //     texcoordBuffer[i * 2 + 1] = totalDistance;
+    //     texcoordBuffer[(count - 1 - i) * 2 + 1] = totalDistance;
+    //   } else {
+    //     const vAB = new Vector2(
+    //       array[(count - 1 - i) * 3] - array[i * 3],
+    //       array[(count - 1 - i) * 3 + 1] - array[i * 3 + 1],
+    //     );
+    //     const crossProduct = vAB.cross(centerNormals[i]);
+    //     const offset = crossProduct / 2;
+    //     texcoordBuffer[i * 2 + 1] = totalDistance - offset;
+    //     texcoordBuffer[(count - 1 - i) * 2 + 1] = totalDistance + offset;
+    //   }
+
+    //   // if (i % 2 === 0) {
+    //   //   texcoordBuffer[i * 2 + 1] = 0.0;
+    //   //   texcoordBuffer[(count - 1 - i) * 2 + 1] = 0.0;
+    //   // } else {
+    //   //   texcoordBuffer[i * 2 + 1] = 1.0;
+    //   //   texcoordBuffer[(count - 1 - i) * 2 + 1] = 1.0;
+    //   // }
+    // }
+    // geometry.addAttribute('a_texcoord', new BufferAttribute(texcoordBuffer, 2));
+    geometry.addAttribute('progress', new THREE.BufferAttribute(progressBuffer, 1));
+    geometry.addAttribute('a_color', new THREE.BufferAttribute(colorBuffer, 3));
+
+    material.transparent = true;
+    const mesh = new THREE.Mesh(geometry, material);
+    return {
+      mesh,
+      arrowMeshes,
+      newPath: smoothedPath,
+      pointMap,
+      pathMinX,
+      pathMinY,
+      progressBuffer,
+      pathDistance,
+    };
+  }
+
+  /**
+   * 载入路径
+   * @param path 路径
+   */
+  load(path: { x: number; y: number }[],
+    options?: {
+      groundParams?: GroundParameters;
+      floorModel?: FloorModel;
+      arrowImageURL?: string;
+      color?: string;
+      viewDistance?: number;
+    //   gradientDistance?: number;
+      dynamicPathEnabled?: boolean;
+      width?: number;
+    }): void {
+    const {
+      groundParams,
+      floorModel,
+      arrowImageURL,
+      color,
+      dynamicPathEnabled, // / = 'imgs/arrow.png',
+      width,
+      viewDistance,
+    } = options || {};
+    const {
+      mesh,
+      arrowMeshes,
+      // newPath,
+      pathMinX,
+      pathMinY,
+      pointMap,
+      pathDistance,
+    } = Path.generatePathMesh(path, {
+      groundParams,
+      floorModel,
+      arrowImageURL,
+      color,
+      dynamicPathEnabled,
+      width,
+      viewDistance,
+    });
+
+    this.pathMesh = mesh;
+    this.pathMesh.up.set(0, 0, 1);
+    this.pathMesh.renderOrder = 200;
+    this.add(this.pathMesh);
+    this.arrowMeshes = [];
+    this.pathArrowMeshes = arrowMeshes;
+    arrowMeshes.forEach(({ arrowMesh }) => {
+      arrowMesh.renderOrder = 201;
+      this.arrowMeshes.push(arrowMesh);
+      this.add(arrowMesh);
+    });
+
+    // this.path = newPath;
+
+    this.pathMinX = pathMinX;
+    this.pathMinY = pathMinY;
+    this.pointMap = pointMap;
+
+    this.pathDistance = pathDistance;
+    this.modelInitialized = true;
+  }
+
+  /** @ignore */
+  public update(): ElementFrameContext {
+    const frameContext = new ElementFrameContext(this);
+    if (this.modelInitialized) {
+      this.modelInitialized = false;
+      frameContext.needUpdate = true;
+    }
+    const { THREE } = Externals.getInstance();
+    // TODO(jyfang): dynamic path
+    if (this.dynamicPathEnabled && this.pathMesh && this.bindedCamera) {
+      const { position: { x: cameraX, y: cameraY } } = this.bindedCamera;
+      const [row, col] = PathUtils.getPointHash(
+        cameraX, cameraY, this.pathMinX, this.pathMinY, 25,
+      );
+      let dist = Number.MAX_SAFE_INTEGER;
+      let currentProgress = 0;
+
+      if (this.pointMap.get(`${row}`)) {
+        const mapRow = this.pointMap.get(`${row}`)!.get(`${col}`);
+        if (this.pointMap.get(`${row}`) && mapRow) {
+        // console.log(mapRow, this.viewDistance, this.position, [row, col], this.pathDistance, this.pointMap);
+          mapRow.forEach(([index, x, y]) => {
+            const d2 = ((cameraX - x) ** 2) + ((cameraY - y) ** 2);
+            if (d2 > dist) return;
+            dist = d2;
+            currentProgress = this.pathDistance[index];
+          });
+          const fullLength = this.pathDistance[this.pathDistance.length - 1];
+          if (currentProgress < 5) currentProgress = 0;
+          this.pathArrowMeshes.forEach(({ arrowMesh: m, index: pathIndex }) => {
+            const prog = this.pathDistance[pathIndex];
+            let cur = currentProgress;
+            if (m.isMesh && m.material instanceof THREE.Material) {
+              m.material.opacity = 0;
+            }
+            if (prog > cur && prog < cur + this.viewDistance) {
+              if (m.isMesh && m.material instanceof THREE.Material) {
+                m.material.opacity = 0.8;
+              }
+
+              if (prog < cur + this.gradientDistance) {
+                if (m.isMesh && m.material instanceof THREE.Material) {
+                  m.material.opacity = Math.abs(prog - cur) / this.gradientDistance * 0.8;
+                }
+              } else {
+                if (cur > fullLength - this.viewDistance) {
+                  cur = fullLength - this.viewDistance;
+                }
+                if (prog > cur + this.viewDistance - this.gradientDistance) {
+                  if (m.isMesh && m.material instanceof THREE.Material) {
+                    m.material.opacity = Math.abs(cur + this.viewDistance - prog)
+                  / this.gradientDistance * 0.8;
+                  }
+                }
+              }
+            }
+            if (m.isMesh && m.material instanceof THREE.Material) {
+              m.material.needsUpdate = true;
+            }
+          });
+        }
+        if (this.pathMesh.material instanceof THREE.ShaderMaterial) {
+          this.pathMesh.material.uniforms.current.value = currentProgress;
+          this.pathMesh.material.needsUpdate = true;
+        }
+      }
+    }
+    if (this.modelInitialized && !this.parent) {
+      frameContext.shouldPlaceElement = true;
+    }
+    return frameContext;
+  }
+
+  public dispose(): void {
+    super.dispose();
+    BasicTools.dispose(this, true);
+  }
+
+  setPathSettings(camera: NS_THREE.Camera, viewDistance: number, dynamicPathEnabled: boolean): void {
+    this.bindedCamera = camera;
+    this.viewDistance = viewDistance;
+    this.dynamicPathEnabled = dynamicPathEnabled;
+  }
+
+  // updatePathSettings({
+  //   gradientDistance, dynamicPathEnabled, viewDistance, jointHintDistance,
+  // }) {
+  //   if (gradientDistance) this.gradientDistance = gradientDistance;
+  //   if (dynamicPathEnabled) this.dynamicPathEnabled = dynamicPathEnabled;
+  //   if (viewDistance) this.viewDistance = viewDistance;
+  //   if (jointHintDistance) this.jointHintDistance = jointHintDistance;
+  // }
+
+  // setZ(value) {
+  //   this.z = value;
+  // }
+
+  // setDepthTest(val) {
+  //   this.group.traverse((mesh) => {
+  //     if (!mesh.isMesh) return;
+  //     mesh.material.depthTest = val;
+  //   });
+  // }
+
+  // update() {
+  //   if (!this.vrScene || !this.pathMesh || !this.dynamicPathEnabled) return;
+  //   const { x: cameraX, y: cameraY } = this.vrScene.panoCamera.position;
+  //   const [row, col] = NavigationPath.getPointHash(
+  //     cameraX, cameraY, this.pathMinX, this.pathMinY, 25,
+  //   );
+  //   let dist = Number.MAX_SAFE_INTEGER;
+  //   let currentProgress = 0;
+  //   if (this.pointMap[row] && this.pointMap[row][col]) {
+  //     this.pointMap[row][col].forEach(([index, x, y]) => {
+  //       const d2 = ((cameraX - x) ** 2) + ((cameraY - y) ** 2);
+  //       if (d2 > dist) return;
+  //       dist = d2;
+  //       currentProgress = this.pathDistance[index];
+  //     });
+  //     const fullLength = this.pathDistance[this.pathDistance.length - 1];
+  //     if (currentProgress < 5) currentProgress = 0;
+  //     this.arrowMeshes.forEach(({ mesh: m, index: pathIndex }) => {
+  //       const prog = this.pathDistance[pathIndex];
+  //       let cur = currentProgress;
+  //       m.material.opacity = 0;
+  //       if (prog > cur && prog < cur + this.viewDistance) {
+  //         m.material.opacity = 0.8;
+
+  //         if (prog < cur + this.gradientDistance) {
+  //           m.material.opacity = Math.abs(prog - cur) / this.gradientDistance * 0.8;
+  //         } else {
+  //           if (cur > fullLength - this.viewDistance) {
+  //             cur = fullLength - this.viewDistance;
+  //           }
+  //           if (prog > cur + this.viewDistance - this.gradientDistance) {
+  //             m.material.opacity = Math.abs(cur + this.viewDistance - prog)
+  //               / this.gradientDistance * 0.8;
+  //           }
+  //         }
+  //       }
+  //       m.material.needsUpdate = true;
+  //     });
+  //     // this.floatingArrows.forEach(({ mesh: m, index: pathIndex }) => {
+  //     //   const prog = this.pathDistance[pathIndex];
+  //     //   m.material.opacity = 0;
+  //     //   if (prog > currentProgress && prog < currentProgress + 15) {
+  //     //     m.material.opacity = 1 - Math.abs(prog - currentProgress - mid) / mid;
+  //     //   }
+  //     //   m.material.needsUpdate = true;
+  //     // });
+  //   } else {
+  //     console.log('miss');
+  //   }
+  //   this.pathMesh.material.uniforms.current.value = currentProgress;
+  //   this.pathMesh.material.needsUpdate = true;
+  // }
+}
+
+export { Path };