@zym-com/three-earth v0.0.5

Install

npm install @zym-com/three-earth

or

yarn add @zym-com/three-earth

Basic Usage

Install

import ThreeEarth from "@zym-com/three-earth";
import "@zym-com/three-earth/dist/style.css";

function App() {
const options = {
    "configuration": {
        "earthRadius": 5,
        "earthGroupRotation": {
            "x": 0.5,
            "y": 2.8,
            "z": 0.1
        },
        "earthGroupSpeed": 0,
        "hoverStopRotate": true,
        "clickStopRotate": true,
        "fovNumber": 45,
        "nearNumber": 1,
        "farNumber": 10000,
        "AnimationReset": true,
        "cameraPositionNear": {
            "x": 0.5,
            "y": -2,
            "z": 20
        },
        "animationResetRun": false,
        "outputEncoding": true,
        "sceneBgcolor": "rgba(2, 9, 36,1)",
        "fogColor": "rgba(2, 9, 36,1)",
        "fogNearNumber": 200,
        "fogFarNumber": 10000,
        "enableDamping": true,
        "enableZoom": true,
        "enablePan": true,
        "scaleMinDistance": 5,
        "scaleMaxDistance": 400,
        "axesHelperConfig": false,
        "axesHelperSize": 10,
        "cameraHelperConfig": false,
        "progressShow": true,
        "progressBoxWidth": 80,
        "progressPosition": {
            "x": 50,
            "y": 50
        },
        "progressStrokeWidth": 10,
        "trailColor": "rgba(255,255,255,0.08)",
        "progressStrokeColor": {
            "startVal": "rgba(16,142,233,1)",
            "endVal": "rgba(16,142,233,1)",
            "direction": 180
        },
        "progressTextStyle": {
            "fontFamily": "Microsoft Yahei",
            "fontSize": 20,
            "color": "rgba(23,125,220,1)",
            "fontWeight": "bolder",
            "letterSpacing": 2,
            "lineHeight": 40,
            "fontStyle": "normal"
        },
        "progressPrefixText": "正在加载",
        "progressSuffixText": "%....",
        "progressDelayClose": 0,
        "clickEventOpen": true,
        "clickPotionsScale": 2,
        "clickPotionsTweenTime": 1000,
        "earthAutoVanish": false,
        "clickEarthVisible": 0,
        "clickEarthVisibleCallback": false,
        "cloudAnimate": true,
        "cloudSize": {
            "x": 50,
            "y": 45
        },
        "cloudImage": "./cloud/cloud.png",
        "cloudColor": "rgba(199,199,199,0.4)",
        "cloudNumber": 200,
        "cloudPosition": {
            "x": 0,
            "y": 0,
            "z": 200
        },
        "cloudPositionX": {
            "min": -100,
            "max": 100
        },
        "cloudPositionY": {
            "min": -100,
            "max": 100
        },
        "cloudPositionZ": {
            "min": -200,
            "max": 0
        },
        "cloudTweenTime": 3000,
        "cloudCompleteCallback": false,
        "backBtnSize": {
            "w": 80,
            "h": 50
        },
        "backBtnBgColorSelect": "solidBgColor",
        "backBtnBgColor": "rgba(247, 229, 27,0.6)",
        "backBtnAnamorphism": {
            "startVal": "rgba(255,68,68,1)",
            "endVal": "rgba(255,68,68,1)",
            "direction": 180
        },
        "backBtnImage": "",
        "backBtnRadius": 5,
        "backBtnOffset": {
            "x": 30,
            "y": 20
        },
        "backBtnText": "复位",
        "backBtnTextStyle": {
            "fontFamily": "Microsoft Yahei",
            "fontSize": 20,
            "color": "rgba(255,255,255,1)",
            "fontWeight": "normal",
            "letterSpacing": 2,
            "lineHeight": 0,
            "fontStyle": "normal"
        },
        "backBtnBorderStyle": "none",
        "backBtnBorderWidthName": 2,
        "backBtnBorderColor": "rgba(247, 229, 27,1)",
        "sceneAnimateSeries": [
            {
                "sceneAnimateCenter": {
                    "x": 5,
                    "y": -20,
                    "z": 200
                },
                "sceneAnimateSpeed": 2000
            },
            {
                "sceneAnimateCenter": {
                    "x": 0.5,
                    "y": -2,
                    "z": 20
                },
                "sceneAnimateSpeed": 2500
            }
        ],
        "sceneSeries": [
            {
                "sceneSeriesId": "1",
                "scenePositionStart": {
                    "x": 0,
                    "y": 0,
                    "z": 0
                },
                "scenePositionEnd": {
                    "x": 0,
                    "y": 0,
                    "z": 0
                },
                "sceneScale": {
                    "x": 1,
                    "y": 1,
                    "z": 1
                },
                "sceneTweenTime": 3000,
                "sceneDelayTime": 0
            }
        ],
        "sceneParamsBg": false,
        "fogParams": true,
        "eventConfig": true,
        "sceneResetConfig": false
    },
    "base": {
        "width": 1920,
        "height": 1080,
        "id": "main-1n4A4xh4",
        "show": true
    },
    "dataSource": [],
    "childrenComponent": [
        {
            "base": {
                "show": true,
                "name": "环境光",
                "description": "",
                "id": "child-ambientLight-unpA4xh2",
                "pkgname": "ambientLight"
            },
            "configuration": {
                "ambientLightColor": "rgba(255,255,255,1)",
                "ambientLightIntensity": 1.1
            },
            "dataSource": []
        },
        {
            "base": {
                "show": true,
                "name": "真实地球",
                "description": "",
                "id": "child-realEarth-unpA4xh2",
                "pkgname": "realEarth"
            },
            "configuration": {
                "proportion": 0,
                "bumpMapTexture": "./map/illumnation.jpg",
                "bumpScale": 0,
                "emissiveColor": "rgba(255,255,255,1)",
                "emissiveMap": "./map/illumnation.jpg",
                "emissiveIntensity": 0,
                "displacementScale": -1,
                "displacementBias": 0,
                "metalness": 0,
                "earthImageColor": "rgba(255,255,255,1)",
                "lightMapIntensity": 0,
                "earthImage": "./map/bump.png"
            },
            "dataSource": []
        }
    ],
   bindCallbackParams:(evenName: string, data: Record<string, any>) => void;
}

 return (
    <>
      <ThreeEarth {...options} />
    </>
  );
}