Cobe：輕量又漂亮的 3D 地球儀套件，替網站快速加入互動式 Globe 視覺

網址

2026-03-21 15:38:53

如果你正在找一個能替網站加上 3D 地球儀（globe）效果 的前端套件，Cobe 會是很值得注意的選擇。它不是地圖服務平台，也不是完整 GIS 框架，而是一個專注在 WebGL 地球儀視覺呈現 的輕量級函式庫。官方直接把它定位成 「5KB WebGL globe lib」，主打體積小、零相依、效能高，而且能用很簡單的方式在網頁上做出相當吸睛的地球旋轉效果。

Cobe 最吸引人的地方，在於它不是那種需要很重 3D 引擎知識才能上手的工具。你只要準備一個 canvas，再用 createGlobe() 傳入寬高、旋轉角度、地圖亮度、標記點與弧線等設定，就可以很快渲染出一顆可旋轉的地球。官方範例也直接展示了標記城市、繪製飛行路線、動態旋轉與互動效果，整體風格很適合科技產品首頁、數據視覺化頁面、全球服務版圖展示，或是任何想強化「國際化」視覺印象的網站。

從功能面來看，Cobe 的重點不是傳統地圖操作，而是 地球儀視覺元件。它支援：

markers：在指定經緯度上放標記點
arcs：在兩個地點之間畫出弧線連結
自動旋轉：透過 update() 或 onRender 持續更新 phi
可調視角與樣式：像是 theta、dark、diffuse、glowColor、scale
可綁定 DOM 標籤：官方特別提到可用 marker / arc 的 id 搭配 CSS Anchor Positioning，把標籤、tooltip 或其他 DOM 元件綁到地球上的點位。

我自己會把 Cobe 歸類成「小而美的展示型 3D 元件」。它不像完整地圖平台那樣強調圖資查詢、路徑演算或地理分析，而是把一件事做得很到位：讓網站用很低成本就能擁有一顆高質感的 3D 地球。尤其是現在很多 SaaS、AI 產品、雲端服務網站都喜歡用 globe 來呈現全球節點、跨區服務或資料流向，Cobe 這種輕量解法其實非常剛好。你不用搬出大型 3D 工具鏈，也不用先處理太多複雜概念，就能把主視覺做得很有科技感。

另一個很實用的點是，官方明確提到它可搭配各種框架使用，包含 React、Vue、Svelte 與原生 JavaScript。對前端工程師來說，這代表整合彈性很高，不管你是做品牌官網、產品頁、管理介面，還是互動式 Landing Page，都很容易塞進現有專案。createGlobe() 回傳的物件也提供了 update() 與 destroy() 方法，生命週期管理算是相當直覺。

Cobe 的幾個重點特色

超輕量：官方定位約 5KB，且強調 zero deps。
WebGL 地球儀渲染：專注在 globe，而不是通用 3D 引擎。
支援標記點與弧線：很適合做全球據點、航線、節點連線視覺。
可與 DOM 標籤整合：可把 HTML 標籤綁到 marker / arc。
框架友善：可用在 React、Vue、Svelte 與原生 JS。

初始化程式碼：最簡單的原生 JavaScript 版本

先安裝套件：

npm install cobe

HTML

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

JavaScript

import createGlobe from "cobe";

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

const globe = createGlobe(canvas, {
  devicePixelRatio: 2,
  width: 1000,
  height: 1000,
  phi: 0,
  theta: 0.2,
  dark: 0,
  diffuse: 1.2,
  scale: 1,
  mapSamples: 16000,
  mapBrightness: 6,
  baseColor: [0.9, 0.9, 0.9],
  markerColor: [0.2, 0.4, 1],
  glowColor: [1, 1, 1],
  offset: [0, 0],
  markers: [
    { location: [25.033, 121.5654], size: 0.05 },   // 台北
    { location: [35.6762, 139.6503], size: 0.05 },  // 東京
    { location: [37.7749, -122.4194], size: 0.05 }  // 舊金山
  ],
  arcs: [
    {
      from: [25.033, 121.5654],
      to: [35.6762, 139.6503]
    },
    {
      from: [25.033, 121.5654],
      to: [37.7749, -122.4194]
    }
  ],
  arcColor: [0.3, 0.5, 1],
  arcWidth: 0.5,
  arcHeight: 0.25,
  markerElevation: 0.02,
  onRender: (state) => {
    state.phi = phi;
    phi += 0.003; // 控制旋轉速度
  }
});

// 離開頁面或元件卸載時可呼叫
// globe.destroy();

這段做的事情很單純：建立一顆會慢慢旋轉的地球，並在台北、東京、舊金山加上標記點，再用弧線把台北連到其他城市。這種效果很適合當首頁 Hero 區塊。程式結構基本上也是依照官方 quick start 與 API 寫法延伸。

整體來看，Cobe 並不是傳統意義上的地圖工具，而更像是一個專注在 3D 地球展示 的小型視覺元件。它適合用在品牌首頁、全球服務版圖、互動式簡報頁，或任何想提升科技感與國際感的場景。對前端工程師而言，它最迷人的地方就是上手快、效果好，而且能和 React、Vue、Svelte 或原生 JavaScript 專案自然整合。想做 globe 效果但不想把專案搞得太重，Cobe 真的很剛好。