無料GitHub で公開

cobejs

Use when adding a lightweight interactive globe with cobe (canvas setup, markers, interaction, performance, integration with React/Next.js).

MengTo/Skills

インストール方法を見る

含まれるファイル（5）

SKILL.md2.2 KB
demo/index.html15.8 KB
demo/preview.jpg38.3 KB
demo/PROMPT.md1.7 KB
REFERENCES.md70 B

SKILL.md（原文）

インストールする前に、エージェントに与えられる指示の中身を確認できます。

cobe.js — Lightweight WebGL Globe 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

Key APIs/patterns

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

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.

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

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)?

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

ログインしてレビューを書く

同じリポジトリのスキル

概要と使いどころ

3d-cloth-material

無料

Build convincing woven cloth in Three.js, with a thread-level weave normal map, sheen and anisotropic highlights, folds that never stretch the texture, hems with thickness, stitches, seams, frayed edges, fold occlusion, dye and wear variation, and light passing through thin fabric. Use for linen, silk, wool, canvas, curtains, banners, cloaks, tablecloths, tapestries or any 3D drape that currently looks like a plastic sheet, a stretched texture, or a flat coloured plane.

日本語の概要は準備中です。原文の説明を表示しています。