Earth:ブラウザで回す 3D 地球儀,観測可能な宇宙まで

新しいプロジェクト Earth をオープンソース化しました。Google Earth 風の,フロントエンドだけで動く 3D 地球儀です。ドラッグで回転,スクロールでズーム,国をクリックすると飛んでいって国旗・人口・GDP・政体が見られます。トップバーからは宇宙スケールの階段を上って,月・太陽系・銀河系,そして観測可能な宇宙まで眺められます。オンラインデモ:earth.kim。

なぜ作ったか

欲しかったものは単純です。ブラウザを開いたらすぐ回せる地球儀があって,国をクリックするとその国の現状が見える——クライアントのインストールも,トークンの登録も,有料 API も不要,というもの。プロ向けの選択肢(たとえば Cesium)はこの用途には重すぎるので,軽量な部品で自分で組み立てました。

中身

国の情報:国をクリックすると,国の面積に応じた高度でカメラが滑らかに飛んでいきます。詳細パネルには国旗,二言語の名称と正式名称,首都,地域,面積,人口,言語,通貨,GDP(名目 + 一人当たり),発展度,政体を表示。Wikipedia の歴史要約も埋め込まれていて,言語設定に追従します。

データレイヤー:GDP 柱状レイヤーは全ての国の最新 GDP を柱の高さで立体表示(sqrt 正規化,色は世界銀行の所得グループ別)。国旗レイヤーは各国の位置に面積に応じたサイズで国旗を配置。航路レイヤーは世界の主要な海運貿易ルートを描きます——ハブ港で区切られたアニメーションの弧で,線の太さと色が輸送量を表します。各レイヤーは個別にオン・オフできます。

世界ランキング:GDP・輸出・輸入(World Bank のリアルタイムデータ)に加え,石油・天然ガス生産量の静的スナップショット。行をクリックするとその国へ直接飛びます。

タイムトラベルモード:7.5 億年前の超大陸ロディニアから現代まで,16 の地質時代の古地理を 3D で再現。タイムラインのドラッグと自動再生に対応しています(古地理図 © C.R. Scotese PALEOMAP Project)。大陸が漂流し,衝突し,また裂けていく様子を眺められます。

宇宙スケールの階段:トップバーで 5 段階のスケールを切り替えられ,各段に二言語の資料カードが付きます——地球(10⁷ m),月(10⁸ m,月面テクスチャ + アポロ/嫦娥/ルナの歴史的着陸地点 10 か所),太陽系(10¹³ m,軌道を公転する八つの惑星),銀河系(10²¹ m,5 万パーティクルのプロシージャル棒渦巻銀河,太陽系の位置といて座 A* を表示),観測可能な宇宙(10²⁷ m,銀河団とフィラメントの宇宙の大規模構造の点群)。

データの出どころ

すべて無料・API キー不要です。国の基礎情報は mledoze/countries(REST Countries の上流データセット)からビルド時に静的化して同梱——実行時のリクエストはゼロ。人口・GDP・貿易額は World Bank Open Data API から国をクリックした時にオンデマンドで取得し,localStorage に 30 日キャッシュ。国旗は flagcdn.com,国境データは Natural Earth 110m をアプリと一緒にセルフホスト,地球のテクスチャは three-globe 付属の NASA 素材,惑星と月のテクスチャは Solar System Scope(CC BY 4.0)です。

一つ落とし穴がありました。REST Countries v3.1 API は 2026 年に廃止された(新版は登録が必要)ため,このプロジェクトは実行時にそれへ依存せず,ビルド時に上流データセットを静的化する方式にしています。データの更新はスクリプトを一度回すだけです。

技術スタック

React 18 + TypeScript + Vite。3D は Three.js(globe.gl 経由)で,Cesium より桁違いに軽量,Ion トークン不要,国のポリゴン・フライトアニメーション・ホバー判定が最初から使えます。スタイルは Tailwind CSS v4,状態管理は Zustand,国際化は react-i18next(ブラウザ言語の自動検出 + localStorage 記憶,表示は中国語と英語の切り替え)。純フロントエンドで静的デプロイ可能,デスクトップは右パネル,モバイルは下部ドロワーです。

今後

国の検索,主要輸出品と資源のモジュール,複数国の比較,チャートによる可視化を予定しています。コードは github.com/tan-zhuo/earth にあります。ぜひ試して,issue をお寄せください。