# threejs-earth-render

Clones the Three.js Earth repo, renders a globe route animation with Puppeteer frame capture, and writes a GIF or MP4.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 653 installs · ★ 1395
- Author: vibe-motion
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/vibe-motion/skills/tree/HEAD/threejs-earth-render/SKILL.md
- Updated: 2026-10-05
- HTML: https://affpapa.org/en/nevibecode/skills/threejs-earth-render

## What it does

The skill drives the `vibe-motion/threejs-earth` demo through `scripts/render_threejs_earth.py`. That script pulls the repository into a workspace folder or fast-forwards an existing checkout, serves the app over local HTTP, and grabs each frame as a PNG. `ffmpeg` then turns the sequence into a single file.

Frame stepping goes through `window.__SCENE_3D_EXPORT__.setFrame(frame)`, so any still can be reproduced on its own. The starting output is a 30 fps GIF, 448 px wide; `--output-width 0` keeps the native 2048 by 1152 capture instead. Hangzhou to Paris is the shipped route, set in `src/routeConfig.js`.

Custom routes are edited in that same file, and the render has to run with `--skip-update` — otherwise the repo update wipes the changes. You need `git`, `node`, `npm` and `ffmpeg` on the machine. Network access matters too: the clone, the Three.js CDN imports and the Puppeteer install all depend on it.

## Requirements
- Works with: GitHub

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add vibe-motion/skills --skill threejs-earth-render -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/threejs-earth-render/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/threejs-earth-render/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add vibe-motion/skills --skill threejs-earth-render -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/threejs-earth-render/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add vibe-motion/skills --skill threejs-earth-render -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/threejs-earth-render/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install vibe-motion/skills threejs-earth-render
```

2. **Manually: put the files in place**
- File: `.github/skills/threejs-earth-render/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add vibe-motion/skills --skill threejs-earth-render -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/vibe-motion/skills --path threejs-earth-render
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/threejs-earth-render/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add vibe-motion/skills --skill threejs-earth-render -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/vibe-motion/skills/tree/HEAD/threejs-earth-render/SKILL.md

## When to use it
- render a flight-path animation on a 3D globe to a file
- capture a Three.js scene as a PNG frame sequence
- encode a globe route animation as GIF or MP4
- swap the route cities and re-render without losing the edits
- record a browser 3D scene with repeatable frames

## Example prompts
- Render Three.js Earth to `out/earth.gif`
- Render the globe using the route in `src/routeConfig.js` and skip the repo update
- Capture the scene at native resolution and save it as MP4

## Similar
- [orbit-card](https://affpapa.org/en/nevibecode/skills/orbit-card.md) — skill · 10000 installs
- [cad](https://affpapa.org/en/nevibecode/skills/cad.md) — skill · 14000 installs
- [step-parts](https://affpapa.org/en/nevibecode/skills/step-parts.md) — skill · 11200 installs
- [sdf](https://affpapa.org/en/nevibecode/skills/sdf.md) — skill · 10500 installs
- [urdf](https://affpapa.org/en/nevibecode/skills/urdf.md) — skill · 10500 installs
- [hatch-pet](https://affpapa.org/en/nevibecode/skills/hatch-pet.md) — skill · 3300 installs

From the same set: [vibe-motion/skills](https://affpapa.org/en/nevibecode/by/vibe-motion/skills.md) — 7 cards

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md