@shjjs/visual-ui 1.0.0

package/es/core/earth/main.vue.mjs

@@ -0,0 +1,7 @@
+import o from "./main.vue2.mjs";
+/* empty css           */
+import t from "../../_virtual/_plugin-vue_export-helper.mjs";
+const p = /* @__PURE__ */ t(o, [["__scopeId", "data-v-d6b8b1a3"]]);
+export {
+  p as default
+};

package/es/core/earth/main.vue2.mjs

@@ -0,0 +1,290 @@
+import { defineComponent as j, useSlots as M, computed as i, onMounted as D, onBeforeUnmount as X, openBlock as Y, createElementBlock as Z, createElementVNode as G, unref as R, renderSlot as U } from "vue";
+import { nanoid as V } from "nanoid";
+import { debounce as $ } from "lodash";
+import { Earth as q } from "./main.mjs";
+const J = { class: "earth-wrap" }, K = ["id"], re = /* @__PURE__ */ j({
+  __name: "main",
+  props: {
+    isComposer: { type: Boolean, default: !1 },
+    radius: { default: 50 },
+    subdivision: { default: 80 },
+    color: { default: "#1a1a1a" },
+    opacity: { default: 1 },
+    transparent: { type: Boolean, default: !0 },
+    wireframe: { type: Boolean, default: !1 },
+    label: { default: () => ({
+      show: !1,
+      color: "#ffffff",
+      fontSize: 8
+    }) },
+    texture: { type: [String, Boolean], default: void 0 },
+    animation: { type: Boolean, default: !0 },
+    animationSpeed: { default: 2 },
+    background: { default: "#050b16" },
+    isBackground: { type: Boolean, default: !0 },
+    fog: { type: Boolean, default: !1 },
+    fogColor: { default: "#020924" },
+    fogNear: { default: 20 },
+    fogFar: { default: 50 },
+    stats: { type: Boolean, default: !1 },
+    statsType: { default: 0 },
+    aperture: { type: Boolean, default: !1 },
+    apertureColor: { default: "#ffffff" },
+    apertureOpacity: { default: 0.1 },
+    apertureTransparent: { type: Boolean, default: !0 },
+    apertureDepthWrite: { type: Boolean, default: !1 },
+    cloudCover: { type: Boolean, default: !1 },
+    cloudCoverColor: { default: "#ffffff" },
+    cloudCoverOpacity: { default: 1 },
+    cloudCoverTransparent: { type: Boolean, default: !0 },
+    cloudCoverTexture: {},
+    cloudCoverAnimation: { type: Boolean, default: !0 },
+    cloudCoverAnimationSpeed: { default: 3 },
+    starrySky: { type: Boolean, default: !1 },
+    starrySkyTexture: { default: void 0 },
+    starrySkyNumber: { default: 1e4 },
+    starrySkySize: { default: 1 },
+    starrySkyColor: { default: "#ffffff" },
+    starrySkyOpacity: { default: 1 },
+    starrySkyAnimation: { type: Boolean, default: !0 },
+    starrySkyAnimationSpeed: { default: 1 },
+    gridHelper: { type: Boolean, default: !1 },
+    gridHelperWidth: { default: 500 },
+    gridHelperHeight: { default: 500 },
+    gridHelperColor: { default: "#ffffff" },
+    axesHelper: { type: Boolean, default: !1 },
+    axesHelperSize: { default: 100 },
+    ambientLightColor: { default: "#ffffff" },
+    ambientLightIntensity: { default: 0.2 },
+    directionalLightX: { default: 0 },
+    directionalLightY: { default: 5 },
+    directionalLightZ: { default: 10 },
+    directionalLightIntensity: { default: 2 },
+    directionalLightColor: { default: "#ffffff" },
+    composer: { default: {
+      unrealBloomPass: {},
+      glitchPass: {},
+      dotScreenPass: {},
+      filmPass: {}
+    } },
+    particle: { type: Boolean, default: !1 },
+    particleColor: { default: "#6acadd" },
+    particleSize: { default: 5 },
+    flylines: { default: () => [] },
+    lines: { default: () => [] },
+    lightBeam: { default: () => [] }
+  },
+  emits: ["on-success"],
+  setup(S, { expose: C, emit: w }) {
+    const n = V(), l = M(), t = S, v = i(() => ({
+      background: t.background,
+      isBackground: t.isBackground,
+      fog: t.fog,
+      fogColor: t.fogColor,
+      fogNear: t.fogNear,
+      fogFar: t.fogFar,
+      stats: t.stats,
+      statsType: t.statsType
+    })), B = i(() => ({
+      isComposer: t.isComposer,
+      composer: t.composer
+    })), P = i(() => ({
+      radius: t.radius,
+      subdivision: t.subdivision,
+      animation: t.animation,
+      animationSpeed: t.animationSpeed / 1e4,
+      texture: t.texture,
+      color: t.color,
+      opacity: t.opacity,
+      transparent: t.transparent,
+      wireframe: t.wireframe,
+      particle: t.particle,
+      particleColor: t.particleColor,
+      particleSize: t.particleSize,
+      label: t.label
+    })), k = i(() => ({
+      show: t.aperture,
+      color: t.apertureColor,
+      opacity: t.apertureOpacity,
+      transparent: t.apertureTransparent,
+      depthWrite: t.apertureDepthWrite
+    })), L = i(() => ({
+      show: t.cloudCover,
+      color: t.cloudCoverColor,
+      opacity: t.cloudCoverOpacity,
+      transparent: t.cloudCoverTransparent,
+      animation: t.cloudCoverAnimation,
+      animationSpeed: t.cloudCoverAnimationSpeed / 1e4
+    })), z = i(() => ({
+      show: t.starrySky,
+      texture: t.starrySkyTexture,
+      number: t.starrySkyNumber,
+      size: t.starrySkySize,
+      color: t.starrySkyColor,
+      opacity: t.starrySkyOpacity,
+      animation: t.starrySkyAnimation,
+      animationSpeed: t.starrySkyAnimationSpeed / 1e4
+    })), b = i(() => ({
+      color: t.ambientLightColor,
+      intensity: t.ambientLightIntensity
+    })), H = i(() => ({
+      x: t.directionalLightX,
+      y: t.directionalLightY,
+      z: t.directionalLightZ,
+      intensity: t.directionalLightIntensity,
+      color: t.directionalLightColor
+    })), x = i(() => ({
+      sceneParameter: v.value,
+      earthParameter: P.value,
+      apertureParameter: k.value,
+      cloudCoverParameter: L.value,
+      starrySkyParameter: z.value,
+      gridHelperParameter: {
+        show: t.gridHelper,
+        width: t.gridHelperWidth,
+        height: t.gridHelperHeight,
+        color: t.gridHelperColor
+      },
+      axesHelperParameter: {
+        show: t.axesHelper,
+        size: t.axesHelperSize
+      },
+      ambientLightParameter: b.value,
+      directionalLightParameter: H.value,
+      composerParameter: B.value
+    })), T = w;
+    let a;
+    const E = () => new Promise((r) => {
+      new q(document.getElementById(n), x.value).start().then((e) => {
+        a = e, r(e);
+      });
+    }), N = async () => {
+      F("th-earth-border").forEach(async (e) => {
+        var f, c, d, p, u, y, m, h, g;
+        const o = ((f = e.props) == null ? void 0 : f.geojson) || e.type.props.geojson.default, W = {
+          color: ((c = e.props) == null ? void 0 : c.color) || e.type.props.color.default,
+          lineWidth: ((d = e.props) == null ? void 0 : d.width) === void 0 ? e.type.props.width.default : (p = e.props) == null ? void 0 : p.width,
+          opacity: ((u = e.props) == null ? void 0 : u.opacity) || e.type.props.opacity.default,
+          wakeline: ((y = e.props) == null ? void 0 : y.wakeline) === void 0 ? e.type.props.wakeline.default : (m = e.props) == null ? void 0 : m.wakeline,
+          wakelineNumber: ((h = e.props) == null ? void 0 : h.wakelineNumber) === void 0 ? e.type.props.wakelineNumber.default : (g = e.props) == null ? void 0 : g.wakelineNumber
+          // wakelineColors: border.props?.wakelineColors || border.type.props.wakelineColors.default,
+        }, I = await a.createMapBorder(o, W);
+        a.earth.add(I);
+      });
+    }, O = () => {
+      (t.lines || []).forEach((e) => {
+        e.data && a.earth.add(a.createFlightLines(e.data, {
+          labelParameter: {
+            show: e.labelShow || !1,
+            color: e.labelColor || "#ffffff",
+            fontSize: e.labelFontSize || 12
+          },
+          lineParameter: {
+            color: e.color || "#ffffff",
+            lineWidth: e.width || 1,
+            opacity: e.opacity || 1
+          },
+          startScatterParameter: {
+            color: e.startScatterColor || "#fff111",
+            size: e.startScatterSize || 8,
+            opacity: e.startScatterOpacity || 1
+          },
+          endScatterParameter: {
+            color: e.endScatterColor || "#fff111",
+            size: e.endScatterSize || 10,
+            opacity: e.endScatterOpacity || 1
+          }
+        }));
+      });
+    }, _ = async () => {
+      const r = t.flylines || [];
+      for await (const e of r)
+        e.data && a.createFlyLines(e.data, {
+          labelParameter: {
+            show: e.labelShow || !1,
+            color: e.labelColor || "#ffffff",
+            fontSize: e.labelFontSize || 12
+          },
+          lineParameter: {
+            color: e.color || "",
+            number: e.number || 1,
+            speed: e.speed || 1,
+            length: e.length || 0.5,
+            size: e.size || 1
+          },
+          bgLineParameter: {
+            show: e.bgLineShow,
+            opacity: e.bgLineOpacity || 0.2,
+            color: e.bgLineColor || "#cccccc",
+            segments: e.bgLineSegments || 8,
+            radius: e.bgLineRadius || 0.02
+          },
+          startScatterParameter: {
+            color: e.startScatterColor || "#fff111",
+            size: e.startScatterSize || 8,
+            opacity: e.startScatterOpacity || 1
+          },
+          endScatterParameter: {
+            color: e.endScatterColor || "#fff111",
+            size: e.endScatterSize || 10,
+            opacity: e.endScatterOpacity || 1
+          }
+        }).then((o) => {
+          a.earth.add(o);
+        });
+    }, A = () => {
+      (t.lightBeam || []).forEach((e) => {
+        e.data && a.createLightBeamScatter(e.data, {
+          scatterParameter: {
+            color: e.color || "#ffffff",
+            opacity: e.opacity || 1,
+            size: e.scatterSize || 10
+          },
+          lightBeamParameter: {
+            type: e.type || 1,
+            color: e.color || "#ffffff",
+            opacity: e.opacity || 1,
+            radius: e.beamSize || 0.2,
+            baseHeight: e.baseHeight || 0.02
+          }
+        }).then((o) => {
+          a.earth.add(o);
+        });
+      });
+    }, s = async () => {
+      const r = document.getElementById(n);
+      r && r.classList.remove("showLabel"), E().then((e) => {
+        setTimeout(async () => {
+          await N(), await O(), await _(), await A(), await T("on-success"), a.accessAnimation().then((o) => {
+            r && r.classList.add("showLabel");
+          });
+        }, 300);
+      });
+    };
+    D(() => s()), C({
+      dispose: () => {
+        a && a.dispose();
+      },
+      refresh: $(() => {
+        a && a.dispose(), setTimeout(() => s());
+      }, 100)
+    }), X(() => {
+      a && a.dispose();
+    });
+    const F = (r) => (l == null ? void 0 : l.default) === void 0 ? [] : l == null ? void 0 : l.default().map((e) => {
+      var o;
+      return ((o = e.type) == null ? void 0 : o.name) === r ? e : !1;
+    }).filter((e) => e !== !1);
+    return (r, e) => (Y(), Z("div", J, [
+      G("div", {
+        id: R(n),
+        class: "zv-earth"
+      }, [
+        U(r.$slots, "default", {}, void 0, !0)
+      ], 8, K)
+    ]));
+  }
+});
+export {
+  re as default
+};

