three-earth-3d 1.0.0

package/dist/types/index.d.ts

@@ -0,0 +1,2 @@
+export { default as World } from './ts/world/Word';
+export type { IWord, EarthRouteData, EarthCityPoint } from './ts/interfaces/IWord';

package/dist/types/ts/Utils/Sizes.d.ts

@@ -0,0 +1,33 @@
+/**
+ * 屏幕尺寸
+*/
+import { EventEmitter } from 'pietile-eventemitter';
+import { IEvents } from '../interfaces/IEvents';
+type options = {
+    dom: HTMLElement;
+};
+export default class Sizes {
+    width: number;
+    height: number;
+    viewport: {
+        width: number;
+        height: number;
+    };
+    $sizeViewport: HTMLElement;
+    emitter: EventEmitter<IEvents>;
+    /**
+     * Constructor
+     */
+    constructor(options: options);
+    /**
+     * 目前用于监听历史记录执行 historyChange
+     * @param event 事件
+     * @param fun 执行
+     */
+    $on<T extends keyof IEvents>(event: T, fun: () => void): void;
+    /**
+     * Resize
+     */
+    resize(): void;
+}
+export {};

package/dist/types/ts/Utils/arc.d.ts

@@ -0,0 +1,11 @@
+import { BufferGeometry, Line, LineBasicMaterial } from 'three';
+/**输入地球上任意两点的经纬度坐标，通过函数flyArc可以绘制一个飞线圆弧轨迹
+ * lon1,lat1:轨迹线起点经纬度坐标
+ * lon2,lat2：轨迹线结束点经纬度坐标
+ */
+declare function flyArc(radius: any, lon1: any, lat1: any, lon2: any, lat2: any, options: any): Line<BufferGeometry, LineBasicMaterial>;
+/**通过函数arcXOY()可以在XOY平面上绘制一个关于y轴对称的圆弧曲线
+ * startPoint, endPoint：表示圆弧曲线的起点和结束点坐标值，起点和结束点关于y轴对称
+ * 同时在圆弧轨迹的基础上绘制一段飞线*/
+declare function arcXOY(radius: any, startPoint: any, endPoint: any, options: any): Line<BufferGeometry, LineBasicMaterial>;
+export { arcXOY, flyArc };

package/dist/types/ts/Utils/common.d.ts

@@ -0,0 +1,34 @@
+import { Group, Mesh, MeshBasicMaterial, PlaneBufferGeometry, Texture, TubeGeometry, Vector3 } from "three";
+import { punctuation } from "../world/Earth";
+/**
+ * 经纬度坐标转球面坐标
+ * @param {地球半径} R
+ * @param {经度(角度值)} longitude
+ * @param {维度(角度值)} latitude
+ */
+export declare const lon2xyz: (R: number, longitude: number, latitude: number) => Vector3;
+export declare const createWaveMesh: (options: {
+    radius;
+    lon;
+    lat;
+    textures;
+}) => Mesh<PlaneBufferGeometry, MeshBasicMaterial>;
+export declare const createLightPillar: (options: {
+    radius: number;
+    lon: number;
+    lat: number;
+    index: number;
+    textures: Record<string, Texture>;
+    punctuation: punctuation;
+}) => Group;
+export declare const createPointMesh: (options: {
+    radius: number;
+    lon: number;
+    lat: number;
+    material: MeshBasicMaterial;
+}) => Mesh<PlaneBufferGeometry, MeshBasicMaterial>;
+export declare const getCirclePoints: (option: any) => any[];
+/**
+ * 创建动态的线
+ */
+export declare const createAnimateLine: (option: any) => Mesh<TubeGeometry, any>;

package/dist/types/ts/index.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/ts/interfaces/IEvents.d.ts

@@ -0,0 +1,3 @@
+export interface IEvents {
+    resize: () => void;
+}

package/dist/types/ts/interfaces/IWord.d.ts

