threejs-earth-render

Three.js の地球レンダリング

ワークフロー

1. このスキルの scripts/render_threejs_earth.py を使用します。
2. ユーザーがソースのチェックアウト先を指定した場合は --workspace を渡します。指定がない場合は現在のディレクトリを使用します。
3. ユーザーが GIF／MP4 のパスを指定した場合は --output を渡します。指定がない場合は out/threejs-earth.gif を使用します。
4. カスタマイズしたルートを使用する場合は、まず threejs-earth/src/routeConfig.js を編集し、ローカルの変更が保持されるよう --skip-update を指定してレンダリングします。
5. スクリプトを実行し、完了するまで待ちます。
6. スクリプトが出力する最終的な絶対パスを返します。

コマンド

/usr/local/bin/python3 scripts/render_threejs_earth.py \
  --workspace "$(pwd)" \
  --output "$(pwd)/out/threejs-earth.gif"

インストール済みスキルの解決

ソースリポジトリのチェックアウトではなく、インストール済みのスキルのコピーを使用します。

skill_dir=""
for base in "${AGENTS_HOME:-$HOME/.agents}" "${CLAUDE_HOME:-$HOME/.claude}" "${CODEX_HOME:-$HOME/.codex}"; do
  if [ -d "$base/skills/threejs-earth-render" ]; then
    skill_dir="$base/skills/threejs-earth-render"
    break
  fi
done
[ -n "$skill_dir" ] || { echo "threejs-earth-render skill not found under ~/.agents, ~/.claude, or ~/.codex"; exit 1; }

/usr/local/bin/python3 "$skill_dir/scripts/render_threejs_earth.py" \
  --workspace "$(pwd)" \
  --output "$(pwd)/out/threejs-earth.gif"

動作

• リポジトリのソースは、デフォルトで https://github.com/vibe-motion/threejs-earth.git に固定されています。
• workspace/threejs-earth が存在する場合は再利用し、存在しない場合はクローンします。
• リポジトリがすでに存在する場合、--skip-update が指定されていなければ、対象ブランチをフェッチしてファストフォワードします。
• Three.js アプリはローカル HTTP サーバー経由で配信します。file:// で開かないでください。
• ブラウザベースの 3D シーンなので、Remotion ではなく Puppeteer を使用します。
• window.__SCENE_3D_EXPORT__.setFrame(frame) を使用して各フレームに移動し、フレームを個別に再現できるようにします。
• PNG の連番をキャプチャしてから、ffmpeg で .gif または .mp4 にエンコードします。
• デフォルトのレンダリングは幅 448 px、30 fps の GIF です。ネイティブ解像度の 2048 x 1152 でキャプチャするには --output-width 0 を使用します。

プロジェクトに関する注意事項

• デフォルトのルートは、src/routeConfig.js に設定された杭州からパリまでです。
• アプリは、--render-scale 1 では 2048 x 1152、--render-scale 2 では 4096 x 2304 の 16:9 シーンを書き出します。
• シーンでは Three.js の CDN インポートとローカルの高解像度地球テクスチャアセットを使用するため、初回読み込み時にはネットワークアクセスが必要です。

要件

• git
• node
• npm
• ffmpeg
• クローン／更新、CDN インポート、Puppeteer のインストールに必要なネットワークアクセス