package/es/core/earth/types.d.ts

@@ -0,0 +1,108 @@
+import { BorderParameter } from './utils/interface';
+import { IComposer } from './utils/composer';
+export interface ComposerParameter {
+    isComposer: boolean;
+    composer: IComposer;
+}
+export interface EarthParameter {
+    radius: number;
+    subdivision: number;
+    animation?: boolean;
+    animationSpeed: number;
+    texture?: string | undefined | boolean;
+    color?: string | undefined;
+    opacity?: number;
+    transparent?: boolean | undefined;
+    wireframe?: boolean | undefined;
+    label: {
+        show: boolean;
+        color: string;
+        fontSize: number;
+    };
+    particle?: boolean;
+    particleColor?: string;
+    particleSize?: number;
+}
+export interface ApertureParameter {
+    show: boolean;
+    color?: string | undefined;
+    opacity?: number;
+    transparent?: boolean | undefined;
+    depthWrite?: boolean | undefined;
+}
+export interface CloudCoverParameter {
+    show: boolean;
+    color?: string | undefined;
+    opacity?: number;
+    transparent?: boolean | undefined;
+    animation?: boolean;
+    animationSpeed: number;
+}
+export interface StarrySkyParameter {
+    show: boolean | undefined;
+    texture?: string | undefined;
+    color?: string;
+    number?: number;
+    size?: number;
+    opacity?: number;
+    animation?: boolean;
+    animationSpeed?: number;
+}
+export interface FlightLinesItem {
+    fromName: string;
+    toName: string;
+    coords: Array<Array<number>>;
+}
+export interface LightBeamScatterItem {
+    name: string;
+    value: Array<number>;
+}
+export interface ScatterParameter {
+    color: string;
+    opacity: number;
+    size: number;
+}
+export interface LightBeamParameter {
+    type: number;
+    baseHeight: number;
+    radius: number;
+    color: string;
+    opacity: number;
+}
+export interface FlightLinesParameter {
+    labelParameter: {
+        show: boolean;
+        color: string;
+        fontSize: number;
+    };
+    lineParameter: BorderParameter;
+    startScatterParameter: ScatterParameter;
+    endScatterParameter: ScatterParameter;
+}
+export interface LightBeamScatterParameter {
+    lightBeamParameter: LightBeamParameter;
+    scatterParameter: ScatterParameter;
+}
+export interface FlyLinesParameter {
+    labelParameter: {
+        show: boolean;
+        color: string;
+        fontSize: number;
+    };
+    lineParameter: {
+        color: string;
+        number: number;
+        speed: number;
+        length: number;
+        size: number;
+    };
+    bgLineParameter: {
+        show: boolean;
+        opacity: number;
+        color: string;
+        segments: number;
+        radius: number;
+    };
+    startScatterParameter: ScatterParameter;
+    endScatterParameter: ScatterParameter;
+}

