互動地球 Globe｜免費 React 元件

自轉可互動的 WebGL 風地球（GitHub 風），以 canvas 2D 點雲、弧線與大氣光暈模擬。

自轉的點雲地球，陸地由等距柱狀遮罩繪成，可用指標拖曳旋轉，並帶行進弧線與發光標記。純 canvas 2D 實作，不依賴 WebGL 或 three.js。

把這個效果裝進你的專案

在專案資料夾執行指令，CLI 會加入原始碼與依賴套件，再依下方使用範例引用元件。

npx webberui@latest add globe

Globe 是用 React 與 canvas 2D 繪製的 3D 地球元件（互動地球儀、點陣地球），陸地以點雲呈現，城市之間有帶行進脈衝的弧線；Motion 只用來偵測「減少動態效果」設定，渲染本身不依賴 WebGL 或 three.js。

Playground

即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。

地球直徑（px）size

300

自動旋轉autoRotate

自轉速度（弧度/秒）rotationSpeed

0.12

弧線數量arcCount

可拖曳旋轉interactive

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

編輯中的呼叫預設屬性

<Globe/>

    </div>
  );
}

完整範例包含預覽的排版與資料。先安裝元件，再把範例檔貼入你的專案。

適用情境

SaaS 或基礎設施產品首頁的「全球節點／資料中心」示意區
跨國團隊、客戶分佈或服務據點的視覺主圖
物流、跨境電商頁面用弧線暗示城市之間的往來
不適合：要在同一個畫面看到所有大洲與連線時，平面的 World Map 比較合適

安裝

npx webberui@latest add https://webberui.com/r/globe.json

或在 components.json 設定 registries 後，改用 @webberui/globe 安裝。

使用

import { Globe } from "@/components/ui/globe";

<Globe size={460} />

自訂配色與標記：

<Globe
  size={400}
  dotColor="#34d399"
  arcColor="#a7f3d0"
  arcCount={10}
  markers={[
    { lat: 25.03, lng: 121.56 },
    { lat: 37.77, lng: -122.42 },
  ]}
/>

範例

標出公司的服務據點

markers 有兩個以上時，弧線端點會從這些標記中隨機挑選，所以弧線只會出現在你列出的城市之間。

import { Globe } from "@/components/ui/globe";

const offices = [
  { lat: 25.03, lng: 121.56, size: 1.6 }, // 台北總部
  { lat: 35.68, lng: 139.69 }, // 東京
  { lat: 1.35, lng: 103.82 }, // 新加坡
  { lat: 37.77, lng: -122.42 }, // 舊金山
];

export function OfficesGlobe() {
  return <Globe size={420} markers={offices} arcCount={6} />;
}

靜止、不可拖曳的背景裝飾

關掉自轉與拖曳、把弧線設為 0，適合放在文字後面當不搶戲的背景。

<div className="relative overflow-hidden rounded-xl border p-10">
  <Globe
    size={520}
    autoRotate={false}
    interactive={false}
    arcCount={0}
    className="pointer-events-none absolute -right-32 -top-20 opacity-60"
  />
  <h2 className="relative text-2xl font-semibold">部署到 18 個地區</h2>
</div>

自訂品牌配色

四個顏色 props 都指定時，元件不再跟隨深淺主題切換。baseColor 與 glowColor 會經過明暗與透明度計算，請用 #rgb 或 #rrggbb 格式。

<Globe
  dotColor="#f59e0b"
  arcColor="#fde68a"
  baseColor="#1c1917"
  glowColor="#b45309"
  rotationSpeed={0.2}
/>

Props

Prop	型別	預設值	說明
`size`	`number`	`460`	地球直徑（px），容器為正方形並受 `max-w-full` 限制
`dotColor`	`string`	依主題	陸地點雲顏色
`arcColor`	`string`	依主題	弧線與行進脈衝顏色
`baseColor`	`string`	依主題	球體底色（海洋）
`glowColor`	`string`	依主題	大氣光暈顏色
`autoRotate`	`boolean`	`true`	是否自轉
`rotationSpeed`	`number`	`0.12`	自轉速度（弧度／秒）
`interactive`	`boolean`	`true`	是否可用指標拖曳旋轉
`arcCount`	`number`	`8`	隨機弧線數量，設 `0` 可關閉
`markers`	`GlobeMarker[]`	內建城市	高亮標記，型別為 `{ lat, lng, size? }`
`className`	`string`	—	透傳到容器

可及性

使用者系統開啟「減少動態效果」時，渲染一張靜態地球，不自轉、不播放弧線動畫
canvas 標記 aria-hidden，屬純裝飾層，不影響輔助科技朗讀
顏色未指定時跟隨深淺主題自動切換，也可用 --wb-globe-dark 觀察目前主題

常見問題

可以在 Next.js App Router 使用嗎？

可以。原始碼第一行已經有 "use client"，在 Server Component 的頁面裡直接 import 使用即可。Math.random 與 window.devicePixelRatio 都只在 effect 裡執行，不會造成 hydration 不一致。

放在長頁面裡會一直耗效能嗎？

不會。元件用 IntersectionObserver 偵測，捲出畫面就停止 requestAnimationFrame 迴圈，捲回來再接上；畫布解析度的 devicePixelRatio 上限為 2。

弧線可以指定起點和終點嗎？

不行。弧線端點是隨機挑選的：markers 有兩個以上時從標記中挑，否則從陸地點中挑。能控制的是弧線數量 arcCount 與標記位置。

顏色可以用 CSS 變數或 `rgb()` 嗎？

dotColor 與 arcColor 直接交給 canvas，任何 canvas 接受的顏色字串都可以；baseColor 與 glowColor 需要計算明暗，只解析 hex，其他格式會退回預設藍色。

需要哪些依賴？

motion、clsx 與 tailwind-merge，另外需要 @/lib/utils 的 cn 函式。不用 CLI 也可以，切到「手動」分頁照步驟複製原始碼即可。

Globe

把這個效果裝進你的專案

本頁目錄