@realsee/dnalogel 3.43.0 → 3.44.0

package/{dist/shared-utils/three/PointSelector.d.ts → libs/shared-utils/three/PointSelector/index.d.ts}

@@ -1,15 +1,27 @@
-import type { Five } from '@realsee/five';
-import { PointSelectorHelper, type PointIntersection } from './PointSelectorHelper';
+import type { Five, Mode as FiveMode } from '@realsee/five';
+import { PointSelectorHelper, type PointIntersection, type PointSelectorHelperConfig } from './utils/PointSelectorHelper';
 import type { Vector3 } from 'three';
-import { Subscribe } from '../Subscribe';
+import { Subscribe } from '../../Subscribe';
+export type { PointIntersection };
 interface Config {
     /**
      * @description: 选点的两种模式, 'fixed' 为固定选点为屏幕中心点，拖动five画布来更新点，'cursor' 为跟随鼠标移动来更新点, 'auto' 则根据设备类型自动选择
      * @default: 'auto'
      */
     mode: 'fixed' | 'cursor' | 'auto';
-    pointSelectorHelperParams: ConstructorParameters<typeof PointSelectorHelper>[1];
+    /**
+     * @description 当鼠标位置没有模型时，是否生成一个虚拟点
+     * ```markdown
+     * true: 生成虚拟点
+     * false: 不生成虚拟点
+     * FiveMode[]: 指定的five mode下才生成虚拟点，推荐 ['Panorama']
+     * ```
+     * @default: true
+     */
+    virtualPoint: boolean | FiveMode[];
+    helper: PointSelectorHelperConfig;
 }
