shuding/cobe

これは何？

主な機能

• 01依存関係なしで、canvas要素上にWebGL地球儀を描画します。
• 02地理座標にマーカーを配置し、地点間を弧で結びます。
• 03CSSアンカー配置を使い、任意のDOM要素をマーカーに紐付けられます。
• 04表示状態の変数を公開し、地球儀の裏側にあるラベルをCSSでフェードまたはぼかせます。
• 05onRenderコールバックでフレームごとの更新に対応します。

ユースケース

• ランディングページにサーバーや顧客の所在地を表示する。
• HTMLラベル付きの、イベントやオフィスのインタラクティブなマップを作成する。
• 都市間の弧でフライトやデータの経路を可視化する。

クイックスタート

1. 1

   HTMLページにcanvas要素を追加します

2. 2

   cobeからcreateGlobeをインポートし、オプションを指定してcanvas上で呼び出します

   import createGlobe from 'cobe'

使う前に知っておきたいこと

• !ブラウザーがWebGLに対応している必要があります。
• !地球儀の描画設定は単一のオプションオブジェクトを通じて行うため、パラメーターで指定できない独自のビジュアルには追加のコードが必要です。

トピック

よくある質問

cobe とは？

約5KB、依存関係なしで、任意のDOM要素をマーカーとして紐付けられるWebGL地球儀ライブラリ。 COBEは、canvas上にインタラクティブなWebGL地球儀を描画する小さなTypeScriptライブラリです。canvas要素と設定オブジェクトをcreateGlobeに渡すと、マーカーや2地点を結ぶ弧を含む地球儀を描画します。回転、色、ライティング、マーカーのサイズはオプションで制御でき、アニメーションフレームごとに実行されるonRenderコールバックも利用できます。

cobe は無料で使えますか？ライセンスは？

cobe は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。

cobe は今もメンテナンスされていますか？

活発にメンテナンス中。cobe の最終コミットは 2026年9月22日 です。

cobe は何に使えますか？

ランディングページにサーバーや顧客の所在地を表示する。 HTMLラベル付きの、イベントやオフィスのインタラクティブなマップを作成する。 都市間の弧でフライトやデータの経路を可視化する。

cobe のインストール方法は？

HTMLページにcanvas要素を追加します cobeからcreateGlobeをインポートし、オプションを指定してcanvas上で呼び出します: import createGlobe from 'cobe'

cobe はどこで入手できますか？

ソースコードとインストール手順は GitHub にあります：https://github.com/shuding/cobe