package/es/core/earth/utils/GradientLine.d.ts

@@ -0,0 +1,17 @@
+import * as THREE from 'three';
+import { Line2 } from 'three/examples/jsm/lines/Line2';
+/**
+ * 在指定线段上创建分段渐变线
+ * @param curve
+ * @param number
+ * @returns
+ */
+export declare const createGradientLine: (curve: THREE.CatmullRomCurve3, number: number) => any;
+export declare const startAnimationGradientLine: (animations: Array<any>) => void;
+export declare const createMovingLine: (curve: any, index?: number, color?: string[], pointNum?: number, verticNum?: number) => {
+    index: number;
+    verticNum: number;
+    mesh: Line2;
+    linePointsV3: any;
+};
+export declare const gradientColors: (start: any, end: any, steps: any, gamma: any) => any[];

package/es/core/earth/utils/GradientLine.mjs

@@ -0,0 +1,78 @@
+import * as d from "three";
+import { Line2 as w } from "three/examples/jsm/lines/Line2";
+import { LineGeometry as g } from "three/examples/jsm/lines/LineGeometry";
+import { LineMaterial as L } from "three/examples/jsm/lines/LineMaterial";
+const P = (s, o) => {
+  const r = [], t = [];
+  return new Array(o).fill(0).forEach((i, c) => {
+    const e = m(s, c * 100);
+    r.push(e), t.push(e.mesh);
+  }), { mesh: t, animations: r };
+}, E = (s) => {
+  s.forEach((o) => {
+    o.index + 1 > o.linePointsV3.length - o.verticNum ? o.index = 0 : o.index += 3, o.mesh.geometry.setPositions(
+      o.linePointsV3.slice(o.index, o.index + o.verticNum).reduce((r, t) => r.concat(t.x, t.y, t.z), [])
+    );
+  });
+}, m = (s, o = 0, r = ["#00ffff", "#ffffff"], t = 400, i = 30) => {
+  const c = new g(), e = s.getPoints(t);
+  c.setPositions(
+    e.slice(o, o + i).reduce((a, n) => a.concat(n.x, n.y, n.z), [])
+  );
+  const l = new L({
+    transparent: !0,
+    side: d.DoubleSide,
+    linewidth: 5,
+    depthTest: !1,
+    // 慎用
+    vertexColors: !0
+  }), p = b(r[1], r[0], i, 1).reduce((a, n) => {
+    const u = new d.Color(n);
+    return a.concat(u.r, u.g, u.b);
+  }, []);
+  c.setColors(p), l.resolution.set(window.innerWidth, window.innerHeight);
+  const f = new w(c, l);
+  return f.computeLineDistances(), {
+    index: o,
+    verticNum: i,
+    mesh: f,
+    linePointsV3: e
+  };
+}, b = (s, o, r, t) => {
+  const i = function(n) {
+    return n.length === 4 ? n.substr(1).split("").map(function(u) {
+      return 17 * parseInt(u, 16);
+    }) : [
+      n.substr(1, 2),
+      n.substr(3, 2),
+      n.substr(5, 2)
+    ].map(function(u) {
+      return parseInt(u, 16);
+    });
+  }, c = function(n) {
+    return n.length === 1 ? `0${n}` : n;
+  };
+  let e, l, h;
+  const p = [], f = [];
+  t = t || 1;
+  const a = function(n) {
+    return Math.pow(n / 255, t);
+  };
+  s = i(s).map(a), o = i(o).map(a);
+  for (let n = 0; n < r; n++) {
+    for (l = n / (r - 1), h = 1 - l, e = 0; e < 3; e++)
+      f[e] = c(
+        Math.round(
+          Math.pow(s[e] * h + o[e] * l, 1 / t) * 255
+        ).toString(16)
+      );
+    p.push(`#${f.join("")}`);
+  }
+  return p;
+};
+export {
+  P as createGradientLine,
+  m as createMovingLine,
+  b as gradientColors,
+  E as startAnimationGradientLine
+};

