cobejs

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

cobe.js — Lightweight WebGL Globe Skill

cobe.js — 轻量级WebGL地球Skill

When to use

适用场景

A “spinning globe” / location markers in hero or about pages
You want a small, focused globe lib (not full three.js)
Decorative + interactive (markers, rotation) with minimal setup

在首页横幅（Hero）或关于页面中添加“旋转地球”/位置标记
你需要一个小巧、专注的地球库（而非完整的three.js）
希望以最少的配置实现兼具装饰性与交互性的效果（标记、旋转）

Key APIs/patterns

核心API与使用模式

Core:

```
import createGlobe from "cobe"
```

const globe = createGlobe(canvas, { ...options, onRender(state) { ... } })

Important options (common):

```
devicePixelRatio
```
,
```
width
```
,
```
height
```
```
phi
```
,
```
theta
```
(rotation angles)
```
scale
```
,
```
dark
```
,
```
diffuse
```
```
baseColor
```
,
```
markerColor
```
,
```
glowColor
```

markers: [{ location: [lat, lon], size, color? }]

Lifecycle:
- ```
globe.toggle()
```
  pauses RAF
- ```
globe.destroy()
```
  removes instance

核心用法：

```
import createGlobe from "cobe"
```

const globe = createGlobe(canvas, { ...options, onRender(state) { ... } })

常用关键配置项：

```
devicePixelRatio
```
,
```
width
```
,
```
height
```
```
phi
```
,
```
theta
```
（旋转角度）
```
scale
```
,
```
dark
```
,
```
diffuse
```
```
baseColor
```
,
```
markerColor
```
,
```
glowColor
```

markers: [{ location: [lat, lon], size, color? }]

生命周期方法：
- ```
globe.toggle()
```
  ：暂停请求动画帧（RAF）
- ```
globe.destroy()
```
  ：销毁实例

Common pitfalls

常见问题

Canvas sizing mismatch
- Set CSS size AND set canvas
```
width/height
```
  scaled for DPR.
Not updating on resize
- Recompute width/height and recreate or update params.
Too high DPR on mobile
- Clamp DPR to 1–2.

Canvas尺寸不匹配
- 需同时设置CSS尺寸和根据设备像素比（DPR）缩放的Canvas
```
width/height
```
窗口大小变化时未更新
- 重新计算宽高并重建实例或更新参数
移动端DPR设置过高
- 将DPR限制在1-2之间

Quick recipe: responsive globe with markers

快速示例：带标记的响应式地球

import createGlobe from "cobe";

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

function setup() {
  const rect = canvas.getBoundingClientRect();
  const dpr = Math.min(window.devicePixelRatio, 2);
  canvas.width = Math.round(rect.width * dpr);
  canvas.height = Math.round(rect.height * dpr);

  const globe = createGlobe(canvas, {
    devicePixelRatio: dpr,
    width: canvas.width,
    height: canvas.height,
    phi: 0,
    theta: 0.2,
    dark: 0,
    diffuse: 1.2,
    scale: 1,
    mapSamples: 16000,
    mapBrightness: 6,
    baseColor: [0.2, 0.2, 0.25],
    glowColor: [1, 1, 1],
    markerColor: [0.8, 0.5, 1],
    markers: [{ location: [1.3521, 103.8198], size: 0.08 }],
    onRender: (state) => {
      state.phi = phi;
      phi += 0.01;
    },
  });

  return globe;
}

let globe = setup();
window.addEventListener("resize", () => {
  globe.destroy();
  globe = setup();
});

import createGlobe from "cobe";

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

function setup() {
  const rect = canvas.getBoundingClientRect();
  const dpr = Math.min(window.devicePixelRatio, 2);
  canvas.width = Math.round(rect.width * dpr);
  canvas.height = Math.round(rect.height * dpr);

  const globe = createGlobe(canvas, {
    devicePixelRatio: dpr,
    width: canvas.width,
    height: canvas.height,
    phi: 0,
    theta: 0.2,
    dark: 0,
    diffuse: 1.2,
    scale: 1,
    mapSamples: 16000,
    mapBrightness: 6,
    baseColor: [0.2, 0.2, 0.25],
    glowColor: [1, 1, 1],
    markerColor: [0.8, 0.5, 1],
    markers: [{ location: [1.3521, 103.8198], size: 0.08 }],
    onRender: (state) => {
      state.phi = phi;
      phi += 0.01;
    },
  });

  return globe;
}

let globe = setup();
window.addEventListener("resize", () => {
  globe.destroy();
  globe = setup();
});

What to ask the user

需向用户确认的问题

Globe size and placement (hero, section, card)?
Marker locations + colors (brand-aligned)?
Interaction needs (drag to rotate vs. ambient spin)?

地球的尺寸和放置位置（首页横幅、区块、卡片中）？
标记的位置和颜色（是否与品牌调性一致）？
交互需求（拖拽旋转还是自动缓慢旋转）？