@realsee/dnalogel 2.16.0-2 → 2.16.0-4

package/libs/GuideLinePlugin/GuideLineModeItem/index.js

@@ -1,19 +1,19 @@
-var f = Object.defineProperty;
-var p = Object.getOwnPropertySymbols;
-var v = Object.prototype.hasOwnProperty, c = Object.prototype.propertyIsEnumerable;
-var n = (r, e, i) => e in r ? f(r, e, { enumerable: !0, configurable: !0, writable: !0, value: i }) : r[e] = i, g = (r, e) => {
+var c = Object.defineProperty;
+var g = Object.getOwnPropertySymbols;
+var v = Object.prototype.hasOwnProperty, C = Object.prototype.propertyIsEnumerable;
+var n = (r, e, i) => e in r ? c(r, e, { enumerable: !0, configurable: !0, writable: !0, value: i }) : r[e] = i, f = (r, e) => {
   for (var i in e || (e = {}))
     v.call(e, i) && n(r, i, e[i]);
-  if (p)
-    for (var i of p(e))
-      c.call(e, i) && n(r, i, e[i]);
+  if (g)
+    for (var i of g(e))
+      C.call(e, i) && n(r, i, e[i]);
   return r;
 };
 var t = (r, e, i) => (n(r, typeof e != "symbol" ? e + "" : e, i), i);
-import * as o from "three";
-import { logWarning as C, logError as b } from "../../shared-utils/log.js";
-import { createLineGeometry as y } from "../utils/createLineGeometry.js";
-import { isPanoramaLike as E, isModelLike as F } from "../../shared-utils/five/mode.js";
+import * as u from "three";
+import { logWarning as b, logError as E } from "../../shared-utils/log.js";
+import { createLineGeometry as F } from "../utils/createLineGeometry.js";
+import { isPanoramaLike as y, isModelLike as k } from "../../shared-utils/five/mode.js";
 import "hammerjs";
 import "@realsee/five";
 import "@tweenjs/tween.js";
@@ -21,7 +21,7 @@ import "../../CSS3DRenderPlugin/utils/three/CSS3DRender.js";
 import "../../CSS3DRenderPlugin/utils/generateBehindFiveElement.js";
 import "../../shared-utils/animationFrame/BetterTween.js";
 import { loadTexture as P } from "../../shared-utils/three/loadTexture.js";
-const k = `
+const U = `
   varying vec2 vUv;
 
   void main() {
@@ -43,6 +43,8 @@ const k = `
   uniform float backgroundOpacity;
   // \u6574\u4F53\u900F\u660E\u5EA6
   uniform float opacity;
+  // \u6700\u5927 U \u503C
+  uniform float maxU;
   // \u7EB9\u7406\u5750\u6807
   varying vec2 vUv;
 
@@ -59,6 +61,20 @@ const k = `
     return image;
   }
 
+  // \u83B7\u53D6\u7EBF\u6027\u6E10\u53D8\u7684\u900F\u660E\u5EA6
+  float linearGradientOpacity() {
+    // \u5F53\u524D\u7684 u \u503C
+    float u = vUv.y;
+    float gradientLength = 1.0;
+    if (u <= gradientLength) {
+      return u / gradientLength; // \u5728 [0, gradientLength] \u8303\u56F4\u5185\uFF0C\u900F\u660E\u5EA6\u4E3A [0, 1]
+    } else if (u <= maxU - gradientLength) {
+      return 1.0; // \u5728 (gradientLength, maxU - gradientLength) \u8303\u56F4\u5185\uFF0C\u900F\u660E\u5EA6\u4E3A 1
+    } else {
+      return (maxU - u) / gradientLength; // \u5728 [maxU - gradientLength, maxU] \u8303\u56F4\u5185\uFF0C\u900F\u660E\u5EA6\u4E3A [1, 0]
+    }
+  }
+
   void main() {
     vec4 image = getTextureColor();
     // \u8BBE\u7F6E\u80CC\u666F\u989C\u8272
@@ -67,9 +83,10 @@ const k = `
     gl_FragColor = mix(gl_FragColor, image, image.a);
     // \u8BBE\u7F6E\u6574\u4F53\u900F\u660E\u5EA6
     gl_FragColor.a = gl_FragColor.a * opacity;
+    gl_FragColor.a = gl_FragColor.a * linearGradientOpacity();
   }
 `;
-class M {
+class x {
   constructor(e, i) {
     t(this, "mesh");
     t(this, "five");
@@ -99,26 +116,27 @@ class M {
       this.updateVisible();
     });
     t(this, "onFiveModeChange", (e) => {
-      this.modeVisible = this.mode === "panorama" ? E(e) : F(e), this.updateVisible();
+      this.modeVisible = this.mode === "panorama" ? y(e) : k(e), this.updateVisible();
     });
-    t(this, "logWarning", (e) => C("GuideLineModeItem: ", e));
-    t(this, "logError", (e) => b("GuideLineModeItem: ", e));
+    t(this, "logWarning", (e) => b("GuideLineModeItem: ", e));
+    t(this, "logError", (e) => E("GuideLineModeItem: ", e));
     this.five = e, this.mode = i.mode, this.plugin = i.plugin;
-    const s = new o.BufferGeometry(), u = new o.ShaderMaterial({
-      vertexShader: k,
+    const s = new u.BufferGeometry(), o = new u.ShaderMaterial({
+      vertexShader: U,
       fragmentShader: w,
       transparent: !0,
       uniforms: {
         map: { value: null },
         useMapColor: { value: 0 },
-        mapColor: { value: new o.Color() },
+        mapColor: { value: new u.Color() },
         mapOpacity: { value: 1 },
-        backgroundColor: { value: new o.Color() },
+        backgroundColor: { value: new u.Color() },
         backgroundOpacity: { value: 0 },
-        opacity: { value: 1 }
+        opacity: { value: 1 },
+        maxU: { value: 0 }
       }
     });
-    this.mesh = new o.Mesh(s, u), this.mesh.name = "GuideLineModeItem", this.plugin.hooks.on("show", this.onPluginShow), this.plugin.hooks.on("hide", this.onPluginHide), this.plugin.hooks.on("enable", this.onPluginEnable), this.plugin.hooks.on("disable", this.onPluginDisable), this.five.on("modeChange", this.onFiveModeChange), this.onFiveModeChange(this.five.getCurrentState().mode);
+    this.mesh = new u.Mesh(s, o), this.mesh.name = "GuideLineModeItem", this.plugin.hooks.on("show", this.onPluginShow), this.plugin.hooks.on("hide", this.onPluginHide), this.plugin.hooks.on("enable", this.onPluginEnable), this.plugin.hooks.on("disable", this.onPluginDisable), this.five.on("modeChange", this.onFiveModeChange), this.onFiveModeChange(this.five.getCurrentState().mode);
   }
   setCustomVisible(e) {
     if (this.disposed)
@@ -155,10 +173,15 @@ class M {
     var d, l, m;
     if (this.disposed)
       return this.logError("disposed");
-    const s = (d = i == null ? void 0 : i.scale) != null ? d : this.scale, u = (l = i == null ? void 0 : i.width) != null ? l : i.width, h = (m = i == null ? void 0 : i.unit_length) != null ? m : i.unit_length;
-    this.path = e, this.scale = s, this.width = u, this.unitLength = h;
-    const a = y({ path: e, width: u * s, unitLength: h * s });
-    this.mesh.geometry = a;
+    const s = (d = i == null ? void 0 : i.scale) != null ? d : this.scale, o = (l = i == null ? void 0 : i.width) != null ? l : this.width, h = (m = i == null ? void 0 : i.unit_length) != null ? m : this.unitLength;
+    this.path = e, this.scale = s, this.width = o, this.unitLength = h;
+    const { geometry: a, maxU: p } = F({
+      path: e,
+      width: o * s,
+      unitLength: h * s,
+      skipPositions: this.skippedPositions
+    });
+    this.mesh.geometry = a, this.mesh.material.needsUpdate = !0, this.mesh.material.uniforms.maxU.value = p, this.five.needsRender = !0;
   }
   setSkippedPanoGroup(e) {
     if (this.disposed)
@@ -172,17 +195,17 @@ class M {
     var i;
     if (this.disposed)
       return this.logError("disposed");
-    e != null && e.color && this.setColor(e.color), e != null && e.opacity && this.setOpacity(e.opacity), (i = e == null ? void 0 : e.texture) != null && i.url && this.setTextureUrl(e.texture.url);
+    e != null && e.color && this.setColor(e.color), e != null && e.opacity && this.setOpacity(e.opacity), (i = e == null ? void 0 : e.texture) != null && i.url && this.setTextureUrl(e.texture.url), e != null && e.background_color && this.setBackgroundColor(e.background_color), e != null && e.background_opacity && this.setBackgroundOpacity(e.background_opacity);
   }
   setColor(e) {
     if (this.disposed)
       return this.logError("disposed");
-    this.mesh.material.uniforms.useMapColor.value = e ? 1 : 0, this.mesh.material.uniforms.mapColor.value = new o.Color().setRGB(e[0], e[1], e[2]), this.mesh.material.uniformsNeedUpdate = !0, this.five.needsRender = !0;
+    this.mesh.material.uniforms.useMapColor.value = e ? 1 : 0, this.mesh.material.uniforms.mapColor.value = new u.Color().setRGB(e[0], e[1], e[2]), this.mesh.material.uniformsNeedUpdate = !0, this.five.needsRender = !0;
   }
   setBackgroundColor(e) {
     if (this.disposed)
       return this.logError("disposed");
-    this.mesh.material.uniforms.backgroundColor.value = new o.Color().setRGB(e[0], e[1], e[2]), this.mesh.material.uniformsNeedUpdate = !0, this.five.needsRender = !0;
+    this.mesh.material.uniforms.backgroundColor.value = new u.Color().setRGB(e[0], e[1], e[2]), this.mesh.material.uniformsNeedUpdate = !0, this.five.needsRender = !0;
   }
   setOpacity(e) {
     if (this.disposed)
@@ -203,7 +226,7 @@ class M {
     if (this.disposed)
       return this.logError("disposed");
     this.textureUrl = e, P(e).then((i) => {
-      this.disposed || this.textureUrl === e && (i.wrapT = o.RepeatWrapping, this.textureHasLoaded = !0, this.mesh.material.uniforms.map.value = i, this.mesh.material.uniformsNeedUpdate = !0, this.mesh.material.needsUpdate = !0, this.five.needsRender = !0, this.updateVisible());
+      this.disposed || this.textureUrl === e && (i.wrapT = u.RepeatWrapping, this.textureHasLoaded = !0, this.mesh.material.uniforms.map.value = i, this.mesh.material.uniformsNeedUpdate = !0, this.mesh.material.needsUpdate = !0, this.five.needsRender = !0, this.updateVisible());
     });
   }
   updateVisible() {
@@ -218,14 +241,14 @@ class M {
   }
   getPathFromPanoGroup(e, i, s) {
     const h = e.map((a) => i.observers[a]).map((a) => a.standingPosition.toArray());
-    return [g({ type: "CatmullRomCurve3", points: h }, s)];
+    return [f({ type: "CatmullRomCurve3", points: h }, s)];
   }
 }
 const H = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  GuideLineModeItem: M
+  GuideLineModeItem: x
 }, Symbol.toStringTag, { value: "Module" }));
 export {
-  M as GuideLineModeItem,
+  x as GuideLineModeItem,
   H as GuideLineModeItem$1
 };

package/libs/GuideLinePlugin/typing.d.ts

@@ -85,6 +85,10 @@ export interface GuideLineMaterialStyle {
     visible?: boolean;
     /** rgb 颜色 [r, g, b] */
     color?: number[];
+    /** 背景颜色 */
+    background_color?: number[];
+    /** 背景透明度 */
+    background_opacity?: number;
     /** 透明度 */
     opacity?: number;
     /** 贴图 */

package/libs/GuideLinePlugin/utils/createLineGeometry.d.ts

@@ -8,6 +8,7 @@ interface LineGeometryOption {
     width: number;
     /** 每一段的长度，默认是 0.5 */
     unitLength: number;
+    skipPositions?: THREE.Vector3[];
 }
 /** 创建路线的几何体
  * @param curvePoints 三维点位
@@ -15,5 +16,8 @@ interface LineGeometryOption {
  * @param unitLength 每一段的长度
  * @returns THREE BufferGeometry
  */
-export declare function createLineGeometry(options: LineGeometryOption): THREE.BufferGeometry;
+export declare function createLineGeometry(options: LineGeometryOption): {
+    geometry: THREE.BufferGeometry;
+    maxU: number;
+};
 export {};

package/libs/GuideLinePlugin/utils/createLineGeometry.js

@@ -1,35 +1,40 @@
-import * as c from "three";
-import { Vector3 as b } from "three";
-import U from "polyline-normals";
-const F = 2, V = 3, z = 3, G = 2;
-function D(e) {
-  const u = e.width, g = e.unitLength / u, s = u / 2, y = e.path, m = new c.CurvePath();
-  y.forEach((t) => {
-    const a = M(t);
-    a && m.add(a);
+import * as n from "three";
+import { Vector3 as y } from "three";
+import z from "polyline-normals";
+const G = 2, M = 3, X = 3, k = 2;
+function Y(e) {
+  const i = e.width, g = e.unitLength / i, c = i / 2, P = e.path, f = new n.CurvePath();
+  P.forEach((t) => {
+    const a = I(t);
+    a && f.add(a);
   });
-  const d = Math.ceil(m.getLength() * 100), n = m.getPoints(d), L = n.length, P = U(n.map((t) => [t.x, t.z])), x = (n.length - 1) * F * V, E = 2 * L, C = E * z, B = E * G, o = new Uint32Array(x), r = new Float32Array(C), i = new Float32Array(B);
-  let N = 0;
-  for (let t = 0; t < n.length; t++) {
-    const [a, R] = P[t][0], T = n[t], { x: p, y: w, z: A } = T, v = new b(p + a * s, w + 0.05, A + R * s);
-    r[t * 6 + 0] = v.x, r[t * 6 + 1] = v.y, r[t * 6 + 2] = v.z;
-    const h = new b(p - a * s, w + 0.05, A - R * s);
-    r[t * 6 + 3] = h.x, r[t * 6 + 4] = h.y, r[t * 6 + 5] = h.z, N += t > 0 ? n[t - 1].clone().sub(n[t]).length() : 0;
-    const _ = N / u / g;
-    i[t * 4 + 0] = 0, i[t * 4 + 1] = _, i[t * 4 + 2] = 1, i[t * 4 + 3] = _, t !== n.length - 1 && (o[t * 6 + 0] = t * 2 + 0, o[t * 6 + 1] = t * 2 + 2, o[t * 6 + 2] = t * 2 + 1, o[t * 6 + 3] = t * 2 + 2, o[t * 6 + 4] = t * 2 + 3, o[t * 6 + 5] = t * 2 + 1);
+  const x = Math.ceil(f.getLength() * 100), o = f.getPoints(x), p = o.length, L = z(o.map((t) => [t.x, t.z])), C = (p - 1) * G * M, d = 2 * p, B = d * X, T = d * k, r = new Uint32Array(C), s = new Float32Array(B), u = new Float32Array(T);
+  let w = 0, N = 0;
+  for (let t = 0; t < o.length; t++) {
+    const [a, R] = L[t][0], U = o[t], { x: A, y: _, z: b } = U, m = new y(A + a * c, _ + 0.05, b + R * c);
+    s[t * 6 + 0] = m.x, s[t * 6 + 1] = m.y, s[t * 6 + 2] = m.z;
+    const v = new y(A - a * c, _ + 0.05, b - R * c);
+    s[t * 6 + 3] = v.x, s[t * 6 + 4] = v.y, s[t * 6 + 5] = v.z, w += t > 0 ? o[t - 1].clone().sub(o[t]).length() : 0;
+    const h = w / i / g;
+    if (N = h, u[t * 4 + 0] = 0, u[t * 4 + 1] = h, u[t * 4 + 2] = 1, u[t * 4 + 3] = h, e.skipPositions) {
+      const V = new n.Vector3().lerpVectors(m, v, 0.5);
+      if (e.skipPositions.some((F) => F.distanceTo(V) < 0.26))
+        continue;
+    }
+    t !== o.length - 1 && (r[t * 6 + 0] = t * 2 + 0, r[t * 6 + 1] = t * 2 + 2, r[t * 6 + 2] = t * 2 + 1, r[t * 6 + 3] = t * 2 + 2, r[t * 6 + 4] = t * 2 + 3, r[t * 6 + 5] = t * 2 + 1);
   }
-  const l = new c.BufferGeometry();
-  return l.setAttribute("position", new c.BufferAttribute(r, 3)), l.setAttribute("uv", new c.BufferAttribute(i, 2)), l.setIndex(new c.BufferAttribute(o, 1)), l;
+  const l = new n.BufferGeometry();
+  return l.setAttribute("position", new n.BufferAttribute(s, 3)), l.setAttribute("uv", new n.BufferAttribute(u, 2)), l.setIndex(new n.BufferAttribute(r, 1)), { geometry: l, maxU: N };
 }
-function M(e) {
-  if (X(e)) {
-    const u = [e.closed, e.curve_type, e.tension], f = e.points.map((s) => new c.Vector3().fromArray(s));
-    return new c.CatmullRomCurve3(f, ...u);
+function I(e) {
+  if (O(e)) {
+    const i = [e.closed, e.curve_type, e.tension], E = e.points.map((c) => new n.Vector3().fromArray(c));
+    return new n.CatmullRomCurve3(E, ...i);
   }
 }
-function X(e) {
+function O(e) {
   return e.type === "CatmullRomCurve3";
 }
 export {
-  D as createLineGeometry
+  Y as createLineGeometry
 };

package/libs/base/BasePlugin.js

@@ -12,7 +12,7 @@ import { isAbsoluteURL as a } from "../shared-utils/isAbsoluteURL.js";
 import "../shared-utils/animationFrame/BetterTween.js";
 class R {
   constructor(t, r) {
-    s(this, "VERSION", "2.16.0-2");
+    s(this, "VERSION", "2.16.0-4");
     s(this, "five");
     s(this, "hooks", new m());
     s(this, "staticPrefix", "//vrlab-static.ljcdn.com");

package/libs/index.js

@@ -353,7 +353,7 @@ import "./shared-utils/three/PointHelper.js";
 import "./shared-utils/three/Assets/index.js";
 import "./shared-utils/three/PointDomHelper.js";
 import "./shared-utils/three/FivePointSelector.js";
-console.info("@realsee/dnalogel %cv2.16.0-2", "background-color: #12ce9b;color:black;padding:0 6px;border-radius: 3px");
+console.info("@realsee/dnalogel %cv2.16.0-4", "background-color: #12ce9b;color:black;padding:0 6px;border-radius: 3px");
 export {
   Xp as CSS3DRender,
   jm as CSS3DRenderPlugin,

package/package.json

@@ -7,7 +7,7 @@
   "repository": "https://github.com/realsee-developer/dnalogel.git",
   "description": "如视 VR 看房插件合集",
   "private": false,
-  "version": "2.16.0-2",
+  "version": "2.16.0-4",
   "license": "SEE LICENSE IN TERMS.txt",
   "scripts": {
     "clean": "rm -rf components dist docs libs types ./vite.config.js.timestamp*",