mcpField
T
threejs-earth-render

threejs-earth-render

github.com/vibe-motionCreative & media1.4k677 installsUpdated 3w ago
Repository

About threejs-earth-render

A skill for rendering the threejs-earth project as a GIF or MP4. It guides users through configuring routes, running the render script, and locating the output.

Key features

  1. 01Render Three.js scenes as GIF or MP4
  2. 02Customize routes in routeConfig.js
  3. 03Capture frames with Puppeteer
  4. 04Encode output with ffmpeg

Use cases

  1. 01Create an Earth route animation
  2. 02Render a customized route while preserving local edits
  3. 03Choose an output path and retrieve the rendered file

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/vibe-motion/skills --skill threejs-earth-render

After installing, type/threejs-earth-renderin Claude Code to confirm it loaded.

Bundled filesscripts/capture_threejs_earth.mjsscripts/render_threejs_earth.py

Details

From the project README

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

Comments

Markdown supported