package/es/core/earth/utils/composer.d.ts

@@ -0,0 +1,38 @@
+import * as THREE from 'three';
+import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer';
+export interface IUnrealBloomPass {
+    enable?: boolean;
+    strength?: number;
+    radius?: number;
+    threshold?: number;
+}
+export interface IGlitchPass {
+    enable?: boolean;
+    dtSize?: number;
+}
+export interface IDotScreenPass {
+    enable?: boolean;
+    angle?: number;
+    scale?: number;
+}
+export interface IFilmPass {
+    enable?: boolean;
+    noiseIntensity?: number;
+    scanlinesIntensity?: number;
+    scanlinesCount?: number;
+    grayscale?: number;
+}
+export interface IComposer {
+    unrealBloomPass?: IUnrealBloomPass;
+    glitchPass?: IGlitchPass;
+    dotScreenPass?: IDotScreenPass;
+    filmPass?: IFilmPass;
+}
+/**
+ * 创建后期效果通道
+ * @param renderer
+ * @param scene
+ * @param camera
+ * @returns
+ */
+export declare const createComposer: (renderer: THREE.WebGLRenderer, scene: THREE.Scene, camera: THREE.PerspectiveCamera, composer?: IComposer) => EffectComposer;

package/es/core/earth/utils/composer.mjs

