作者: Jared Liu
ライブで試す このプロジェクトについて
Planet Makerはブラウザで動くオフラインファーストの3D惑星エディターです。水星から月まで9つの天体から選ぶか、自分の2:1マップをアップロードして新しい惑星を作成。地形の起伏を造形し、雲と大気を調整して太陽の向きを決め、3Dオブジェクト、ピンマーカー、ビルボードテキストを球面に配置します。すべての要素が曲面に沿った向きで置かれます。
軽量なCC0モデルを20点同梱し、Tripoの制作入口も内蔵しています。Tripoでカスタムモデルを生成し、GLBをアップロードして球面をクリックするだけで配置できます。すべてのデータはブラウザ内に留まり、アカウントもバックエンドも不要。完成した惑星はPNGスナップショット、GLBシーン、再編集可能な.planet.jsonプロジェクトとして書き出せます。PWAとしてインストールし、オフラインライブラリをダウンロードすれば、接続なしでも制作を続けられます。
体験ポイント
- 水星から月まで9つの天体から選ぶか、任意の画像をアップロード。ローカルで2:1の正距円筒図法サーフェスマップに切り抜きます
- 表面の起伏、粗さ、雲、大気、自動回転、太陽の向きをすべてスライダーで調整できます
- 20点のCC0モデルを内蔵。Tripoでカスタムモデルを生成し、GLBをアップロードして球面をクリックすれば、常に表面に沿った向きで配置されます
- PNGスナップショット、GLBシーン、再編集可能な.planet.jsonプロジェクトをワンクリックで書き出せます。PWAとしてインストールすれば、完全オフラインで制作を続けられます
技術解説
GLBオブジェクトパイプライン · Tripoの出力をそのまま球面へ
オブジェクトパネルにはTripoの制作入口を内蔵。Tripoでカスタムモデルを生成してGLBをアップロードするだけで使えます。すべてのGLB（同梱の20点のCC0アセットを含む）は、まずBox3バウンディングボックスで正規化されます。中心を合わせ、底面を原点に固定し、最長辺を基準に均一スケーリングします。配置時には球面座標を位置とクォータニオンへ変換するため、どの緯度でもワンクリックで地表にぴったり接地します。
惑星レンダリング · 1枚のテクスチャと物理ベースマテリアル
惑星全体を1枚の2:1マップで描画します。meshPhysicalMaterialが同じ画像をカラーマップとバンプマップの両方に使い、bumpScaleが起伏スライダーになります。雲はalphaMap付きの別シェル（金星だけは不透明の特別仕様）、大気は加算合成のBackSide発光シェル、土星にはringGeometryを追加。太陽の方位角と高度で平行光源を動かし、影も追従します。
カスタム表面 · すべてローカルで処理
アップロード画像がサーバーへ送られることはありません。createImageBitmapで読み込み、中央から2:1に切り抜いて幅を2048px以下に抑え、canvasでwebpへエンコードしてlocalStorageに保存します。アップロードしたカスタムGLBはメモリ上のobjectURLを使い、意図的にプロジェクトJSONには含めません。アカウントもバックエンドもなく、プロジェクトはブラウザデータとして保存されます。
パフォーマンスとオフライン対応 · オンデマンドレンダリング + PWA
frameloopは必要なときだけ動作します。自動回転を切るとdemandモードへ移行し、タブが非表示になると完全に停止。負荷が高いときはdprも自動で下げます。vite-plugin-pwaがアプリシェルと初期アセットを事前キャッシュし、書き出しパネルの「オフラインライブラリをダウンロード」で9つの惑星と20点のモデルをすべてキャッシュ。接続がなくても惑星制作を続けられます。