@@ -0,0 +1,62 @@
+export interface EarthCityPoint {
+    name: string;
+    /** 经度 */
+    E: number;
+    /** 纬度 */
+    N: number;
+}
+export interface EarthRouteData {
+    startArray: EarthCityPoint;
+    endArray: EarthCityPoint[];
+}
+export interface IWord {
+    /** 挂载目标 DOM 元素 */
+    dom: HTMLElement;
+    /** 地球创建完成、入场动画开始后触发 */
+    onReady?: () => void;
+    /**
+     * 静态资源基础路径，末尾不需要斜杠
+     * 包内默认图片放在 static/images/earth/ 下
+     * 消费方可以把图片复制到自己的 public 目录，然后传入对应前缀
+     * @default ''
+     */
+    baseUrl?: string;
+    /** 自定义路线数据，不传则使用内置示例数据 */
+    data?: EarthRouteData[];
+    earth?: {
+        /** 地球半径，默认 50 */
+        radius?: number;
+        /** 自转速度，默认 0.002 */
+        rotateSpeed?: number;
+        /** 是否自转，默认 true */
+        isRotation?: boolean;
+    };
+    satellite?: {
+        /** 是否显示卫星，默认 true */
+        show?: boolean;
+        /** 卫星轨道旋转速度，默认 -0.01 */
+        rotateSpeed?: number;
+        /** 卫星球体大小，默认 1 */
+        size?: number;
+        /** 每条轨道几颗卫星，默认 2 */
+        number?: number;
+    };
+    punctuation?: {
+        /** 光柱底座圆圈颜色，默认 0x3892ff */
+        circleColor?: number;
+        lightColumn?: {
+            /** 起点光柱颜色，默认 0xffffff */
+            startColor?: number;
+            /** 终点光柱颜色，默认 0xff0000 */
+            endColor?: number;
+        };
+    };
+    flyLine?: {
+        /** 轨迹线颜色，默认 0xd18547 */
+        color?: number;
+        /** 飞线拖尾速度，默认 0.004 */
+        speed?: number;
+        /** 飞线颜色，默认 0xff7714 */
+        flyLineColor?: number;
+    };
+}

package/dist/types/ts/world/Assets.d.ts

@@ -0,0 +1,16 @@
+/**
+ * 资源文件列表
+ */
+interface ITextures {
+    name: string;
+    url: string;
+}
+export interface IResources {
+    textures?: ITextures[];
+}
+/**
+ * 根据 baseUrl 生成资源列表
+ * @param baseUrl 静态资源根路径，例如 '' 或 'https://cdn.example.com'
+ */
+export declare function getResources(baseUrl?: string): IResources;
+export {};

package/dist/types/ts/world/Basic.d.ts

@@ -0,0 +1,15 @@
+/**
+ * 创建 Three.js 四大件：场景、相机、渲染器、控制器
+ */
+import * as THREE from 'three';
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
+export declare class Basic {
+    scene: THREE.Scene;
+    camera: THREE.PerspectiveCamera;
+    renderer: THREE.WebGLRenderer;
+    controls: OrbitControls;
+    dom: HTMLElement;
+    constructor(dom: HTMLElement);
+    private initScenes;
+    private setControls;
+}

package/dist/types/ts/world/Data.d.ts

@@ -0,0 +1,13 @@
+declare const _default: {
+    startArray: {
+        name: string;
+        N: number;
+        E: number;
+    };
+    endArray: {
+        name: string;
+        N: number;
+        E: number;
+    }[];
+}[];
+export default _default;

package/dist/types/ts/world/Earth.d.ts

@@ -0,0 +1,100 @@
+import { BufferGeometry, Color, Group, Mesh, MeshBasicMaterial, Object3D, Points, PointsMaterial, ShaderMaterial, SphereBufferGeometry, Texture } from "three";
+export type punctuation = {
+    circleColor: number;
+    lightColumn: {
+        startColor: number;
+        endColor: number;
+    };
+};
+type options = {
+    data: {
+        startArray: {
+            name: string;
+            E: number;
+            N: number;
+        };
+        endArray: {
+            name: string;
+            E: number;
+            N: number;
+        }[];
+    }[];
+    dom: HTMLElement;
+    textures: Record<string, Texture>;
+    earth: {
+        radius: number;
+        rotateSpeed: number;
+        isRotation: boolean;
+    };
+    satellite: {
+        show: boolean;
+        rotateSpeed: number;
+        size: number;
+        number: number;
+    };
+    punctuation: punctuation;
+    flyLine: {
+        color: number;
+        speed: number;
+        flyLineColor: number;
+    };
+};
+type uniforms = {
+    glowColor: {
+        value: Color;
+    };
+    scale: {
+        type: string;
+        value: number;
+    };
+    bias: {
+        type: string;
+        value: number;
+    };
+    power: {
+        type: string;
+        value: number;
+    };
+    time: {
+        type: string;
+        value: any;
+    };
+    isHover: {
+        value: boolean;
+    };
+    map: {
+        value: Texture;
+    };
+};
+export default class earth {
+    group: Group;
+    earthGroup: Group;
+    around: BufferGeometry;
+    aroundPoints: Points<BufferGeometry, PointsMaterial>;
+    options: options;
+    uniforms: uniforms;
+    timeValue: number;
+    earth: Mesh<SphereBufferGeometry, ShaderMaterial>;
+    punctuationMaterial: MeshBasicMaterial;
+    markupPoint: Group;
+    waveMeshArr: Object3D[];
+    circleLineList: any[];
+    circleList: any[];
+    x: number;
+    n: number;
+    isRotation: boolean;
+    flyLineArcGroup: Group;
+    constructor(options: options);
+    init(): Promise<void>;
+    createEarth(): void;
+    createStars(): void;
+    createEarthGlow(): void;
+    createEarthAperture(): void;
+    createMarkupPoint(): Promise<void>;
+    createSpriteLabel(): Promise<void>;
+    createAnimateCircle(): void;
+    createFlyLine(): void;
+    show(): void;
+    render(): void;
+}
+export {};