@@ -0,0 +1,40 @@
+import * as P from "three";
+import { EffectComposer as r } from "three/examples/jsm/postprocessing/EffectComposer";
+import { RenderPass as o } from "three/examples/jsm/postprocessing/RenderPass";
+import { UnrealBloomPass as d } from "three/examples/jsm/postprocessing/UnrealBloomPass";
+import { GlitchPass as f } from "three/examples/jsm/postprocessing/GlitchPass";
+import { DotScreenPass as m } from "three/examples/jsm/postprocessing/DotScreenPass";
+import { FilmPass as c } from "three/examples/jsm/postprocessing/FilmPass";
+const b = (e, t, i, s = {
+  unrealBloomPass: {},
+  glitchPass: {},
+  dotScreenPass: {},
+  filmPass: {}
+}) => {
+  const n = new r(e), l = new o(t, i);
+  if (n.addPass(l), s.unrealBloomPass.enable) {
+    const a = new d(
+      new P.Vector2(window.innerWidth, window.innerHeight),
+      s.unrealBloomPass.strength || 1,
+      s.unrealBloomPass.radius || 0,
+      s.unrealBloomPass.threshold || 0.83
+    );
+    n.addPass(a);
+  }
+  if (s.glitchPass.enable) {
+    const a = new f(s.glitchPass.dtSize || 64);
+    n.addPass(a);
+  }
+  if (s.dotScreenPass.enable) {
+    const a = new m(void 0, s.dotScreenPass.angle, s.dotScreenPass.scale);
+    n.addPass(a);
+  }
+  if (s.filmPass.enable) {
+    const a = new c(s.filmPass.noiseIntensity, s.filmPass.scanlinesIntensity, s.filmPass.scanlinesCount, s.filmPass.grayscale);
+    n.addPass(a);
+  }
+  return n;
+};
+export {
+  b as createComposer
+};

