Cobe 輕量 WebGL 地球儀配置教學與 Vue 專案整合指南

為什麼選擇 COBE？

在網頁開發中，加入 3D 元素通常意味著要載入數百 KB 的庫（例如 Three.js）。但如果你只需要一個簡單、優雅且流暢的 3D 地球，COBE 絕對會讓你驚艷。

它是一個基於 WebGL 的輕量級地球儀庫，壓縮後的大小僅約 5KB。它不依賴於任何大型框架，性能極佳，且支援高度自定義。

實作展示 (Live Demo)

下面就是我在 Nuxt 3 裡實作的 COBE 地球儀，你可以嘗試用滑鼠拖動它：

官方展示 (Official Demo)

我認為官方做的非常厲害介面設計能力比我強太多了點這裡進入官網

如何在你的專案中使用？

1. 安裝套件

你可以使用 npm 或 pnpm 安裝：

bash

npm install cobe

2. 核心代碼實作

在 Vue 3 或 Nuxt 3 中，我們需要確保程式碼在客戶端執行（因為涉及 Canvas API）。

vue

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

const canvasRef = ref(null)

onMounted(() => {
  const globe = createGlobe(canvasRef.value, {
    devicePixelRatio: 2,
    width: 600 * 2,
    height: 600 * 2,
    phi: 0,
    theta: 0,
    dark: 1,
    diffuse: 1.2,
    mapSamples: 16000,
    mapBrightness: 6,
    baseColor: [0.3, 0.3, 0.3],
    markerColor: [233 / 255, 115 / 255, 40 / 255],
    glowColor: [1, 1, 1],
    markers: [
      { location: [25.0330, 121.5654], size: 0.1 }, // 標註台北
    ],
    onRender: (state) => {
      // 每一幀的旋轉邏輯
      state.phi += 0.005
    },
  })
})
</script>

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

核心配置說明

COBE 提供了豐富的參數讓你調整地球的外觀：

參數	說明	範例值
`dark`	背景明暗度	`0` (明亮) / `1` (黑暗)
`mapSamples`	地圖採樣點數量	愈高愈細緻，但也愈吃效能 (建議 `16000`)
`baseColor`	地球表面顏色	`[r, g, b]` 格式
`markerColor`	標記點顏色	`[r, g, b]` 格式
`markers`	地圖上的標註點	經緯度座標清單

個人心得

我非常喜歡 COBE 的設計哲學：只做一件事，並把它做到最好。

如果你只是想為你的 Landing Page 增加一點視覺上的「高級感」，或者像我一樣想在個人部落格展示一下所在地，COBE 的 CP 值真的非常高。它不像 Three.js 那樣有極高的學習曲線，幾行程式碼就能搞定。

小建議：在 Nuxt 中使用時，記得用 <ClientOnly> 包裹，否則會因為 SSR 找不到 window/canvas 而報錯喔！

相關連結：

本文地球儀實作參考自 COBE 官方範例並針對 Nuxt 3 進行組件化封裝。