@realsee/dnalogel 3.37.2 → 3.39.0

package/libs/GuideLinePlugin/GuideLineModeItem/index.js

@@ -1,32 +1,32 @@
-var V = Object.defineProperty, T = Object.defineProperties;
-var U = Object.getOwnPropertyDescriptors;
-var k = Object.getOwnPropertySymbols;
-var x = Object.prototype.hasOwnProperty, F = Object.prototype.propertyIsEnumerable;
-var v = (l, e, t) => e in l ? V(l, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : l[e] = t, d = (l, e) => {
+var x = Object.defineProperty, w = Object.defineProperties;
+var M = Object.getOwnPropertyDescriptors;
+var D = Object.getOwnPropertySymbols;
+var P = Object.prototype.hasOwnProperty, U = Object.prototype.propertyIsEnumerable;
+var b = (l, e, t) => e in l ? x(l, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : l[e] = t, m = (l, e) => {
   for (var t in e || (e = {}))
-    x.call(e, t) && v(l, t, e[t]);
-  if (k)
-    for (var t of k(e))
-      F.call(e, t) && v(l, t, e[t]);
+    P.call(e, t) && b(l, t, e[t]);
+  if (D)
+    for (var t of D(e))
+      U.call(e, t) && b(l, t, e[t]);
   return l;
-}, p = (l, e) => T(l, U(e));
-var i = (l, e, t) => (v(l, typeof e != "symbol" ? e + "" : e, t), t);
-import * as n from "three";
-import { logWarning as L, logError as S } from "../../shared-utils/log.js";
-import { createLineGeometry as O } from "../utils/createLineGeometry.js";
-import { isPanoramaLike as _, isModelLike as M } from "../../shared-utils/five/mode.js";
+}, c = (l, e) => w(l, M(e));
+var i = (l, e, t) => (b(l, typeof e != "symbol" ? e + "" : e, t), t);
+import * as h from "three";
+import { logWarning as F, logError as L } from "../../shared-utils/log.js";
+import { createLineGeometry as S } from "../utils/createLineGeometry.js";
+import { isPanoramaLike as O, isModelLike as _ } from "../../shared-utils/five/mode.js";
 import "hammerjs";
 import "../../vendor/@tweenjs/tween/dist/tween.esm.js.js";
 import "../../CSS3DRenderPlugin/utils/three/CSS3DRender.js";
 import "../../CSS3DRenderPlugin/utils/generateBehindFiveElement.js";
 import "animejs";
-import { notNil as w } from "../../shared-utils/isNil.js";
-import { BetterTween as E, tweenProgress as A } from "../../shared-utils/animationFrame/BetterTween.js";
+import { notNil as V } from "../../shared-utils/isNil.js";
+import { BetterTween as A, tweenProgress as E } from "../../shared-utils/animationFrame/BetterTween.js";
 import { loadTexture as G } from "../../shared-utils/three/loadTexture.js";
-import P from "../../PanoTagPlugin/controller/index.js";
+import k from "../../PanoTagPlugin/controller/index.js";
 import B from "../Components/Tag.js";
-import { filterAdjacentDistinct as I } from "../utils/index.js";
-import { objectAssignDeepExports as W } from "../../vendor/object-assign-deep/objectAssignDeep.js";
+import { filterAdjacentDistinct as N } from "../utils/index.js";
+import { objectAssignDeepExports as I } from "../../vendor/object-assign-deep/objectAssignDeep.js";
 const R = (
   /* glsl */
   `
@@ -37,7 +37,7 @@ const R = (
     gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
   }
 `
-), N = (
+), H = (
   /* glsl */
   `
   // 是否使用颜色
@@ -63,7 +63,13 @@ const R = (
   // 整体透明度
   uniform float opacity;
   // 最大 U 值
-  uniform float maxU;
+  uniform float maxV;
+  // 只显示 includeMinV ~ includeMaxV 之内的颜色
+  uniform float includeMinV;
+  uniform float includeMaxV;
+  // 不显示 excludeMinV ~ excludeMaxV 之内的颜色
+  uniform float excludeMinV;
+  uniform float excludeMaxV;
   // v offset
   uniform float vOffset;
   // 闪烁动画值
@@ -75,6 +81,7 @@ const R = (
   vec4 getImage() {
     vec2 uv = vUv;
     uv.y = uv.y - vOffset;
+
     // 原始贴图颜色
     vec4 image = texture2D(map, uv);
     // 如果使用颜色
@@ -93,13 +100,14 @@ const R = (
     float gradientLength = 1.0;
     if (v <= gradientLength) {
       return v / gradientLength; // 在 [0, gradientLength] 范围内，透明度为 [0, 1]
-    } else if (v <= maxU - gradientLength) {
-      return 1.0; // 在 (gradientLength, maxU - gradientLength) 范围内，透明度为 1
+    } else if (v <= maxV - gradientLength) {
+      return 1.0; // 在 (gradientLength, maxV - gradientLength) 范围内，透明度为 1
     } else {
-      return (maxU - v) / gradientLength; // 在 [maxU - gradientLength, maxU] 范围内，透明度为 [1, 0]
+      return (maxV - v) / gradientLength; // 在 [maxV - gradientLength, maxV] 范围内，透明度为 [1, 0]
     }
   }
 
+  // 获取边框颜色
   vec4 getBorder() {
     float u = vUv.x;
     if (u <= borderWidth || u >= 1.0 - borderWidth) {
@@ -108,6 +116,7 @@ const R = (
     return vec4(0.0, 0.0, 0.0, 0.0);
   }
 
+  // 获取背景色
   vec4 getBackground() {
     // border-box
     if (backgroundClip == 0) {
@@ -122,7 +131,29 @@ const R = (
     }
   }
 
+  // 根据摄像机位置计算透明度
+  float distanceOpacity() {
+    return 1.0;
+  }
+
   void main() {
+    float v = vUv.y;
+    if (includeMinV != -1.0 && includeMaxV != -1.0) {
+      if (v < includeMinV || v > includeMaxV) {
+        gl_FragColor = vec4(0.0, 0.0, 0.0, 0.0);
+        return;
+      } else {
+        // debug
+        // gl_FragColor = vec4(255.0, 255.0, 255.0, 0.6);
+        // return;
+      }
+    }
+    if (excludeMinV != -1.0 && excludeMaxV != -1.0) {
+      if (v >= excludeMinV && v <= excludeMaxV) {
+        gl_FragColor = vec4(0.0, 0.0, 0.0, 0.0);
+        return;
+      }
+    }
     vec4 image = getImage();
     vec4 border = getBorder();
     vec4 background = getBackground();
@@ -135,11 +166,12 @@ const R = (
     // 设置整体透明度
     gl_FragColor.a = gl_FragColor.a * opacity;
     gl_FragColor.a = gl_FragColor.a * linearGradientOpacity();
+    gl_FragColor.a = gl_FragColor.a * distanceOpacity();
     gl_FragColor.a = gl_FragColor.a * flicker;
   }
 `
 );
-class H {
+class Y {
   constructor(e, t) {
     i(this, "name", "");
     i(this, "startTagContainer");
@@ -148,7 +180,9 @@ class H {
     i(this, "geometryStyle", {});
     i(this, "materialStyle", {});
     i(this, "meshStyle", {});
-    i(this, "mesh");
+    i(this, "group", new h.Group());
+    i(this, "meshWithDepthTest");
+    i(this, "meshWithoutDepthTest");
     i(this, "five");
     i(this, "mode");
     i(this, "_curvePath", null);
@@ -174,15 +208,17 @@ class H {
     i(this, "plugin");
     i(this, "textureHasLoaded", !1);
     i(this, "disposed", !1);
-    i(this, "flowAnime", new E({ progress: 0 }).to({ progress: 1 }).duration(1500).repeat(1 / 0));
-    i(this, "flickerAnime", A(300).yoyo(!0).repeat(5));
+    i(this, "flowAnime", new A({ progress: 0 }).to({ progress: 1 }).duration(1500).repeat(1 / 0));
+    i(this, "flickerAnime", E(300).yoyo(!0).repeat(5));
     /** 缓存 panoGroup 中每个点距离起点的长度 */
     i(this, "cacheLengths", []);
     /** 为了让多条路线在高度上错开，每个路线都需要有个额外的 offset */
     i(this, "heightOffset", 0);
+    i(this, "panoMap", {});
+    i(this, "autoDepthTestEffectDistance");
     i(this, "dispose", () => {
       var e, t;
-      this.disposed || (this.disposed = !0, this.parent.hooks.off("show", this.updateVisible), this.parent.hooks.off("hide", this.updateVisible), this.plugin.hooks.off("show", this.updateVisible), this.plugin.hooks.off("hide", this.updateVisible), this.plugin.hooks.off("enable", this.updateVisible), this.plugin.hooks.off("disable", this.updateVisible), this.five.off("modeChange", this.onFiveModeChange), this.five.off("modelShownFloorChange", this.onFiveModelShownFloorChange), this.doHide(), (e = this.startTagContainer) == null || e.plugin.dispose(), (t = this.endTagContainer) == null || t.plugin.dispose());
+      this.disposed || (this.disposed = !0, this.parent.hooks.off("show", this.updateVisible), this.parent.hooks.off("hide", this.updateVisible), this.plugin.hooks.off("show", this.updateVisible), this.plugin.hooks.off("hide", this.updateVisible), this.plugin.hooks.off("enable", this.updateVisible), this.plugin.hooks.off("disable", this.updateVisible), this.five.off("modeChange", this.onFiveModeChange), this.five.off("panoArrived", this.onFivePanoArrived), this.five.off("modelShownFloorChange", this.onFiveModelShownFloorChange), this.doHide(), (e = this.startTagContainer) == null || e.plugin.dispose(), (t = this.endTagContainer) == null || t.plugin.dispose());
     });
     /** 开始走点动画 */
     i(this, "onWalkAnimationStart", () => {
@@ -194,7 +230,20 @@ class H {
     });
     /** 模型状态变更 */
     i(this, "onFiveModeChange", (e) => {
-      this.modeVisible = this.mode === "panorama" ? _(e) : M(e), this.updateVisible();
+      this.modeVisible = this.mode === "panorama" ? O(e) : _(e), this.updateVisible();
+    });
+    /** 走点 */
+    i(this, "onFivePanoArrived", (e) => {
+      var r, s, o;
+      const t = this.panoMap[e];
+      if (t === void 0)
+        this.group.children.includes(this.meshWithoutDepthTest) && this.group.remove(this.meshWithoutDepthTest), this.meshWithDepthTest.material.uniforms.excludeMinV.value = -1, this.meshWithDepthTest.material.uniforms.excludeMaxV.value = -1;
+      else {
+        this.group.children.includes(this.meshWithoutDepthTest) || this.group.add(this.meshWithoutDepthTest), this.meshWithoutDepthTest.visible = !0;
+        const a = this.meshWithDepthTest.geometry.getAttribute("uv"), n = 100 * ((r = this.autoDepthTestEffectDistance) != null ? r : 2), u = (s = a.getY((t - n) * 2)) != null ? s : 0, d = (o = a.getY((t + n) * 2)) != null ? o : a.getY(a.count - 1);
+        this.meshWithDepthTest.material.uniforms.excludeMinV.value = u, this.meshWithDepthTest.material.uniforms.excludeMaxV.value = d, this.meshWithoutDepthTest.material.uniforms.includeMinV.value = u, this.meshWithoutDepthTest.material.uniforms.includeMaxV.value = d;
+      }
+      this.meshWithDepthTest.material.uniformsNeedUpdate = !0, this.meshWithoutDepthTest.material.uniformsNeedUpdate = !0, this.five.needsRender = !0;
     });
     i(this, "onFiveModelShownFloorChange", (e) => {
       this.floorVisible = e === null || this.visibleFloorIndexes === null || this.visibleFloorIndexes.includes(e), this.updateVisible();
@@ -206,43 +255,47 @@ class H {
     });
     i(this, "onFlowAnimeUpdate", (e) => {
       const { progress: t } = e;
-      this.mesh.material.uniforms.vOffset.value = t, this.mesh.material.uniformsNeedUpdate = !0, this.five.needsRender = !0;
+      this.meshWithDepthTest.material.uniforms.vOffset.value = t, this.meshWithoutDepthTest.material.uniforms.vOffset.value = t, this.meshWithDepthTest.material.uniformsNeedUpdate = !0, this.meshWithoutDepthTest.material.uniformsNeedUpdate = !0, this.five.needsRender = !0;
     });
     i(this, "onFlickerAnimeUpdate", (e) => {
-      var r, o, a, h;
-      const { progress: t } = e, s = 1 - t;
-      this.mesh.material.uniforms.flicker.value = s, this.mesh.material.uniformsNeedUpdate = !0, this.five.needsRender = !0, this.startTagContainer.tag && b(this.startTagContainer.tag) && ((a = this.startTagContainer.app) == null || a.$set(p(d({}, this.startTagContainer.tag.data), {
-        opacity: s,
+      var s, o, a, n;
+      const { progress: t } = e, r = 1 - t;
+      this.meshWithDepthTest.material.uniforms.flicker.value = r, this.meshWithoutDepthTest.material.uniforms.flicker.value = r, this.meshWithDepthTest.material.uniformsNeedUpdate = !0, this.meshWithoutDepthTest.material.uniformsNeedUpdate = !0, this.five.needsRender = !0, this.startTagContainer.tag && T(this.startTagContainer.tag) && ((a = this.startTagContainer.app) == null || a.$set(c(m({}, this.startTagContainer.tag.data), {
+        opacity: r,
         name: this.name,
-        distance: Math.round((o = (r = this.curvePath) == null ? void 0 : r.getLength()) != null ? o : 0)
-      }))), this.endTagContainer.tag && b(this.endTagContainer.tag) && ((h = this.endTagContainer.app) == null || h.$set(p(d({}, this.endTagContainer.tag.data), { opacity: s })));
+        distance: Math.round((o = (s = this.curvePath) == null ? void 0 : s.getLength()) != null ? o : 0)
+      }))), this.endTagContainer.tag && T(this.endTagContainer.tag) && ((n = this.endTagContainer.app) == null || n.$set(c(m({}, this.endTagContainer.tag.data), { opacity: r })));
     });
-    i(this, "logWarning", (e) => L("GuideLineModeItem: ", e));
-    i(this, "logError", (e) => S("GuideLineModeItem: ", e));
+    i(this, "logWarning", (e) => F("GuideLineModeItem: ", e));
+    i(this, "logError", (e) => L("GuideLineModeItem: ", e));
     var o, a;
-    this.five = e, this.mode = t.mode, this.plugin = t.plugin, this.parent = t.parent, this.startTagContainer = { tag: null, plugin: new P(this.five, { containerZIndex: 1 }) }, this.endTagContainer = { tag: null, plugin: new P(this.five, { containerZIndex: 1 }) };
-    const s = new n.BufferGeometry(), r = new n.ShaderMaterial({
+    this.five = e, this.mode = t.mode, this.plugin = t.plugin, this.parent = t.parent, this.group.name = "GuideLineModeItem", this.startTagContainer = { tag: null, plugin: new k(this.five, { containerZIndex: 1 }) }, this.endTagContainer = { tag: null, plugin: new k(this.five, { containerZIndex: 1 }) };
+    const r = new h.BufferGeometry(), s = new h.ShaderMaterial({
       vertexShader: R,
-      fragmentShader: N,
+      fragmentShader: H,
       transparent: !0,
       uniforms: {
         map: { value: null },
         useMapColor: { value: 0 },
-        mapColor: { value: new n.Color() },
+        mapColor: { value: new h.Color() },
         mapOpacity: { value: 1 },
-        backgroundColor: { value: new n.Color() },
+        backgroundColor: { value: new h.Color() },
         backgroundOpacity: { value: 0 },
-        borderColor: { value: new n.Color() },
+        borderColor: { value: new h.Color() },
         borderOpacity: { value: 0 },
         backgroundClip: { value: 0 },
         borderWidth: { value: 0.05 },
         opacity: { value: 1 },
         flicker: { value: 1 },
-        maxU: { value: 0 },
-        vOffset: { value: 0 }
+        maxV: { value: 0 },
+        vOffset: { value: 0 },
+        includeMinV: { value: -1 },
+        includeMaxV: { value: -1 },
+        excludeMinV: { value: -1 },
+        excludeMaxV: { value: -1 }
       }
     });
-    this.mesh = new n.Mesh(s, r), this.mesh.name = "GuideLineModeItem", this.mode === "panorama" && (this.parent.hooks.on("walkStart", this.onWalkAnimationStart), this.parent.hooks.on("walkEnded", this.onWalkAnimationEnd)), this.updateVisible(), this.onFiveModeChange(this.five.getCurrentState().mode), this.onFiveModelShownFloorChange((a = (o = this.five.model) == null ? void 0 : o.shownFloor) != null ? a : null), this.flowAnime.onUpdate(this.onFlowAnimeUpdate), this.flickerAnime.onUpdate(this.onFlickerAnimeUpdate), this.parent.hooks.on("show", this.updateVisible), this.parent.hooks.on("hide", this.updateVisible), this.plugin.hooks.on("show", this.updateVisible), this.plugin.hooks.on("hide", this.updateVisible), this.plugin.hooks.on("enable", this.updateVisible), this.plugin.hooks.on("disable", this.updateVisible), this.plugin.hooks.on("dispose", this.dispose), this.five.on("modeChange", this.onFiveModeChange), this.five.on("modelShownFloorChange", this.onFiveModelShownFloorChange);
+    this.meshWithDepthTest = new h.Mesh(r, s), this.meshWithoutDepthTest = new h.Mesh(r, s.clone()), this.meshWithoutDepthTest.material.depthTest = !1, this.meshWithDepthTest.name = "GuideLineModeItemWithDepthTest", this.meshWithoutDepthTest.name = "GuideLineModeItemWithoutDepthTest", this.group.add(this.meshWithDepthTest), this.mode === "panorama" && (this.parent.hooks.on("walkStart", this.onWalkAnimationStart), this.parent.hooks.on("walkEnded", this.onWalkAnimationEnd), this.onFivePanoArrived(this.five.getCurrentState().panoIndex)), this.updateVisible(), this.onFiveModeChange(this.five.getCurrentState().mode), this.onFiveModelShownFloorChange((a = (o = this.five.model) == null ? void 0 : o.shownFloor) != null ? a : null), this.flowAnime.onUpdate(this.onFlowAnimeUpdate), this.flickerAnime.onUpdate(this.onFlickerAnimeUpdate), this.parent.hooks.on("show", this.updateVisible), this.parent.hooks.on("hide", this.updateVisible), this.plugin.hooks.on("show", this.updateVisible), this.plugin.hooks.on("hide", this.updateVisible), this.plugin.hooks.on("enable", this.updateVisible), this.plugin.hooks.on("disable", this.updateVisible), this.plugin.hooks.on("dispose", this.dispose), this.five.on("modeChange", this.onFiveModeChange), this.five.on("panoArrived", this.onFivePanoArrived), this.five.on("modelShownFloorChange", this.onFiveModelShownFloorChange), this.five.needsRender = !0;
   }
   get panoGroup() {
     return this._panoGroup;
@@ -289,84 +342,86 @@ class H {
       return this.logError("disposed");
     if (!this.five.work)
       return this.logError("setPathByPanoGroup: work is not ready");
-    const s = I(e);
-    if (this._panoGroup = s, (t == null ? void 0 : t.skipPanoGroup) !== void 0) {
-      const o = t.skipPanoGroup ? s.map((a) => this.plugin.workUtil.getObserverStandingPosition(a)).filter(w) : null;
+    const r = N(e);
+    if (this._panoGroup = r, (t == null ? void 0 : t.skipPanoGroup) !== void 0) {
+      const o = t.skipPanoGroup ? r.map((a) => this.plugin.workUtil.getObserverStandingPosition(a)).filter(V) : null;
       this.skippedPositions = o;
     }
-    const r = this.getPathFromPanoGroup(s, this.five.work, t);
-    this.path = r, this.setGeometryByPath(r, t);
+    const s = this.getPathFromPanoGroup(r, this.five.work, t);
+    this.path = s, this.setGeometryByPath(s, t);
   }
   /** 通过路径设置线条形状 */
   setGeometryByPath(e, t) {
-    var c, y, C;
+    var f, y, W, C;
     if (this.disposed)
       return this.logError("disposed");
-    const s = (c = t == null ? void 0 : t.scale) != null ? c : this.scale, r = (y = t == null ? void 0 : t.width) != null ? y : this.width, o = (C = t == null ? void 0 : t.unit_length) != null ? C : this.unitLength;
-    this.scale = s, this.width = r, this.unitLength = o;
-    const { geometry: a, maxU: h, curvePath: u, curvePoints: g } = O({
+    const r = (f = t == null ? void 0 : t.scale) != null ? f : this.scale, s = (y = t == null ? void 0 : t.width) != null ? y : this.width, o = (W = t == null ? void 0 : t.unit_length) != null ? W : this.unitLength;
+    this.scale = r, this.width = s, this.unitLength = o;
+    const { geometry: a, maxV: n, curvePath: u, curvePoints: d, panoMap: p, totalLength: g } = S({
       path: e,
-      width: r * s,
-      unitLength: o * s,
-      skipPositions: this.skippedPositions
+      width: s * r,
+      unitLength: o * r,
+      skipPositions: this.skippedPositions,
+      useAutoDepthTest: t.useAutoDepthTest
     });
-    this._curvePath = u, this._curvePoints = g, this.mesh.geometry = a, this.mesh.material.needsUpdate = !0, this.mesh.material.uniforms.maxU.value = h, this.five.needsRender = !0;
-    const m = e, f = d(d({}, this.geometryStyle), t);
-    this.path = m, this.geometryStyle = f;
+    this.autoDepthTestEffectDistance = (C = t.autoDepthTestEffectDistance) != null ? C : (() => {
+      const v = g / 10;
+      return v > 3 ? 3 : v < 1 ? 1 : v;
+    })(), this.panoMap = p, this._curvePath = u, this._curvePoints = d, this.meshWithDepthTest.geometry.copy(a), this.onFivePanoArrived(this.five.getCurrentState().panoIndex), this.meshWithDepthTest.material.needsUpdate = !0, this.meshWithDepthTest.material.uniforms.maxV.value = n, this.meshWithoutDepthTest.material.needsUpdate = !0, this.meshWithoutDepthTest.material.uniforms.maxV.value = n, this.five.needsRender = !0, this.path = e, this.geometryStyle = m(m({}, this.geometryStyle), t);
   }
   /** 设置线条材质 */
   setMartial(e) {
-    var s, r, o, a, h;
+    var r, s, o, a, n;
     if (this.disposed)
       return this.logError("disposed");
-    this.setDefaultVisible((s = e == null ? void 0 : e.visible) != null ? s : !1), this.setColor((r = e == null ? void 0 : e.color) != null ? r : "#ffffff"), this.setOpacity((o = e == null ? void 0 : e.opacity) != null ? o : 0.5), this.setTextureUrl((h = (a = e == null ? void 0 : e.texture) == null ? void 0 : a.url) != null ? h : "https://vr-image-4.realsee-cdn.cn/release/web/arrow1.ebe7d0ff.png"), (e == null ? void 0 : e.background_color) !== void 0 && this.setBackgroundColor(e.background_color), (e == null ? void 0 : e.background_opacity) !== void 0 && this.setBackgroundOpacity(e.background_opacity), (e == null ? void 0 : e.border_color) !== void 0 && this.setBorderColor(e.border_color), (e == null ? void 0 : e.border_opacity) !== void 0 && this.setBorderOpacity(e.border_opacity), (e == null ? void 0 : e.border_width) !== void 0 && this.setBorderWidth(e.border_width), (e == null ? void 0 : e.background_clip) !== void 0 && this.setBackgroundClip(e.background_clip);
-    const t = d(d({}, this.materialStyle), e);
+    this.setDefaultVisible((r = e == null ? void 0 : e.visible) != null ? r : !1), this.setColor((s = e == null ? void 0 : e.color) != null ? s : "#ffffff"), this.setOpacity((o = e == null ? void 0 : e.opacity) != null ? o : 0.5), this.setTextureUrl((n = (a = e == null ? void 0 : e.texture) == null ? void 0 : a.url) != null ? n : "https://vr-image-4.realsee-cdn.cn/release/web/arrow1.ebe7d0ff.png"), (e == null ? void 0 : e.background_color) !== void 0 && this.setBackgroundColor(e.background_color), (e == null ? void 0 : e.background_opacity) !== void 0 && this.setBackgroundOpacity(e.background_opacity), (e == null ? void 0 : e.border_color) !== void 0 && this.setBorderColor(e.border_color), (e == null ? void 0 : e.border_opacity) !== void 0 && this.setBorderOpacity(e.border_opacity), (e == null ? void 0 : e.border_width) !== void 0 && this.setBorderWidth(e.border_width), (e == null ? void 0 : e.background_clip) !== void 0 && this.setBackgroundClip(e.background_clip);
+    const t = m(m({}, this.materialStyle), e);
     this.materialStyle = t;
   }
   /** 设置模型状态 */
   setMeshStyle(e) {
     if (e != null && e.translate) {
-      const r = new n.Vector3(), o = new n.Vector3().fromArray(e.translate);
-      o.y += this.heightOffset, r.add(o), this.mesh.position.copy(r), s(this.startTagContainer, o), s(this.endTagContainer, o);
+      const s = new h.Vector3(), o = new h.Vector3().fromArray(e.translate);
+      o.y += this.heightOffset, s.add(o), this.group.position.copy(s), r(this.startTagContainer, o), r(this.endTagContainer, o);
     }
-    const t = d(d({}, this.meshStyle), e);
+    const t = m(m({}, this.meshStyle), e);
     this.meshStyle = t;
-    function s(r, o) {
-      if (!r.tag)
+    function r(s, o) {
+      if (!s.tag)
         return;
-      const a = new n.Vector3().fromArray(r.tag.position);
+      const a = new h.Vector3().fromArray(s.tag.position);
       a.add(o);
-      const h = a.toArray();
-      r.plugin.changeTagById(r.tag.id, { position: h });
+      const n = a.toArray();
+      s.plugin.changeTagById(s.tag.id, { position: n });
     }
   }
   /** 设置 Y 轴上的偏移量，为了让多条路线在高度上错开，每个路线都需要有个额外的 offset */
   setHeightOffset(e) {
-    const t = new n.Vector3();
-    this.meshStyle.translate && t.add(new n.Vector3().fromArray(this.meshStyle.translate)), t.setY(t.y + e), this.mesh.position.copy(t), this.heightOffset = e, this.five.needsRender = !0;
+    const t = new h.Vector3();
+    this.meshStyle.translate && t.add(new h.Vector3().fromArray(this.meshStyle.translate)), t.setY(t.y + e), this.group.position.copy(t), this.heightOffset = e, this.five.needsRender = !0;
   }
   /** 设置贴图颜色 */
   setColor(e) {
     if (this.disposed)
       return this.logError("disposed");
-    e && (this.mesh.material.uniforms.mapColor.value = new n.Color().set(e)), this.mesh.material.uniforms.useMapColor.value = e ? 1 : 0, this.mesh.material.uniformsNeedUpdate = !0, this.five.needsRender = !0;
+    e && (this.meshWithDepthTest.material.uniforms.mapColor.value = new h.Color().set(e), this.meshWithoutDepthTest.material.uniforms.mapColor.value = new h.Color().set(e)), this.meshWithDepthTest.material.uniforms.useMapColor.value = e ? 1 : 0, this.meshWithoutDepthTest.material.uniforms.useMapColor.value = e ? 1 : 0, this.meshWithDepthTest.material.uniformsNeedUpdate = !0, this.meshWithoutDepthTest.material.uniformsNeedUpdate = !0, this.five.needsRender = !0;
   }
   /** 设置边框 */
   setBorderColor(e) {
     if (this.disposed)
       return this.logError("disposed");
-    this.mesh.material.uniforms.borderColor.value = new n.Color().set(e), this.mesh.material.uniformsNeedUpdate = !0, this.five.needsRender = !0;
+    this.meshWithDepthTest.material.uniforms.borderColor.value = new h.Color().set(e), this.meshWithoutDepthTest.material.uniforms.borderColor.value = new h.Color().set(e), this.meshWithDepthTest.material.uniformsNeedUpdate = !0, this.meshWithoutDepthTest.material.uniformsNeedUpdate = !0, this.five.needsRender = !0;
   }
   /** 设置边框透明度 */
   setBorderOpacity(e) {
     if (this.disposed)
       return this.logError("disposed");
-    this.mesh.material.uniforms.borderOpacity.value = e, this.mesh.material.uniformsNeedUpdate = !0, this.five.needsRender = !0;
+    this.meshWithDepthTest.material.uniforms.borderOpacity.value = e, this.meshWithoutDepthTest.material.uniforms.borderOpacity.value = e, this.meshWithDepthTest.material.uniformsNeedUpdate = !0, this.meshWithoutDepthTest.material.uniformsNeedUpdate = !0, this.five.needsRender = !0;
   }
   setBackgroundClip(e) {
     if (this.disposed)
       return this.logError("disposed");
-    this.mesh.material.uniforms.backgroundClip.value = e === "border-box" ? 0 : 1, this.mesh.material.uniformsNeedUpdate = !0, this.five.needsRender = !0;
+    this.meshWithDepthTest.material.uniforms.backgroundClip.value = e === "border-box" ? 0 : 1, this.meshWithoutDepthTest.material.uniforms.backgroundClip.value = e === "border-box" ? 0 : 1, this.meshWithDepthTest.material.uniformsNeedUpdate = !0, this.meshWithoutDepthTest.material.uniformsNeedUpdate = !0, this.five.needsRender = !0;
   }
   /**
    * @description: 设置边框宽度
@@ -374,45 +429,45 @@ class H {
   setBorderWidth(e) {
     if (this.disposed)
       return this.logError("disposed");
-    this.mesh.material.uniforms.borderWidth.value = e, this.mesh.material.uniformsNeedUpdate = !0, this.five.needsRender = !0;
+    this.meshWithDepthTest.material.uniforms.borderWidth.value = e, this.meshWithoutDepthTest.material.uniforms.borderWidth.value = e, this.meshWithDepthTest.material.uniformsNeedUpdate = !0, this.meshWithoutDepthTest.material.uniformsNeedUpdate = !0, this.five.needsRender = !0;
   }
   /** 设置背景颜色 */
   setBackgroundColor(e) {
     if (this.disposed)
       return this.logError("disposed");
-    this.mesh.material.uniforms.backgroundColor.value = new n.Color().set(e), this.mesh.material.uniformsNeedUpdate = !0, this.five.needsRender = !0;
+    this.meshWithDepthTest.material.uniforms.backgroundColor.value = new h.Color().set(e), this.meshWithoutDepthTest.material.uniforms.backgroundColor.value = new h.Color().set(e), this.meshWithDepthTest.material.uniformsNeedUpdate = !0, this.meshWithoutDepthTest.material.uniformsNeedUpdate = !0, this.five.needsRender = !0;
   }
   /** 设置背景透明度 */
   setBackgroundOpacity(e) {
     if (this.disposed)
       return this.logError("disposed");
-    this.mesh.material.uniforms.backgroundOpacity.value = e, this.mesh.material.uniformsNeedUpdate = !0, this.five.needsRender = !0;
+    this.meshWithDepthTest.material.uniforms.backgroundOpacity.value = e, this.meshWithoutDepthTest.material.uniforms.backgroundOpacity.value = e, this.meshWithDepthTest.material.uniformsNeedUpdate = !0, this.meshWithoutDepthTest.material.uniformsNeedUpdate = !0, this.five.needsRender = !0;
   }
   /** 设置整体透明度 */
   setOpacity(e) {
     if (this.disposed)
       return this.logError("disposed");
-    this.mesh.material.uniforms.opacity.value = e, this.mesh.material.uniformsNeedUpdate = !0, this.five.needsRender = !0;
+    this.meshWithDepthTest.material.uniforms.opacity.value = e, this.meshWithoutDepthTest.material.uniforms.opacity.value = e, this.meshWithDepthTest.material.uniformsNeedUpdate = !0, this.meshWithoutDepthTest.material.uniformsNeedUpdate = !0, this.five.needsRender = !0;
   }
   /** 设置贴图透明度 */
   setMapOpacity(e) {
     if (this.disposed)
       return this.logError("disposed");
-    this.mesh.material.uniforms.mapOpacity.value = e, this.mesh.material.uniformsNeedUpdate = !0, this.five.needsRender = !0;
+    this.meshWithDepthTest.material.uniforms.mapOpacity.value = e, this.meshWithoutDepthTest.material.uniforms.mapOpacity.value = e, this.meshWithDepthTest.material.uniformsNeedUpdate = !0, this.meshWithoutDepthTest.material.uniformsNeedUpdate = !0, this.five.needsRender = !0;
   }
   /** 设置贴图 */
   setTextureUrl(e) {
     if (this.disposed)
       return this.logError("disposed");
     this.textureUrl = e, G(e).then((t) => {
-      this.disposed || this.textureUrl === e && (t.wrapT = n.RepeatWrapping, this.textureHasLoaded = !0, this.mesh.material.uniforms.map.value = t, this.mesh.material.uniformsNeedUpdate = !0, this.mesh.material.needsUpdate = !0, this.five.needsRender = !0, this.updateVisible());
+      this.disposed || this.textureUrl === e && (t.wrapT = h.RepeatWrapping, this.textureHasLoaded = !0, this.meshWithDepthTest.material.uniforms.map.value = t, this.meshWithoutDepthTest.material.uniforms.map.value = t, this.meshWithDepthTest.material.uniformsNeedUpdate = !0, this.meshWithoutDepthTest.material.uniformsNeedUpdate = !0, this.meshWithDepthTest.material.needsUpdate = !0, this.meshWithoutDepthTest.material.needsUpdate = !0, this.five.needsRender = !0, this.updateVisible());
     });
   }
   setVisibleFloorIndexes(e) {
-    var t, s;
+    var t, r;
     if (this.disposed)
       return this.logError("disposed");
-    this._visibleFloorIndexes = e, this.onFiveModelShownFloorChange((s = (t = this.five.model) == null ? void 0 : t.shownFloor) != null ? s : null);
+    this._visibleFloorIndexes = e, this.onFiveModelShownFloorChange((r = (t = this.five.model) == null ? void 0 : t.shownFloor) != null ? r : null);
   }
   setStartTag(e) {
     this.setTag("start", e);
@@ -439,66 +494,66 @@ class H {
     var u;
     if (!this.curvePoints || !this.curvePath)
       return [];
-    const e = this.curvePoints.length, t = this.curvePath.getLength(), s = e - 1, r = t / s, o = (u = this.curvePath.getLengths(s)) != null ? u : [], a = [];
-    let h = 0;
-    for (let g = 0; g < e; g++) {
-      const m = this.curvePoints[g], f = this.plugin.workUtil.getObserverStandingPosition(h);
-      if (!f)
+    const e = this.curvePoints.length, t = this.curvePath.getLength(), r = e - 1, s = t / r, o = (u = this.curvePath.getLengths(r)) != null ? u : [], a = [];
+    let n = 0;
+    for (let d = 0; d < e; d++) {
+      const p = this.curvePoints[d], g = this.plugin.workUtil.getObserverStandingPosition(n);
+      if (!g)
         break;
-      f.clone().setY(0).distanceTo(m.clone().setY(0)) < r && (a.push(o[g]), h += 1);
+      g.clone().setY(0).distanceTo(p.clone().setY(0)) < s && (a.push(o[d]), n += 1);
     }
     return a;
   }
   setTag(e, t) {
-    const s = this.curvePath, r = e === "start" ? this.startTagContainer : this.endTagContainer;
+    const r = this.curvePath, s = e === "start" ? this.startTagContainer : this.endTagContainer;
     if (!(t != null && t.data))
-      return r.plugin.clearTags();
-    const a = W({}, {
+      return s.plugin.clearTags();
+    const a = I({}, {
       contentType: "Custom",
       stickType: "2DPoint",
       config: { visibleConfig: { visibleFiveMode: ["Floorplan", "Mapview"], followModelVisibility: !1 } },
       style: { point: { enabled: !1 } },
       data: {}
     }, t);
-    r.tag = a, b(a) && (r.tag.element = (u) => {
-      var f, c;
-      (f = r.app) == null || f.$destroy();
-      const g = e === "start" ? p(d({}, a.data), { name: this.name, distance: Math.round((c = s.getLength()) != null ? c : 0), i18n: this.plugin.config.i18n }) : a.data, m = new B({ target: u, intro: !0, props: g });
-      return r.app = m, () => m.$destroy();
-    }), r.plugin.load({ tagList: [r.tag] });
-    const h = this.meshStyle.translate;
-    if (h && a.position) {
-      const u = new n.Vector3().fromArray(a.position), g = new n.Vector3().fromArray(h);
-      u.add(g), u.y += this.heightOffset;
-      const m = u.toArray();
-      r.plugin.changeTagById(r.tag.id, { position: m });
+    s.tag = a, T(a) && (s.tag.element = (u) => {
+      var g, f;
+      (g = s.app) == null || g.$destroy();
+      const d = e === "start" ? c(m({}, a.data), { name: this.name, distance: Math.round((f = r.getLength()) != null ? f : 0), i18n: this.plugin.config.i18n }) : a.data, p = new B({ target: u, intro: !0, props: d });
+      return s.app = p, () => p.$destroy();
+    }), s.plugin.load({ tagList: [s.tag] });
+    const n = this.meshStyle.translate;
+    if (n && a.position) {
+      const u = new h.Vector3().fromArray(a.position), d = new h.Vector3().fromArray(n);
+      u.add(d), u.y += this.heightOffset;
+      const p = u.toArray();
+      s.plugin.changeTagById(s.tag.id, { position: p });
     }
   }
   doShow() {
-    this.mode === "model" && this.flowAnime.play(), this.five.scene.add(this.mesh), this.startTagContainer.plugin.show(), this.endTagContainer.plugin.show(), this.five.needsRender = !0;
+    this.mode === "model" && this.flowAnime.play(), this.five.scene.add(this.group), this.startTagContainer.plugin.show(), this.endTagContainer.plugin.show(), this.five.needsRender = !0;
   }
   doHide() {
-    this.mode === "model" && this.flowAnime.stop(), this.five.scene.remove(this.mesh), this.startTagContainer.plugin.hide(), this.endTagContainer.plugin.hide(), this.five.needsRender = !0;
+    this.mode === "model" && this.flowAnime.stop(), this.five.scene.remove(this.group), this.startTagContainer.plugin.hide(), this.endTagContainer.plugin.hide(), this.five.needsRender = !0;
   }
   /** 通过 panoIndex 数组计算路径 */
-  getPathFromPanoGroup(e, t, s) {
+  getPathFromPanoGroup(e, t, r) {
     if (e.length < 2)
       return [];
-    const r = e.map((o) => {
+    const s = e.map((o) => {
       var a;
       return (a = this.plugin.workUtil.getObserverStandingPosition(o)) == null ? void 0 : a.toArray();
-    }).filter(w);
-    return [d({ type: "CatmullRomCurve3", points: r }, s)];
+    }).filter(V);
+    return [c(m({ type: "CatmullRomCurve3", points: s }, r), { panoIndexList: e })];
   }
 }
-function b(l) {
+function T(l) {
   return l.contentType === "Custom";
 }
-const ae = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const he = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  GuideLineModeItem: H
+  GuideLineModeItem: Y
 }, Symbol.toStringTag, { value: "Module" }));
 export {
-  H as GuideLineModeItem,
-  ae as GuideLineModeItem$1
+  Y as GuideLineModeItem,
+  he as GuideLineModeItem$1
 };

package/libs/GuideLinePlugin/GuideLineModeItem.d.ts

@@ -29,7 +29,9 @@ declare class GuideLineModeItem {
     geometryStyle: PluginType.GuideLineGeometryStyle;
     materialStyle: PluginType.GuideLineMaterialStyle;
     meshStyle: PluginType.GuideLineMeshStyle;
-    readonly mesh: THREE.Mesh<THREE.BufferGeometry, THREE.ShaderMaterial>;
+    readonly group: THREE.Group;
+    readonly meshWithDepthTest: THREE.Mesh<THREE.BufferGeometry, THREE.ShaderMaterial>;
+    readonly meshWithoutDepthTest: THREE.Mesh<THREE.BufferGeometry, THREE.ShaderMaterial>;
     private five;
     private mode;
     private _curvePath;
@@ -61,6 +63,8 @@ declare class GuideLineModeItem {
     private cacheLengths;
     /** 为了让多条路线在高度上错开，每个路线都需要有个额外的 offset */
     private heightOffset;
+    private panoMap;
+    private autoDepthTestEffectDistance?;
     constructor(five: Five, options: {
         mode: PluginType.GuideLineModeItemMode;
         plugin: GuideLinePlugin;
@@ -78,9 +82,14 @@ declare class GuideLineModeItem {
     /** 通过点位设置线条形状 */
     setGeometryByPanoGroup(_panoGroup: number[], options?: CatmullRomCurve3RestParams & PluginType.GuideLineGeometryStyle & {
         skipPanoGroup?: boolean;
+        useAutoDepthTest?: boolean;
+        autoDepthTestEffectDistance?: number;
     }): void;
     /** 通过路径设置线条形状 */
-    setGeometryByPath(path: PluginType.PathItem[], options?: PluginType.GuideLineGeometryStyle): void;
+    setGeometryByPath(path: PluginType.PathItem[], options?: PluginType.GuideLineGeometryStyle & {
+        useAutoDepthTest?: boolean;
+        autoDepthTestEffectDistance?: number;
+    }): void;
     /** 设置线条材质 */
     setMartial(options?: PluginType.GuideLineMaterialStyle): void;
     /** 设置模型状态 */
@@ -128,6 +137,8 @@ declare class GuideLineModeItem {
     private onWalkAnimationEnd;
     /** 模型状态变更 */
     private onFiveModeChange;
+    /** 走点 */
+    private onFivePanoArrived;
     private onFiveModelShownFloorChange;
     /** 更新可见性 */
     private updateVisible;

package/libs/GuideLinePlugin/typing.d.ts

@@ -4,7 +4,6 @@ import type * as BasePluginWithData from '../base/BasePluginWithData';
 import type { Tag } from '../PanoTagPlugin';
 export interface RouteConfig {
     arrowTextureUrl?: string;
-    skipPanoIndexMesh?: boolean;
     unitWidth?: number;
     unitHeight?: number;
 }
@@ -88,8 +87,21 @@ export type GuideLineItem = RequireAtLeastOne<{
 export interface PanoramaGuideLineStyle extends GuideLineStyle {
     start_tag?: Tag;
     end_tag?: Tag;
-    /** 是否跳过点位 */
+    /**
+     * @description 是否跳过点位
+     * @default false
+     */
     skip_group?: boolean;
+    /**
+     * @description 是否自动关闭点位附近路线的深度测试
+     * @default false
+     */
+    use_auto_depthtest?: boolean;
+    /**
+     * @description use_auto_depthtest 开启时，自动关闭深度测试的距离
+     * @default 1~3 之间
+     */
+    auto_depth_test_effect_distance?: number;
 }
 /** 模型路径样式 */
 export interface ModelGuideLineStyle extends GuideLineStyle {
@@ -165,4 +177,5 @@ export interface CatmullRomCurve3 {
     closed?: boolean;
     curve_type?: string;
     tension?: number;
+    panoIndexList?: number[];
 }