+export type PointSelectorConfig = Partial<Config>;
 type EventMap = {
     /**
      * @description: 与模型交点更新时触发，移出监听范围时为null
@@ -57,12 +69,17 @@ export declare class PointSelector extends Subscribe<EventMap> {
     private adherePointsRadius;
     private lastFiveHelperVisible?;
     private mousePosition;
+    private config;
     private get mouseNdcPosition();
-    constructor(five: Five, config?: Partial<Config>);
+    private get virtualPoint();
+    constructor(five: Five, config?: PointSelectorConfig);
     enable(): void;
     disable(): void;
     dispose(): void;
-    setAdherePoints(points: Vector3[] | ((intersection: PointIntersection) => Vector3[]) | null, radius?: number): void;
+    setAdherePoints(points: Vector3[] | ((params: {
+        intersection: PointIntersection;
+        pointSelectorInstance: PointSelector;
+    }) => Vector3[]) | null, radius?: number): void;
     /**
      * @description: 主动触发一次选点
      * @return: select 是否成功
@@ -104,4 +121,3 @@ export declare class PointSelector extends Subscribe<EventMap> {
     private renderScreenCenter;
     private emitIntersectionUpdate;
 }
-export {};

package/libs/shared-utils/three/{PointSelector.js → PointSelector/index.js}

@@ -1,25 +1,25 @@
-var v = Object.defineProperty, S = Object.defineProperties;
-var H = Object.getOwnPropertyDescriptors;
-var c = Object.getOwnPropertySymbols;
-var b = Object.prototype.hasOwnProperty, w = Object.prototype.propertyIsEnumerable;
-var f = (o, s, e) => s in o ? v(o, s, { enumerable: !0, configurable: !0, writable: !0, value: e }) : o[s] = e, d = (o, s) => {
+var P = Object.defineProperty, E = Object.defineProperties;
+var S = Object.getOwnPropertyDescriptors;
+var p = Object.getOwnPropertySymbols;
+var w = Object.prototype.hasOwnProperty, C = Object.prototype.propertyIsEnumerable;
+var f = (n, s, e) => s in n ? P(n, s, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[s] = e, l = (n, s) => {
   for (var e in s || (s = {}))
-    b.call(s, e) && f(o, e, s[e]);
-  if (c)
-    for (var e of c(s))
-      w.call(s, e) && f(o, e, s[e]);
-  return o;
-}, u = (o, s) => S(o, H(s));
-var i = (o, s, e) => (f(o, typeof s != "symbol" ? s + "" : s, e), e);
-import { PointSelectorHelper as E } from "./PointSelectorHelper.js";
-import { isTouchDevice as y } from "../isTouchDevice.js";
-import N from "hammerjs";
-import { Subscribe as F } from "../Subscribe.js";
-import { getIntersectByNdcPosition as p } from "../five/getPosition.js";
-const a = () => !1;
-class U extends F {
+    w.call(s, e) && f(n, e, s[e]);
+  if (p)
+    for (var e of p(s))
+      C.call(s, e) && f(n, e, s[e]);
+  return n;
+}, c = (n, s) => E(n, S(s));
+var i = (n, s, e) => (f(n, typeof s != "symbol" ? s + "" : s, e), e);
+import { PointSelectorHelper as b } from "./utils/PointSelectorHelper.js";
+import { isTouchDevice as y } from "../../isTouchDevice.js";
+import H from "hammerjs";
+import { Subscribe as F } from "../../Subscribe.js";
+import { getIntersectByNdcPosition as d } from "../../five/getPosition.js";
+const h = () => !1;
+class B extends F {
   constructor(e, t) {
-    var r, l;
+    var a, u;
     super();
     /**
      * @description: 不在 five canvas 上时为 true
@@ -40,6 +40,7 @@ class U extends F {
     i(this, "adherePointsRadius", 0.1);
     i(this, "lastFiveHelperVisible");
     i(this, "mousePosition");
+    i(this, "config");
     /**
      * @description: 主动触发一次选点
      * @return: select 是否成功
@@ -67,7 +68,7 @@ class U extends F {
         clientY: e.center.y
       }), !this.mouseNdcPosition)
         return;
-      const t = p(this.five, this.mouseNdcPosition);
+      const t = d(this.five, this.mouseNdcPosition, { virtualPoint: this.virtualPoint });
       t != null && t.face && this.select(t);
     });
     /**
@@ -80,7 +81,7 @@ class U extends F {
         clientY: e.center.y
       }), !this.mouseNdcPosition))
         return;
-      const t = p(this.five, this.mouseNdcPosition);
+      const t = d(this.five, this.mouseNdcPosition, { virtualPoint: this.virtualPoint });
       t != null && t.face && this.updatePointSelectorHelperIntersect(t);
     });
     /**
@@ -92,7 +93,7 @@ class U extends F {
         clientY: e.center.y
       }), !this.mouseNdcPosition)
         return;
-      const t = p(this.five, this.mouseNdcPosition);
+      const t = d(this.five, this.mouseNdcPosition, { virtualPoint: this.virtualPoint });
       t != null && t.face && (this.pressDown = !0, this.updatePointSelectorHelperIntersect(t));
     });
     /**
@@ -108,34 +109,37 @@ class U extends F {
      * @description: 根据鼠标位置更新helper位置
      */
     i(this, "updateByNdcPosition", (e) => {
-      const t = p(this.five, e);
+      const t = d(this.five, e, { virtualPoint: this.virtualPoint });
       this.updatePointSelectorHelperIntersect(t);
     });
     /**
      * @description: 更新 pointSelectorHelper 的焦点位置
      */
     i(this, "updatePointSelectorHelperIntersect", (e) => {
-      var h;
-      this.pointSelectorHelper.show();
-      const t = d({}, e);
-      let n = !1;
-      if (((h = this.adherePoints) == null ? void 0 : h.length) > 0 && typeof this.adherePointsRadius == "number") {
-        for (const r of this.adherePoints(e))
+      if (!e) {
+        this.onLeave(), this.five.getElement().style.cursor = `url("data:image/svg+xml,%3Csvg width='12px' height='12px' viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cpath d='M6,12 C9.3137085,12 12,9.3137085 12,6 C12,2.6862915 9.3137085,0 6,0 C2.6862915,0 0,2.6862915 0,6 C0,9.3137085 2.6862915,12 6,12 Z' fill='%23FF5959'%3E%3C/path%3E%3Cg transform='translate(2, 2)' stroke='%23FFFFFF'%3E%3Ccircle cx='4' cy='4' r='4'%3E%3C/circle%3E%3Cline x1='1.07141075' y1='1.23997894' x2='6.64700843' y2='6.81557662'%3E%3C/line%3E%3C/g%3E%3C/g%3E%3C/svg%3E"), auto`;
+        return;
+      }
+      this.onEnter(), this.five.getElement().style.cursor = "";
+      const t = l({}, e);
+      let o = !1;
+      if (typeof this.adherePoints == "function" && typeof this.adherePointsRadius == "number") {
+        for (const r of this.adherePoints({ intersection: e, pointSelectorInstance: this }))
           if (r.distanceTo(e.point) < this.adherePointsRadius) {
-            t.point = r.clone(), n = !0;
+            t.point = r.clone(), o = !0;
             break;
           }
       }
-      this.pointSelectorHelper.updateWithIntersect(t, { emitEvent: !1 }), this.emit("intersectionUpdate", t, n);
+      this.pointSelectorHelper.updateWithIntersect(t, { emitEvent: !1 }), this.emit("intersectionUpdate", t, o);
     });
     i(this, "mousePositionToNdcPosition", (e) => {
       const t = this.five.getElement();
       if (!t)
         return null;
-      const { top: n, left: h, width: r, height: l } = t.getBoundingClientRect(), { clientX: m, clientY: P } = e;
+      const { top: o, left: r, width: a, height: u } = t.getBoundingClientRect(), { clientX: m, clientY: v } = e;
       return {
-        x: (m - h) / r,
-        y: 1 - (P - n) / l
+        x: (m - r) / a,
+        y: 1 - (v - o) / u
       };
     });
     i(this, "onFiveWantsPanGesture", () => {
@@ -148,15 +152,15 @@ class U extends F {
     i(this, "emitIntersectionUpdate", (e) => {
       this.emit("intersectionUpdate", e);
     });
-    this.five = e;
-    const n = (r = t == null ? void 0 : t.mode) != null ? r : "auto";
-    n === "auto" ? this.mode = y ? "fixed" : "cursor" : this.mode = n;
-    const h = {
+    this.five = e, this.config = t != null ? t : {};
+    const o = (a = t == null ? void 0 : t.mode) != null ? a : "auto";
+    o === "auto" ? this.mode = y ? "fixed" : "cursor" : this.mode = o;
+    const r = {
       autoFixPCPosition: this.mode === "cursor",
       initialPosition: this.mode === "fixed" ? { left: "35%", top: "20%" } : void 0
     };
-    this.pointSelectorHelper = new E(e, u(d({}, t == null ? void 0 : t.pointSelectorHelperParams), {
-      magnifierParams: d(d({}, h), (l = t == null ? void 0 : t.pointSelectorHelperParams) == null ? void 0 : l.magnifierParams)
+    this.pointSelectorHelper = new b(e, c(l({}, t == null ? void 0 : t.helper), {
+      magnifierParams: l(l({}, r), (u = t == null ? void 0 : t.helper) == null ? void 0 : u.magnifierParams)
     })), this.pointSelectorHelper.hide();
   }
   get position() {
@@ -165,6 +169,11 @@ class U extends F {
   get mouseNdcPosition() {
     return this.mousePosition ? this.mousePositionToNdcPosition(this.mousePosition) : null;
   }
+  get virtualPoint() {
+    var t;
+    const e = (t = this.config.virtualPoint) != null ? t : !0;
+    return typeof e == "boolean" ? e : Array.isArray(e) ? e.includes(this.five.state.mode) : !0;
+  }
   enable() {
     if (this.enabled)
       return;
@@ -172,14 +181,14 @@ class U extends F {
     const e = this.five.getElement();
     if (!e)
       throw new Error("five element not found");
-    this.hammer || (this.hammer = new N(e)), this.mode === "cursor" ? (this.five.on("wantsPanGesture", this.onFiveWantsPanGesture), this.five.on("wantsMoveToPano", a), this.five.on("wantsChangeMode", a), this.five.on("wantsTapGesture", a), e.addEventListener("mousemove", this.updateByMousePosition), e.addEventListener("mouseenter", this.onEnter), e.addEventListener("mouseout", this.onLeave), this.hammer.on("tap", this.onTap), this.hammer.on("pan", this.onPan), this.hammer.on("press", this.onPress), this.hammer.on("panend", this.onPanEnd)) : this.mode === "fixed" && (this.five.on("panoArrived", this.renderScreenCenter), this.five.on("panGesture", this.renderScreenCenter), this.five.on("interiaPan", this.renderScreenCenter), this.renderScreenCenter(), this.pointSelectorHelper.show()), this.pointSelectorHelper.hooks.on("intersectionUpdate", this.emitIntersectionUpdate), this.lastFiveHelperVisible = this.five.helperVisible, this.five.helperVisible = !1, this.emit("enable");
+    this.hammer || (this.hammer = new H(e)), this.mode === "cursor" ? (this.five.on("wantsPanGesture", this.onFiveWantsPanGesture), this.five.on("wantsMoveToPano", h), this.five.on("wantsChangeMode", h), this.five.on("wantsTapGesture", h), e.addEventListener("mousemove", this.updateByMousePosition), e.addEventListener("wheel", this.updateByMousePosition), e.addEventListener("mouseenter", this.onEnter), e.addEventListener("mouseout", this.onLeave), this.hammer.on("tap", this.onTap), this.hammer.on("pan", this.onPan), this.hammer.on("press", this.onPress), this.hammer.on("panend", this.onPanEnd)) : this.mode === "fixed" && (this.five.on("panoArrived", this.renderScreenCenter), this.five.on("panGesture", this.renderScreenCenter), this.five.on("interiaPan", this.renderScreenCenter), this.renderScreenCenter(), this.pointSelectorHelper.show()), this.pointSelectorHelper.hooks.on("intersectionUpdate", this.emitIntersectionUpdate), this.lastFiveHelperVisible = this.five.helperVisible, this.five.helperVisible = !1, this.emit("enable");
   }
   disable() {
     if (!this.enabled)
       return;
-    this.enabled = !1, this.pointSelectorHelper.disable();
+    this.enabled = !1, this.pointSelectorHelper.disable(), this.five.getElement().style.cursor = "";
     const e = this.five.getElement();
-    this.five.off("wantsPanGesture", this.onFiveWantsPanGesture), this.five.off("wantsMoveToPano", a), this.five.off("wantsChangeMode", a), this.five.off("wantsTapGesture", a), this.five.helperVisible = this.lastFiveHelperVisible, e == null || e.removeEventListener("mousemove", this.updateByMousePosition), e == null || e.removeEventListener("mouseenter", this.onEnter), e == null || e.removeEventListener("mouseout", this.onLeave), this.hammer.off("tap", this.onTap), this.hammer.off("pan", this.onPan), this.hammer.off("press", this.onPress), this.hammer.off("panend", this.onPanEnd), this.five.off("panoArrived", this.renderScreenCenter), this.five.off("panGesture", this.renderScreenCenter), this.five.off("interiaPan", this.renderScreenCenter), this.pointSelectorHelper.hooks.off("intersectionUpdate", this.emitIntersectionUpdate), this.emit("disable");
+    this.five.off("wantsPanGesture", this.onFiveWantsPanGesture), this.five.off("wantsMoveToPano", h), this.five.off("wantsChangeMode", h), this.five.off("wantsTapGesture", h), this.five.helperVisible = this.lastFiveHelperVisible, e == null || e.removeEventListener("mousemove", this.updateByMousePosition), e == null || e.removeEventListener("mouseenter", this.onEnter), e == null || e.removeEventListener("mouseout", this.onLeave), this.hammer.off("tap", this.onTap), this.hammer.off("pan", this.onPan), this.hammer.off("press", this.onPress), this.hammer.off("panend", this.onPanEnd), this.five.off("panoArrived", this.renderScreenCenter), this.five.off("panGesture", this.renderScreenCenter), this.five.off("interiaPan", this.renderScreenCenter), this.pointSelectorHelper.hooks.off("intersectionUpdate", this.emitIntersectionUpdate), this.emit("disable");
   }
   dispose() {
     this.disable(), this.pointSelectorHelper.dispose();
@@ -189,5 +198,5 @@ class U extends F {
   }
 }
 export {
-  U as PointSelector
+  B as PointSelector
 };

package/libs/shared-utils/three/{PointHelper.d.ts → PointSelector/utils/PointHelper.d.ts}

@@ -1,5 +1,8 @@
 import * as THREE from 'three';
-import type { Intersection } from '../../typings/typings';
+import type { Intersection } from '../../../../typings/typings';
+import type { PointHelperAbstract } from './typing';
+import { CSS3DObjectPlus } from '../../../../CSS3DRenderPlugin/utils/three/CSS3DObject';
+import type { Five } from '@realsee/five';
 export interface MouseGroupParameter {
     isMobile?: boolean;
     useNormalVector?: boolean;
@@ -8,15 +11,20 @@ export interface MouseGroupParameter {
 declare function createPlaneMesh(): THREE.Mesh<THREE.PlaneGeometry, THREE.MeshBasicMaterial>;
 declare function createLineMesh(): THREE.Mesh<THREE.TubeGeometry, THREE.ShaderMaterial>;
 declare function createBallMesh(): THREE.Mesh<THREE.SphereGeometry, THREE.MeshBasicMaterial>;
+declare function createBorderMesh(): CSS3DObjectPlus<HTMLElement>;
 type PlanMesh = ReturnType<typeof createPlaneMesh>;
 type LineMesh = ReturnType<typeof createLineMesh>;
 type BallMesh = ReturnType<typeof createBallMesh>;
-export declare class PointHelper extends THREE.Object3D {
+type BorderMesh = ReturnType<typeof createBorderMesh>;
+export declare class PointHelper extends THREE.Object3D implements PointHelperAbstract {
     planeMesh: PlanMesh;
     lineMesh: LineMesh;
     ballMesh: BallMesh;
-    constructor();
+    borderMesh: BorderMesh;
+    constructor(five: Five);
     updateWithIntersect(intersect: Intersection): void;
+    show(): void;
+    hide(): void;
     dispose(): void;
 }
 export {};

package/libs/shared-utils/three/PointSelector/utils/PointHelper.js

@@ -0,0 +1,95 @@
+var a = Object.defineProperty;
+var i = (r, n, e) => n in r ? a(r, n, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[n] = e;
+var s = (r, n, e) => (i(r, typeof n != "symbol" ? n + "" : n, e), e);
+import * as t from "three";
+import { POINT_HELPER_TEXTURE_URL as l } from "../../Assets/index.js";
+import { CSS3DObjectPlus as c } from "../../../../CSS3DRenderPlugin/utils/three/CSS3DObject.js";
+import { rangePieceImg as h } from "./html.js";
+import { initialCSS3DRender as d } from "../../../five/initialCSS3DRender.js";
+const p = `
+varying vec2 vUv;
+void main() {
+  vUv = uv;
+  vec4 mvPosition = modelViewMatrix * vec4(position, 1);
+  gl_Position = projectionMatrix * mvPosition;
+}
+`, u = `
+varying vec2 vUv;
+void main() {
+  vec2 uv = vec2(vUv.x, vUv.y);
+  float a = 1.0;
+  float match = 1.0 - uv.x;
+  gl_FragColor = vec4(1.0,1.0,1.0,match);
+}
+`;
+function M() {
+  const r = new t.PlaneGeometry(0.4, 0.4), n = l, e = new t.TextureLoader().load(n);
+  e.encoding = t.sRGBEncoding, e.minFilter = t.LinearFilter;
+  const o = new t.MeshBasicMaterial({
+    map: e,
+    transparent: !0,
+    depthTest: !1
+  });
+  return new t.Mesh(r, o);
+}
+function m() {
+  const r = new t.CurvePath();
+  r.add(new t.LineCurve3(new t.Vector3(0, 0, 0), new t.Vector3(0, 0, 0.1)));
+  const n = new t.TubeGeometry(r, 8, 3e-3), e = new t.ShaderMaterial({
+    vertexShader: p,
+    fragmentShader: u,
+    depthTest: !1,
+    transparent: !0
+  });
+  return new t.Mesh(n, e);
+}
+function v() {
+  const r = new t.SphereGeometry(0.01, 20, 20), n = new t.MeshBasicMaterial({
+    color: 10349931,
+    depthTest: !1,
+    transparent: !0,
+    side: t.DoubleSide
+  }), e = new t.Mesh(r, n);
+  return e.position.set(0, 0, 0.1), e;
+}
+function w() {
+  const n = new c({
+    pointerEvents: "none",
+    cornerPoints: [
+      new t.Vector3(-0.2, 0.2, 0),
+      new t.Vector3(-0.2, -0.2, 0),
+      new t.Vector3(0.2, -0.2, 0),
+      new t.Vector3(0.2, 0.2, 0)
+    ]
+  }), e = document.createElement("div");
+  return e.style.width = "100%", e.style.height = "100%", e.style.backgroundImage = `url(${h})`, e.style.backgroundSize = "100%", e.style.backgroundRepeat = "no-repeat", n.container.appendChild(e), n;
+}
+class x extends t.Object3D {
+  constructor(e) {
+    super();
+    s(this, "planeMesh");
+    s(this, "lineMesh");
+    s(this, "ballMesh");
+    s(this, "borderMesh");
+    this.planeMesh = M(), this.lineMesh = m(), this.ballMesh = v(), this.borderMesh = w(), this.add(this.planeMesh, this.lineMesh, this.ballMesh, this.borderMesh), d(e);
+  }
+  updateWithIntersect(e) {
+    if (!e.face)
+      return;
+    const o = new t.Vector3().addVectors(e.point, e.face.normal);
+    this.position.copy(e.point), this.lookAt(o);
+  }
+  show() {
+    this.visible = !0;
+  }
+  hide() {
+    this.visible = !1;
+  }
+  dispose() {
+    var e;
+    (e = this.planeMesh.material.map) == null || e.dispose();
+  }
+}
+export {
+  x as PointHelper
+};

package/libs/shared-utils/three/PointSelector/utils/PointHelper2.d.ts

@@ -0,0 +1,30 @@
+import * as THREE from 'three';
+import type { Intersection } from '../../../../typings/typings';
+import type { Five } from '@realsee/five';
+import type { PointHelperAbstract } from './typing';
+import { ICSS3DSprite } from '../../../../CSS3DRenderPlugin/utils/three/CSS3DSprite';
+export interface MouseGroupParameter {
+    isMobile?: boolean;
+    useNormalVector?: boolean;
+    ballColor?: number;
+}
+declare function createPlaneMesh(): THREE.Mesh<THREE.CircleGeometry, THREE.ShaderMaterial>;
+declare function createCrossline(): THREE.Group;
+declare function createLineMesh(length: number): THREE.Mesh<THREE.TubeGeometry, THREE.MeshBasicMaterial>;
+declare function createRingMesh(): THREE.Mesh<THREE.RingGeometry, THREE.MeshBasicMaterial>;
+declare function createBallMesh(): THREE.Mesh<THREE.SphereGeometry, THREE.MeshBasicMaterial>;
+declare function createCSSBallMesh(): ICSS3DSprite;
+export declare class PointHelper2 extends THREE.Object3D implements PointHelperAbstract {
+    planeMesh: ReturnType<typeof createPlaneMesh>;
+    ringMesh: ReturnType<typeof createRingMesh>;
+    crossline: ReturnType<typeof createCrossline>;
+    lineMesh: ReturnType<typeof createLineMesh>;
+    ballMesh: ReturnType<typeof createBallMesh>;
+    cssBallMesh: ReturnType<typeof createCSSBallMesh>;
+    constructor(five: Five);
+    updateWithIntersect(intersect: Intersection): void;
+    show(): void;
+    hide(): void;
+    dispose(): void;
+}
+export {};

package/libs/shared-utils/three/PointSelector/utils/PointHelper2.js

@@ -0,0 +1,153 @@
+var M = Object.defineProperty, v = Object.defineProperties;
+var p = Object.getOwnPropertyDescriptors;
+var d = Object.getOwnPropertySymbols;
+var f = Object.prototype.hasOwnProperty, m = Object.prototype.propertyIsEnumerable;
+var l = (s, e, r) => e in s ? M(s, e, { enumerable: !0, configurable: !0, writable: !0, value: r }) : s[e] = r, c = (s, e) => {
+  for (var r in e || (e = {}))
+    f.call(e, r) && l(s, r, e[r]);
+  if (d)
+    for (var r of d(e))
+      m.call(e, r) && l(s, r, e[r]);
+  return s;
+}, h = (s, e) => v(s, p(e));
+var o = (s, e, r) => (l(s, typeof e != "symbol" ? e + "" : e, r), r);
+import * as t from "three";
+import { initialCSS3DRender as A } from "../../../five/initialCSS3DRender.js";
+import { LineMesh as u } from "../../../../Sculpt/Meshes/Line.js";
+import { ICSS3DSprite as g } from "../../../../CSS3DRenderPlugin/utils/three/CSS3DSprite.js";
+const w = (
+  /* glsl */
+  `
+varying vec2 vUv;
+varying float vRadius;
+varying float vDistanceToCamera;
+varying float vCenterDistanceToCamera;
+void main() {
+  vUv = uv;
+  // 计算顶点到圆心的距离
+  vRadius = length(position.xy);
+  // 计算顶点到摄像机的距离
+  vec3 worldPosition = vec3(modelViewMatrix * vec4(position, 1.0));
+  vDistanceToCamera = distance(cameraPosition, worldPosition);
+  vCenterDistanceToCamera = distance(cameraPosition, vec3(0.0));
+
+  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1);
+}
+`
+), y = (
+  /* glsl */
+  `
+varying vec2 vUv;
+varying float vRadius;
+
+uniform float borderWidth;
+uniform float radius;
+
+void main() {
+  vec2 uv = vUv;
+
+  if (vRadius > radius - borderWidth && vRadius < radius) {
+    // 如果顶点在边框区域，则使用边框颜色
+    gl_FragColor = vec4(1.0, 1.0, 1.0, 0.3);
+  } else {
+    // 如果顶点在填充区域，则使用填充颜色
+    gl_FragColor = vec4(1.0, 1.0, 1.0, 0.2);
+  }
+}
+`
+);
+function P() {
+  const e = new t.CircleGeometry(0.2, 64), r = new t.ShaderMaterial({
+    uniforms: {
+      borderWidth: { value: 0.01 },
+      radius: { value: 0.2 }
+    },
+    vertexShader: w,
+    fragmentShader: y,
+    depthTest: !1,
+    transparent: !0,
+    blending: t.CustomBlending,
+    blendEquation: t.AddEquation,
+    blendSrc: t.DstColorFactor,
+    blendDst: t.SrcAlphaFactor,
+    blendDstAlpha: t.DstAlphaFactor
+  });
+  return new t.Mesh(e, r);
+}
+function b() {
+  const e = new t.Group(), r = {
+    lineWidth: 1,
+    lineColor: 3407837,
+    opacity: 0.7,
+    occlusionVisibility: !0
+  }, i = new u(h(c({ points: [{ x: -0.5 }, { x: 0.5 }] }, r), { lineColor: 3407837 })), a = new u(h(c({ points: [{ y: -0.5 }, { y: 0.5 }] }, r), { lineColor: 3407837 }));
+  return e.add(i, a), e;
+}
+function V(s) {
+  const e = new t.CurvePath();
+  e.add(new t.LineCurve3(new t.Vector3(0, 0, 0), new t.Vector3(0, 0, s)));
+  const r = new t.TubeGeometry(e, 32, 3e-3), i = new t.MeshBasicMaterial({
+    color: 10994687,
+    depthTest: !1,
+    transparent: !0
+    // 必须要开启透明度，要和PlaneMesh一起渲染
+  });
+  return new t.Mesh(r, i);
+}
+function C() {
+  const s = new t.RingGeometry(0.03, 0.035, 64), e = new t.MeshBasicMaterial({
+    color: 16777215,
+    depthTest: !1,
+    transparent: !0
+    // 必须要开启透明度，要和PlaneMesh一起渲染
+  });
+  return new t.Mesh(s, e);
+}
+function x() {
+  const s = new t.SphereGeometry(0.018, 32, 32), e = new t.MeshBasicMaterial({
+    color: 5085183,
+    depthTest: !1,
+    transparent: !0
+    // 必须要开启透明度，要和PlaneMesh一起渲染
+  });
+  return new t.Mesh(s, e);
+}
+function S() {
+  const s = document.createElement("img");
+  s.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAVCAMAAAB8FU7dAAAAw1BMVEUAAACDuuiAsu11q/x8r/+HxtKHxtKIx9J4ut6Hx9Jcn/uNwNlmmf+RuP9ppf9orel3ud2HxtJrpf9oremev/9ppP9orelQmP9ZoPWSuP92q/9cnv9prel4ut53qv9orelYoPWIxdJPmP+HxtGRuP9oo/+Suf9Qmf92q/+RuP+DsP9Pmv+FxdFtre2SyMiRuP9PmP+evv9ppf9cnv+rxf9orepZofV4ut52q/+Dsf+Esv+5y/93q/9aofbF0f93rP9qpf8IzZ1iAAAAL3RSTlMAEg4s3dK5nodgVQoF/Pf39vbt7evr39rV1NTOzs6srJ+fiIZ9fWlpW09ERCwcHMH8LhIAAADRSURBVBjTjdDHkoMwEIThBrzOm3POOQwSYCRhe/f9n2p75FD2zX/VXL5qOAjzkixLsFL6fOFF5PwpXUj/eEwx7Oh9Jq+FdV5MqZkXlU9K4KZsmqY02x/A8LSwv14o0ylJWkP087WVhDfcjmjj5b/E3+CEpDPdGY58C7tKfzSiiA9uB4dV/NIF7yVQ7AGuq0lOIzrvnLP2Et2aMzUqryge8FVX0Zjl5XkG3KsR593pM2zVEScjvbMU7IdGjF19IzZ43Ceyve4Ai5Jep93u9BJs3j/gXjHbRgy31AAAAABJRU5ErkJggg==";
+  const e = new g(s);
+  return s.style.pointerEvents = "none", e.scale.set(3e-3, 3e-3, 3e-3), e;
+}
+class E extends t.Object3D {
+  constructor(r) {
+    super();
+    o(this, "planeMesh");
+    o(this, "ringMesh");
+    o(this, "crossline");
+    o(this, "lineMesh");
+    o(this, "ballMesh");
+    o(this, "cssBallMesh");
+    const i = 0.18;
+    this.planeMesh = P(), this.ringMesh = C(), this.crossline = b(), this.lineMesh = V(i), this.ballMesh = x(), this.cssBallMesh = S(), this.ballMesh.position.setZ(i), this.cssBallMesh.position.setZ(i), this.planeMesh.renderOrder = 0, this.ringMesh.renderOrder = 1, this.crossline.renderOrder = 2, this.lineMesh.renderOrder = 3, this.ballMesh.renderOrder = 4, this.add(this.planeMesh, this.crossline, this.lineMesh, this.ballMesh, this.ringMesh, this.cssBallMesh), A(r);
+  }
+  updateWithIntersect(r) {
+    if (!r.face)
+      return;
+    const i = (() => {
+      const n = r.face.normal.clone().normalize();
+      return n.y > 0.99 ? new t.Vector3(0, 1, 0) : n.y < -0.99 ? new t.Vector3(0, -1, 0) : n.x > 0.99 ? new t.Vector3(1, 0, 0) : n.x < -0.99 ? new t.Vector3(-1, 0, 0) : n.z > 0.99 ? new t.Vector3(0, 0, 1) : n.z < -0.99 ? new t.Vector3(0, 0, -1) : n.y < 0.01 && n.y > -0.01 ? new t.Vector3(n.x, 0, n.z) : n;
+    })(), a = new t.Vector3().addVectors(r.point, i);
+    this.position.copy(r.point), this.lookAt(a);
+  }
+  show() {
+    this.visible = !0, this.add(this.cssBallMesh);
+  }
+  hide() {
+    this.visible = !1, this.remove(this.cssBallMesh);
+  }
+  dispose() {
+  }
+}
+export {
+  E as PointHelper2
+};

package/libs/shared-utils/three/{PointSelectorHelper.d.ts → PointSelector/utils/PointSelectorHelper.d.ts}

@@ -1,13 +1,13 @@
 import * as THREE from 'three';
 import type { Five } from '@realsee/five';
-import { Magnifier, PointHelper, PointDomHelper } from '.';
-import type { Intersection } from '../../typings/typings';
-import { Subscribe } from '../Subscribe';
-interface Options {
+import { Magnifier } from '../..';
+import type { Intersection } from '../../../../typings/typings';
+import { Subscribe } from '../../../Subscribe';
+import type { PointHelperAbstract } from './typing';
+export interface PointSelectorHelperConfig {
     magnifier?: Magnifier | null;
     magnifierParams?: ConstructorParameters<typeof Magnifier>[1];
-    pointHelper?: PointHelper | null;
-    pointDomHelper?: PointDomHelper | null;
+    pointHelper?: PointHelperAbstract | 'default' | 'highlight' | null;
     container?: Element;
 }
 type EventMap = {
@@ -26,17 +26,16 @@ export declare class PointSelectorHelper {
     hooks: Subscribe<EventMap>;
     position: PointIntersection | undefined;
     magnifier: Magnifier | null;
-    private pointHelper;
-    private pointDomHelper;
+    pointHelper: PointHelperAbstract | null;
     private state;
     private group;
-    constructor(five: Five, options?: Options);
+    constructor(five: Five, options?: PointSelectorHelperConfig);
     show: () => void;
     hide: () => void;
     enable(): void;
     disable(): void;
     dispose(): void;
-    updateWithIntersect: (intersect: Intersection, config?: {
+    updateWithIntersect: (intersect?: Intersection, config?: {
         emitEvent: boolean;
     }) => void;
     private abortUpdateMagnifier;

package/libs/shared-utils/three/PointSelector/utils/PointSelectorHelper.js

@@ -0,0 +1,60 @@
+var d = Object.defineProperty;
+var f = (a, i, e) => i in a ? d(a, i, { enumerable: !0, configurable: !0, writable: !0, value: e }) : a[i] = e;
+var t = (a, i, e) => (f(a, typeof i != "symbol" ? i + "" : i, e), e);
+import * as m from "three";
+import { Magnifier as p } from "../../Magnifier.js";
+import { PointHelper as u } from "./PointHelper.js";
+import { Subscribe as g } from "../../../Subscribe.js";
+import { PointHelper2 as b } from "./PointHelper2.js";
+import "../../THREESphere.js";
+import "animejs";
+class M {
+  constructor(i, e) {
+    t(this, "five");
+    t(this, "hooks", new g());
+    t(this, "position");
+    t(this, "magnifier", null);
+    t(this, "pointHelper", null);
+    t(this, "state", { enabled: !1, visible: !0 });
+    t(this, "group", new m.Group());
+    t(this, "show", () => {
+      var i, e;
+      this.state.visible || (this.state.visible = !0, (i = this.pointHelper) == null || i.show(), (e = this.magnifier) == null || e.enable(), this.five.needsRender = !0);
+    });
+    t(this, "hide", () => {
+      var i, e;
+      this.state.visible && (this.state.visible = !1, (i = this.pointHelper) == null || i.hide(), (e = this.magnifier) == null || e.disable(), this.five.needsRender = !0);
+    });
+    t(this, "updateWithIntersect", (i, e = { emitEvent: !0 }) => {
+      var s;
+      if (!i)
+        return;
+      this.abortUpdateMagnifier(), this.position = i, e.emitEvent && this.hooks.emit("intersectionUpdate", i), (s = this.pointHelper) == null || s.updateWithIntersect(i);
+      const r = () => {
+        var n;
+        return (n = this.magnifier) == null ? void 0 : n.renderWithPoint(i.point);
+      };
+      this.abortUpdateMagnifier = () => this.five.off("renderFrame", r), this.five.once("renderFrame", r), this.five.needsRender = !0;
+    });
+    t(this, "abortUpdateMagnifier", () => {
+    });
+    var s, n, h, l;
+    console.log(e), this.five = i, this.magnifier = (e == null ? void 0 : e.magnifier) !== void 0 ? e.magnifier : new p(i, (s = e == null ? void 0 : e.magnifierParams) != null ? s : { dragEnabled: !0 });
+    let r;
+    (e == null ? void 0 : e.pointHelper) === "default" || (e == null ? void 0 : e.pointHelper) === void 0 ? r = new u(i) : (e == null ? void 0 : e.pointHelper) === "highlight" ? r = new b(i) : r = e.pointHelper, this.pointHelper = r, this.group.name = "five-point-selector", this.five.scene.add(this.group), (l = this.magnifier) == null || l.appendTo((h = (n = e.container) != null ? n : i.getElement().parentElement) != null ? h : document.body);
+  }
+  enable() {
+    var i;
+    this.state.enabled || (this.state.enabled = !0, this.pointHelper && this.group.add(this.pointHelper), (i = this.magnifier) == null || i.enable(), this.five.needsRender = !0, this.hooks.emit("enabled"));
+  }
+  disable() {
+    var i;
+    this.state.enabled && (this.state.enabled = !1, this.pointHelper && (this.group.remove(this.pointHelper), this.pointHelper.hide()), (i = this.magnifier) == null || i.disable(), this.hooks.emit("disabled"));
+  }
+  dispose() {
+    this.hooks.off(), this.disable(), this.magnifier = null, this.pointHelper = null;
+  }
+}
+export {
+  M as PointSelectorHelper
+};