@zym-com/three-earth
v0.0.5
Published
3D地球
Downloads
48
Readme
Install
npm install @zym-com/three-earthor
yarn add @zym-com/three-earthBasic 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} />
</>
);
}