refactor: init packages

components/app/Globe.vue

@@ -0,0 +1,82 @@
+<template>
+  <div id="globe" class="w-full"></div>
+</template>
+
+<script>
+import ThreeGlobe from "three-globe"
+import * as THREE from "three"
+import geojson from "~/assets/geojson/ne_110m_admin_0_countries.geojson"
+import texture from "~/assets/images/texture.png"
+
+export default {
+  data() {
+    return {
+      globe: null,
+      cube: null,
+      renderer: null,
+      scene: null,
+      camera: null,
+      tbControls: null,
+      arcsData: [...Array(40).keys()].map(() => ({
+        startLat: (Math.random() - 0.5) * 180,
+        startLng: (Math.random() - 0.5) * 360,
+        endLat: (Math.random() - 0.5) * 180,
+        endLng: (Math.random() - 0.5) * 360,
+        color: ["#00acee", "#aceeff", "#00ffac", "#aaef3e"][
+          Math.round(Math.random() * 3)
+        ],
+      })),
+    }
+  },
+
+  mounted() {
+    this.init()
+    this.animate()
+  },
+
+  methods: {
+    init() {
+      const container = document.getElementById("globe")
+
+      this.globe = new ThreeGlobe()
+        .globeImageUrl(texture)
+        .atmosphereColor("#aaaaaa")
+        .arcsData(this.arcsData)
+        .arcColor("color")
+        .arcDashLength(1)
+        .arcDashGap(5)
+        .arcStroke(1)
+        .arcDashInitialGap(() => Math.random() * 5)
+        .arcDashAnimateTime(2000)
+        .hexPolygonsData(geojson.features)
+        .hexPolygonResolution(3)
+        .hexPolygonMargin(0.5)
+        .hexPolygonColor(() => `#aaaaaa`)
+
+      this.renderer = new THREE.WebGLRenderer({
+        alpha: true,
+      })
+      this.renderer.setSize(container.clientWidth, container.clientHeight)
+
+      container.appendChild(this.renderer.domElement)
+
+      this.scene = new THREE.Scene()
+      this.scene.background = null
+      this.scene.add(this.globe)
+      this.scene.add(new THREE.AmbientLight(0xffffff))
+      this.scene.add(new THREE.DirectionalLight(0xffffff, 0.8))
+
+      this.camera = new THREE.PerspectiveCamera()
+      this.camera.aspect = container.clientWidth / container.clientHeight
+      this.camera.updateProjectionMatrix()
+      this.camera.position.z = 300
+    },
+
+    animate() {
+      this.renderer.render(this.scene, this.camera)
+      requestAnimationFrame(this.animate)
+      this.globe.rotation.y -= 0.005
+    },
+  },
+}
+</script>

layouts/default.vue

@@ -117,12 +117,3 @@ export default {
   },
 }
 </script>
-
-<style lang="scss" scoped>
-.splitpanes--vertical > .splitpanes__splitter {
-  display: none;
-}
-.splitpanes--horizontal > .splitpanes__splitter {
-  display: none;
-}
-</style>