通過(guò)echarts實(shí)現(xiàn)自動(dòng)旋轉(zhuǎn)3D地球加衛(wèi)星環(huán)繞效果

一、依賴(lài)安裝

echarts安裝

npm install echarts

echarts-gl 安裝

npm install echarts-gl

使用

全部使用

import * as echarts from 'echarts';
import 'echarts-gl';

按需使用

import * as echarts from 'echarts/core';
import { Scatter3DChart } from 'echarts-gl/charts';
import { Grid3DComponent } from 'echarts-gl/components';

echarts.use([Scatter3DChart, Grid3DComponent]);

二、地球自轉(zhuǎn)實(shí)現(xiàn)

代碼如下：

globe: {
  show: true,
   globeRadius: 80,
   baseTexture: "img/world.jpg",
   heightTexture: "img/world.jpg",
   displacementScale: 0.04,
   environment: "img/starfield.jpg",
   shading: "realistic",
   realisticMaterial: {
     roughness: 0.9,
   },
   viewControl: {
     autoRotate: true,
     autoRotateAfterStill: 3,
     distance: 300,
     maxDistance: 800,
     damping: 0,
   },
   postEffect: {
     enable: true,
   },
   light: {
     main: {
       intensity: 5,
       shadow: true,
     },
     ambientCubemap: {
       texture: "img/pisa.hdr",
       diffuseIntensity: 0.2,
     },
   },
 }

三、衛(wèi)星圖標(biāo)實(shí)現(xiàn)

衛(wèi)星環(huán)繞效果通過(guò)scatter3D實(shí)現(xiàn)，將symbolSize設(shè)置為0，通過(guò)label-textStyle-backgroundColor-image設(shè)置衛(wèi)星圖片，代碼如下：

{
  type: "scatter3D",
    coordinateSystem: "globe",
    data: [[12, 14, 10]],
    symbolSize: 0,
    label: {
      show: true,
      position: "top",
      distance: -20,
      formatter(params) {
        return "衛(wèi)星";
      },

      textStyle: {
        color: "transparent",
        padding: [15, 20],
        backgroundColor: {
          image: "./img/weixing.png",
        },
      },
    }
  },
  {
    type: "scatter3D",
    coordinateSystem: "globe",
    data: [[12, 14, 10]],
    symbolSize: 0,
    label: {
      show: true,
      clickable: true,
      position: "bottom",
      distance: 0,
      formatter(params) {
        return "衛(wèi)星";
      },
      textStyle: {
        color: "yellow",
        padding: [15, 20],
        backgroundColor: "transparent",
      },
    },
  }

總結(jié)

衛(wèi)星伴隨地球自轉(zhuǎn)，缺點(diǎn)在于速度與地球相同，暫時(shí)未找到更好的替代方法。
完整代碼可進(jìn)github中下載：完整代碼
文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-585558.html

到了這里，關(guān)于Echarts實(shí)現(xiàn)3D地球加衛(wèi)星環(huán)繞效果的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！