cobejs

name	cobejs
description	当需要用 cobe 添加一个轻量的交互式地球时使用（canvas 设置、标记点、交互、性能，以及与 React/Next.js 的集成）。

cobe.js — Lightweight WebGL Globe Skill

何时使用

• 主视觉或关于页里需要一个"旋转地球"/位置标记点
• 想要一个小巧、专注的地球库（而非完整的 three.js）
• 装饰性 + 交互性（标记点、旋转），且设置极简

关键 API/模式

• 核心：
  • 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() 移除实例

常见坑

• Canvas 尺寸不匹配
  • 设置 CSS 尺寸，并按 DPR 缩放设置 canvas 的 width/height。
• 未在 resize 时更新
  • 重新计算 width/height 并重建或更新参数。
• 移动端 DPR 过高
  • 把 DPR 钳制在 1–2。

快速配方：带标记点的响应式地球

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();
});

需要向用户询问什么

• 地球的尺寸和摆放位置（主视觉、区块、卡片）？
• 标记点位置 + 颜色（与品牌对齐）？
• 交互需求（拖拽旋转 vs. 环境自转）？