使用cobe创建3D地球可视化效果入门指南

使用cobe创建3D地球可视化效果入门指南

cobe 5kB WebGL globe lib. 项目地址: https://gitcode.com/gh_mirrors/co/cobe

什么是cobe

cobe是一个轻量级的JavaScript库，专门用于在网页中创建精美的3D地球可视化效果。它不依赖任何外部库或UI框架，采用纯JavaScript实现，可以轻松集成到任何Web应用中。

基本使用方法

准备工作

首先需要在HTML中创建一个canvas元素作为3D地球的渲染容器：

<canvas
  id="cobe"
  style="width: 500px; height: 500px"
  width="1000"
  height="1000"
></canvas>

这里设置了两个尺寸属性：

• style中的宽高决定canvas在页面中的显示大小
• width和height属性决定canvas的实际渲染分辨率

引入cobe库

最简单的方式是通过CDN直接引入：

<script type="module">
  import createGlobe from 'https://cdn.skypack.dev/cobe'
  
  // 初始化代码将放在这里
</script>

创建地球实例

使用createGlobe函数初始化地球：

let phi = 0
let canvas = document.getElementById("cobe")

const globe = createGlobe(canvas, {
  devicePixelRatio: 2,
  width: 1000,
  height: 1000,
  phi: 0,
  theta: 0,
  // 更多配置参数...
})

核心配置参数说明

1. 渲染参数：

   • devicePixelRatio: 设备像素比，影响渲染清晰度
   • width/height: 渲染分辨率

2. 视觉效果：

   • baseColor: 基础颜色(RGB数组)
   • glowColor: 发光颜色
   • diffuse: 漫反射强度
   • mapBrightness: 地图亮度

3. 标记点：

   • markers: 可以在地球上添加标记点
   • markerColor: 标记点颜色

4. 动画控制：

   • onRender: 每帧渲染回调函数，可用于实现旋转动画

实现自动旋转

通过修改phi值实现地球旋转效果：

onRender: (state) => {
  state.phi = phi
  phi += 0.01
}

在主流框架中使用

安装

可以通过包管理器安装cobe：

npm install cobe
# 或
yarn add cobe
# 或
pnpm add cobe

React示例

在React组件中使用：

import { useEffect, useRef } from 'react'
import createGlobe from 'cobe'

function GlobeComponent() {
  const canvasRef = useRef()

  useEffect(() => {
    let phi = 0
    const globe = createGlobe(canvasRef.current, {
      // 配置参数...
    })

    return () => globe.destroy()
  }, [])

  return <canvas ref={canvasRef} style={{ width: 500, height: 500 }} />
}

Vue 3示例

在Vue组件中使用：

<template>
  <canvas ref="canvas" style="width: 500px; height: 500px" />
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import createGlobe from 'cobe'

const canvas = ref(null)

onMounted(() => {
  let phi = 0
  const globe = createGlobe(canvas.value, {
    // 配置参数...
  })

  onUnmounted(() => globe.destroy())
})
</script>

Svelte示例

在Svelte组件中使用：

<script>
  import { onMount } from 'svelte'
  import createGlobe from 'cobe'
  
  let canvas
  let globe
  
  onMount(() => {
    let phi = 0
    globe = createGlobe(canvas, {
      // 配置参数...
    })
    
    return () => globe.destroy()
  })
</script>

<canvas bind:this={canvas} style="width: 500px; height: 500px" />

最佳实践

1. 性能优化：

   • 合理设置mapSamples值，平衡质量和性能
   • 在组件卸载时调用globe.destroy()释放资源

2. 响应式设计：

   • 监听窗口大小变化，调整canvas尺寸
   • 使用CSS而非直接设置style属性控制显示大小

3. 自定义效果：

   • 通过修改baseColor和glowColor创建不同主题
   • 利用markers属性添加自定义位置标记

cobe库提供了简单而强大的API，让开发者能够轻松创建引人注目的3D地球可视化效果，无论是简单的展示还是复杂的交互应用都能胜任。

cobe 5kB WebGL globe lib. 项目地址: https://gitcode.com/gh_mirrors/co/cobe