package/dist/types/ts/world/Resources.d.ts

@@ -0,0 +1,13 @@
+/**
+ * 资源管理和加载
+ */
+import { Texture } from 'three';
+export declare class Resources {
+    private manager;
+    private callback;
+    private textureLoader;
+    textures: Record<string, Texture>;
+    constructor(callback: () => void, baseUrl?: string);
+    private setLoadingManager;
+    private loadResources;
+}

package/dist/types/ts/world/Word.d.ts

@@ -0,0 +1,29 @@
+import { MeshBasicMaterial, PerspectiveCamera, Scene, ShaderMaterial, WebGLRenderer } from 'three';
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
+import { IWord } from '../interfaces/IWord';
+import { Basic } from './Basic';
+import Sizes from '../Utils/Sizes';
+import { Resources } from './Resources';
+import Earth from './Earth';
+export default class World {
+    basic: Basic;
+    scene: Scene;
+    camera: PerspectiveCamera;
+    renderer: WebGLRenderer;
+    controls: OrbitControls;
+    sizes: Sizes;
+    material: ShaderMaterial | MeshBasicMaterial;
+    resources: Resources;
+    option: IWord;
+    earth: Earth;
+    /** html2canvas 需要一个隐藏容器，由库自动创建并在 dispose 时清理 */
+    private _html2canvasEl;
+    private _animFrameId;
+    constructor(option: IWord);
+    /** 自动在 body 上注入 html2canvas 所需的隐藏容器 */
+    private _createHtml2CanvasEl;
+    createEarth(): Promise<void>;
+    render(): void;
+    /** 销毁实例，释放所有资源和事件监听 */
+    dispose(): void;
+}

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "three-earth-3d",
+  "version": "1.0.0",
+  "description": "3D Earth visualization component built with Three.js — mount to any DOM element",
+  "keywords": [
+    "threejs",
+    "3d",
+    "earth",
+    "typescript",
+    "visualization",
+    "globe"
+  ],
+  "author": "GhostCat",
+  "license": "MIT",
+  "type": "module",
+  "main": "dist/three-earth-3d.umd.js",
+  "module": "dist/three-earth-3d.es.js",
+  "types": "dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/three-earth-3d.es.js",
+      "require": "./dist/three-earth-3d.umd.js"
+    }
+  },
+  "bin": {
+    "three-earth-3d": "bin/copy-assets.mjs"
+  },
+  "files": [
+    "dist",
+    "static",
+    "bin"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build && pnpm build:types",
+    "build:types": "tsc -p tsconfig.build.json",
+    "build:demo": "vite build --config vite.demo.config.ts",
+    "preview": "vite build --config vite.demo.config.ts && vite preview --config vite.demo.config.ts"
+  },
+  "peerDependencies": {
+    "three": ">=0.130.0"
+  },
+  "devDependencies": {
+    "@rollup/pluginutils": "^5.3.0",
+    "@types/three": "^0.143.0",
+    "typescript": "^4.1.3",
+    "vite": "^5.0.0",
+    "vite-plugin-glsl": "^1.3.0"
+  },
+  "dependencies": {
+    "gsap": "^3.7.1",
+    "html2canvas": "^1.4.1",
+    "pietile-eventemitter": "^1.0.1",
+    "three": "^0.143"
+  }
+}