無料GitHub で公開

threejs-earth-render

Clone or update https://github.com/vibe-motion/threejs-earth and render the Three.js Earth route animation with Puppeteer frame capture. Use when users ask for 三维地球航线动画, Three.js Earth, 地球飞线, globe route animation, or exporting an Earth GIF/MP4/PNG sequence.

vibe-motion/skills

インストール方法を見る

含まれるファイル（4）

SKILL.md2.8 KB
assets/earth.gif1.9 MB
scripts/capture_threejs_earth.mjs3.0 KB
scripts/render_threejs_earth.py11.5 KB

SKILL.md（原文）

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

Three.js Earth Render

Workflow

Use scripts/render_threejs_earth.py from this skill.
Pass --workspace when the user specifies where the source checkout should live; otherwise use the current directory.
Pass --output when the user specifies a GIF/MP4 path; otherwise use out/threejs-earth.gif.
For customized routes, edit threejs-earth/src/routeConfig.js first and render with --skip-update so local edits are preserved.
Run the script and wait for completion.
Return the final absolute output path printed by the script.

Command

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

Installed Skill Resolution

Use the installed skill copy, not the source repo checkout:

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"

Behavior

Repository source is fixed to https://github.com/vibe-motion/threejs-earth.git by default.
Reuse workspace/threejs-earth if it exists; otherwise clone it.
If the repo already exists, fetch and fast-forward the target branch unless --skip-update is passed.
Serve the Three.js app through a local HTTP server; do not open it with file://.
Use Puppeteer, not Remotion, because this is a browser-based 3D scene.
Seek each frame through window.__SCENE_3D_EXPORT__.setFrame(frame) so frames are independently reproducible.
Capture a PNG frame sequence, then encode .gif or .mp4 with ffmpeg.
Default render is a 30 fps GIF at 448 px wide. Use --output-width 0 to keep the native 2048 x 1152 capture.

Project Notes

Default route is Hangzhou to Paris in src/routeConfig.js.
The app exports a 16:9 scene at 2048 x 1152 for --render-scale 1 and 4096 x 2304 for --render-scale 2.
The scene uses CDN imports for Three.js and local high-resolution Earth texture assets, so network access is required on first load.

Requirements

git
node
npm
ffmpeg
network access for clone/update, CDN imports, and Puppeteer installation

レビュー

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

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

同じリポジトリのスキル

概要と使いどころ

3d-chladni-render

無料

Clone or update https://github.com/nolangz/3D-Chladni and export deterministic 3D Chladni particle motion as MP4 or transparent ProRes MOV. Use when users ask for 3D 克拉尼, 克拉尼粒子动画, Chladni motion, sound-reactive sand or cosmic-web visuals, audio-to-motion, music visualizer video, or rendering Dynamic Sand, Modal Sand, Cosmic Web, or Dynamic Cosmic.

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