在vue中使用gio.js与three.js实现一个转动的地球

实现的效果是这样的：

屏幕截图 2021-04-22 140115.png 在vue中使用的话需要先安装两个npm 命令：

npm install giojs --save   //安装gio.js包
npm install three --save   //安装three.js包

在所需要用地球插件的页面写入结构：

<template>
  <div class="earth">
    <div id="globalArea" style="width: 800rem;height:800rem;"></div>
  </div>
</template>

注意：以上style的宽度可以根据自己需求来写
js部分：

mounted() {
    this.init();
  },
  methods: {
    init() {
      var GIO = require("giojs");
      var container = document.getElementById("globalArea");
      var controller = new GIO.Controller(container);
      controller.configure({
        color: {
          surface: "#1F88CF", //地球表面的颜色
          selected: "#0C3859", //选中国家的颜色
          halo: "#012f59", //光晕的颜色
        },
        brightness: {
          mentioned: 1, //被提及国家的亮度
          related: 1, //有关国家的亮度
          ocean: 1, //海洋的亮度
        },
      });
      controller.lightenMentioned(true);
      controller.setTransparentBackground(true); //设置背景色为透明色
      // 启用自动旋转功能，将转速设置为1（同时1也是默认的转速）
      controller.setAutoRotation(true, 1);
      controller.init();
    },
  },

以上为完整的实现一个转动地球的完整代码，样式可根据自己的需求去更改，下面配有官方文档地址