cobejs

cobe.js — 軽量な WebGL 地球儀スキル

使用する場面

• ヒーローページや概要ページに「回転する地球儀」や位置マーカーを表示したい場合
• 小型で目的を絞った地球儀ライブラリが必要な場合（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 に合わせて拡大した width/height も設定します。
• リサイズ時に更新されない
  • 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();
});

ユーザーに確認すること

• 地球儀のサイズと配置（ヒーロー、セクション、カード）をどうしますか？
• マーカーの位置と色（ブランドに合わせたもの）はどうしますか？
• 必要なインタラクション（ドラッグして回転、または自動回転）はどのようなものですか？