threejs-earth-render — скилл для Claude Code: 3D-глобус в GIF
Клонирует репозиторий с Three.js Earth, рендерит анимацию маршрута по глобусу через Puppeteer и сохраняет GIF или MP4.
npx skills add vibe-motion/skills --skill threejs-earth-render -a claude-codeЧто делает threejs-earth-render
Скилл берёт готовое демо vibe-motion/threejs-earth и прогоняет его через скрипт scripts/render_threejs_earth.py. Скрипт клонирует репозиторий в рабочую папку (или обновляет уже скачанный), поднимает локальный HTTP-сервер и покадрово снимает сцену в PNG. Дальше ffmpeg собирает из кадров файл.
Кадры выставляются через window.__SCENE_3D_EXPORT__.setFrame(frame), поэтому каждый снимок воспроизводим отдельно. По умолчанию выходит GIF на 30 fps шириной 448 px; флаг --output-width 0 оставляет нативное разрешение 2048 на 1152. Маршрут по умолчанию — Ханчжоу–Париж, он лежит в src/routeConfig.js.
Свои маршруты правят именно в этом файле, а рендер запускают с --skip-update, иначе обновление репозитория затрёт правки. Для работы нужны git, node, npm и ffmpeg; без сети первый запуск не пройдёт — репозиторий надо склонировать, Three.js подтягивается с CDN, а Puppeteer ставится при сборке.
Какие задачи решает
- отрендерить анимацию перелёта по 3D-глобусу в файл
- получить покадровую PNG-последовательность сцены Three.js
- собрать GIF или MP4 из анимации маршрута
- поменять города маршрута и перерендерить без потери правок
- снять 3D-сцену в браузере с точным повторением кадров
Примеры запросов агенту
- Сделай рендер Three.js Earth в
out/earth.gif - Отрендери глобус с маршрутом из
src/routeConfig.jsбез обновления репозитория - Сними сцену в нативном разрешении и сохрани MP4
Как установить threejs-earth-render
1Через Skills CLI (Vercel)
npx skills add vibe-motion/skills --skill threejs-earth-render -a claude-code2Вручную: положить файлы
~/.claude/skills/threejs-earth-render/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/threejs-earth-render/
1Через Skills CLI (Vercel)
npx skills add vibe-motion/skills --skill threejs-earth-render -a codex2Вручную: положить файлы
.agents/skills/threejs-earth-render/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add vibe-motion/skills --skill threejs-earth-render -a cursor2Вручную: положить файлы
.cursor/skills/threejs-earth-render/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install vibe-motion/skills threejs-earth-render2Вручную: положить файлы
.github/skills/threejs-earth-render/SKILL.md1Через Skills CLI (Vercel)
npx skills add vibe-motion/skills --skill threejs-earth-render -a gemini-cli2Командой платформы
gemini skills install https://github.com/vibe-motion/skills --path threejs-earth-renderВручную: положить файлы
.devin/skills/threejs-earth-render/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add vibe-motion/skills --skill threejs-earth-render -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о threejs-earth-render
Как установить threejs-earth-render в Claude Code?
Выполните npx skills add vibe-motion/skills --skill threejs-earth-render -a claude-code. Скилл появится по пути ~/.claude/skills/threejs-earth-render/SKILL.md.
Что делает threejs-earth-render?
Клонирует или обновляет репозиторий threejs-earth, рендерит анимацию маршрута по глобусу через Puppeteer и кодирует результат в GIF или MP4 с помощью ffmpeg.
Что нужно, чтобы рендер прошёл?
git, node, npm, ffmpeg и доступ в сеть: без него не склонировать репозиторий, не подгрузить Three.js с CDN и не поставить Puppeteer.
