Skip to content
alyn
vibe-motion

Threejs Earth Render skill

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.

$npx skills add vibe-motion/skills --skill threejs-earth-render
View this skill on GitHubvibe-motion/skills/threejs-earth-render/SKILL.md
Pack stars
1,596
Pack installs
11k
Alyn Score
59/99
Updated
36 days ago
– views – installs via Alyn
Game development Frontend Video

Install Threejs Earth Render

Pick your agent. Every command is ready to paste.

$npx skills add vibe-motion/skills --skill threejs-earth-render

The open skills CLI detects your agents (Claude Code, Cursor, Codex and 70+ more) and installs to the right folder. Add -g to install globally.

01

Install it

Run the command above, or upload the folder in Claude.

02

Ask naturally

Describe the task. Your agent loads threejs-earth-render when the request matches its description.

03

Name it if needed

If it does not trigger, say “use the threejs-earth-render skill”. In Codex, type $threejs-earth-render.

The skill itself

SKILL.md

FolderGitHub

Three.js Earth Render

Workflow

  1. Use scripts/render_threejs_earth.py from this skill.
  2. Pass --workspace when the user specifies where the source checkout should live; otherwise use the current directory.
  3. Pass --output when the user specifies a GIF/MP4 path; otherwise use out/threejs-earth.gif.
  4. For customized routes, edit threejs-earth/src/routeConfig.js first and render with --skip-update so local edits are preserved.
  5. Run the script and wait for completion.
  6. 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

Tips for Threejs Earth Render

  • • Start a fresh session after installing so your agent picks up the new skill.
  • • This skill ships scripts. Read them before the first run, and run it in a project without secrets first.
  • • It bundles reference files. The agent reads them only when needed, so they cost no context until then.
  • • It is part of a pack with 15 skills. Install only the ones you need with --skill to keep triggers precise.
  • • If two skills overlap, mention the one you want by name.

Questions about Threejs Earth Render

What does the Threejs Earth Render skill do?

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.

How do I install Threejs Earth Render?

Run "npx skills add vibe-motion/skills --skill threejs-earth-render" in your project. The skills CLI installs it for Claude Code, Cursor, Codex and 70+ other agents. In Claude on the web, upload the skill folder as a ZIP under Customize > Skills.

Does Threejs Earth Render work in Cursor and Codex?

Yes. Threejs Earth Render uses the open SKILL.md format, so it works in Claude Code, Claude, Cursor, OpenAI Codex, Gemini CLI, GitHub Copilot and other agents that support agent skills.

Is Threejs Earth Render free?

Threejs Earth Render is open source on GitHub. It is free to install; check the license before commercial use.

Who made Threejs Earth Render?

Threejs Earth Render is published by vibe-motion in the vibe-motion/skills repository, together with 14 other skills.

Similar skills. From other creators.