mcpField
T
threejs-earth-render

threejs-earth-render

github.com/vibe-motion创意与媒体1.4k677 次安装3 周前更新
代码仓库

关于 threejs-earth-render

用于将 threejs-earth 项目渲染为 GIF 或 MP4 的技能，指导配置路线、运行脚本并获取输出文件。

主要功能

  1. 01将 Three.js 场景渲染为 GIF 或 MP4
  2. 02在 routeConfig.js 中自定义路线
  3. 03使用 Puppeteer 捕获帧
  4. 04使用 ffmpeg 编码输出

适用场景

  1. 01制作地球路线动画
  2. 02保留本地修改并渲染自定义路线
  3. 03指定输出路径并获取渲染文件

安装

复制下面的命令，在终端中运行。

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

安装后在 Claude Code 中输入/threejs-earth-render确认已加载。

附带文件scripts/capture_threejs_earth.mjsscripts/render_threejs_earth.py

详细介绍

Three.js 地球渲染

工作流

  1. 使用此技能中的 scripts/render_threejs_earth.py。
  2. 用户指定源代码检出目录时，传入 --workspace；否则使用当前目录。
  3. 用户指定 GIF/MP4 路径时，传入 --output；否则使用 out/threejs-earth.gif。
  4. 对于自定义路线，先编辑 threejs-earth/src/routeConfig.js，然后使用 --skip-update 渲染，以保留本地修改。
  5. 运行脚本并等待完成。
  6. 返回脚本打印的最终输出绝对路径。

命令

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

已安装技能的路径解析

使用已安装的技能副本，而不是源代码仓库检出目录：

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"

行为

  • 默认情况下，仓库源地址固定为 https://github.com/vibe-motion/threejs-earth.git。
  • 如果 workspace/threejs-earth 已存在，则复用；否则克隆仓库。
  • 如果仓库已存在，则获取目标分支并快进更新，除非传入 --skip-update。
  • 通过本地 HTTP 服务提供 Three.js 应用；不要使用 file:// 打开。
  • 使用 Puppeteer，而不是 Remotion，因为这是基于浏览器的 3D 场景。
  • 通过 window.__SCENE_3D_EXPORT__.setFrame(frame) 定位每一帧，确保帧可独立复现。
  • 捕获 PNG 帧序列，然后使用 ffmpeg 编码为 .gif 或 .mp4。
  • 默认渲染为宽 448 px、帧率 30 fps 的 GIF。使用 --output-width 0 可保留 2048 x 1152 的原始捕获尺寸。

项目说明

  • 默认路线为 src/routeConfig.js 中的杭州至巴黎。
  • 使用 --render-scale 1 时，应用会导出 2048 x 1152 的 16:9 场景；使用 --render-scale 2 时，则导出 4096 x 2304 的场景。
  • 场景使用 Three.js 的 CDN 导入和本地高分辨率地球纹理资源，因此首次加载时需要网络连接。

要求

  • git
  • node
  • npm
  • ffmpeg
  • 用于克隆/更新、CDN 导入和安装 Puppeteer 的网络连接

评论

支持 Markdown