如果你正在找一個能替網站加上 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 真的很剛好。