package/es/core/earth/utils/controls/obt.d.ts

@@ -0,0 +1,9 @@
+import * as THREE from 'three';
+export declare class ObtControls {
+    OrbitControls: any;
+    Controls: any;
+    camera: THREE.Camera;
+    webGlRenderer: THREE.WebGLRenderer;
+    constructor(camera: THREE.Camera, webGlRenderer: THREE.WebGLRenderer);
+    init(): ObtControls;
+}

package/es/core/earth/utils/controls/obt.mjs

@@ -0,0 +1,19 @@
+var r = Object.defineProperty;
+var n = (e, t, o) => t in e ? r(e, t, { enumerable: !0, configurable: !0, writable: !0, value: o }) : e[t] = o;
+var s = (e, t, o) => n(e, typeof t != "symbol" ? t + "" : t, o);
+import { OrbitControls as l } from "three/examples/jsm/controls/OrbitControls";
+class h {
+  constructor(t, o) {
+    s(this, "OrbitControls");
+    s(this, "Controls");
+    s(this, "camera");
+    s(this, "webGlRenderer");
+    this.camera = t, this.webGlRenderer = o;
+  }
+  init() {
+    return this.Controls = new l(this.camera, this.webGlRenderer.domElement), this.Controls.enableZoom = !0, this.Controls.autoRotate = !1, this.Controls.autoRotateSpeed = 2, this.Controls.minDistance = 5, this.Controls.maxDistance = 100, this.Controls.enablePan = !0, this.Controls.enableKeys = !1, this.Controls.update(), this;
+  }
+}
+export {
+  h as ObtControls
+};