132 lines
3.4 KiB
Vue
132 lines
3.4 KiB
Vue
<template>
|
|
<div ref="globe"></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,
|
|
renderer: null,
|
|
scene: null,
|
|
camera: null,
|
|
arcsData: [...Array(20).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)
|
|
],
|
|
["#00acee", "#aceeff", "#00ffac", "#aaef3e"][
|
|
Math.round(Math.random() * 3)
|
|
],
|
|
],
|
|
})),
|
|
}
|
|
},
|
|
|
|
// computed: {
|
|
// labelsData() {
|
|
// const labelsData = []
|
|
// this.arcsData.forEach(
|
|
// ({ startLat, startLng, endLat, endLng, color }, linkIdx) =>
|
|
// [
|
|
// [startLat, startLng],
|
|
// [endLat, endLng],
|
|
// ].forEach(([lat, lng], edgeIdx) =>
|
|
// labelsData.push({
|
|
// lat,
|
|
// lng,
|
|
// color: color[edgeIdx],
|
|
// text: `${linkIdx} ${edgeIdx ? "tgt" : "src"}`,
|
|
// })
|
|
// )
|
|
// )
|
|
// return labelsData
|
|
// },
|
|
// },
|
|
|
|
mounted() {
|
|
this.init()
|
|
this.animate()
|
|
window.addEventListener(
|
|
"resize",
|
|
() => {
|
|
this.camera.aspect =
|
|
this.$refs.globe.clientWidth / this.$refs.globe.clientHeight
|
|
this.camera.updateProjectionMatrix()
|
|
this.renderer.setSize(
|
|
this.$refs.globe.clientWidth,
|
|
this.$refs.globe.clientHeight
|
|
)
|
|
},
|
|
false
|
|
)
|
|
},
|
|
|
|
methods: {
|
|
init() {
|
|
this.globe = new ThreeGlobe()
|
|
.globeImageUrl(texture)
|
|
.atmosphereColor("#aaaaaa")
|
|
// arcs layer
|
|
.arcsData(this.arcsData)
|
|
.arcColor("color")
|
|
.arcDashLength(1)
|
|
.arcDashGap(() => Math.random())
|
|
.arcStroke(1)
|
|
.arcDashInitialGap(() => Math.random() * 5)
|
|
.arcDashAnimateTime(2000)
|
|
// hex layer
|
|
.hexPolygonsData(geojson.features)
|
|
.hexPolygonResolution(3)
|
|
.hexPolygonMargin(0.5)
|
|
.hexPolygonColor(() => `#aaaaaa`)
|
|
// labels layer
|
|
// .labelsData(this.labelsData)
|
|
// .labelLat("lat")
|
|
// .labelLng("lng")
|
|
// .labelText("text")
|
|
// .labelColor("color")
|
|
// .labelSize(1.5)
|
|
// .labelDotRadius(0.5)
|
|
|
|
this.renderer = new THREE.WebGLRenderer({
|
|
alpha: true,
|
|
})
|
|
this.renderer.setSize(
|
|
this.$refs.globe.clientWidth,
|
|
this.$refs.globe.clientHeight
|
|
)
|
|
|
|
this.$refs.globe.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 =
|
|
this.$refs.globe.clientWidth / this.$refs.globe.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>
|