mcpField
M
map-route

map-route

github.com/artemnovitckii创意与媒体40412 次安装4 天前更新
代码仓库

关于 map-route

一项将目的地、出行时间和距离制作成风格化 3D 路线动画视频的技能。它通过无头 Chrome 中的 WebGL 渲染 MP4，并可通过复制模板自定义路线。

主要功能

  1. 01生成 3D 路线动画
  2. 02显示 ETA 和目的地卡片
  3. 03自定义地点标签、强调色和随机种子
  4. 04通过模板修改路线
  5. 05使用无头 Chrome 渲染 MP4

适用场景

  1. 01制作目的地路线动画短片
  2. 02准备地图风格的出行时间视频
  3. 03更改视频中显示的路线形状

安装

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

$npx skills add https://github.com/artemnovitckii/claude-animation-skills --skill map-route

安装后在 Claude Code 中输入/map-route确认已加载。

附带文件build.pytemplate.html

详细介绍

/map-route

┌──────────────────────┐
│ [▲ 9 min]            │  ETA card counts down, then "Arrived"
│      ┌Iron Yard Gym┐ │  destination card after the pin lands
│  ▒▒   ▒▒   📍  ▒▒    │  white 3D blocks, parks, a river
│  ▒▒ ━━━━━━━┛   ▒▒    │  the route draws itself, the camera rides along
│  ▒▒ ┃  ▒▒      ▒▒    │  and pulls back at the end
└──────────────────────┘

首次使用

此技能的文件夹就是 Claude Code 加载技能时显示的“Base directory”。

SKILL_DIR="<base directory of this skill>"
KIT=$(python3 -c 'import os,sys;print(os.path.realpath(os.path.join(sys.argv[1],"..","..","kit")))' "$SKILL_DIR")
[ -s "$KIT/node_modules/three/build/three.module.js" ] || bash "$KIT/setup.sh"

需要 ffmpeg 和 Node。它会在无头 Chrome 中使用 WebGL 渲染。

步骤

  1. 行程。 向用户询问目的地名称、所需分钟数和距离（例如“从家到健身房，2.8 km，9 分钟”）。如果用户只提供分钟数或距离中的一项，就估算另一项（步行约每公里 12 分钟，骑行约 4 分钟，市区驾车约 2 分钟），并说明这是估算值。
  2. 规格。 编写 <name>.map.json（见下文）。
  3. 构建。 运行 python3 "$SKILL_DIR/build.py" <spec.json>。3D 渲染约需 1.5 分钟，其中大部分时间用于等待 HyperFrames 中的 WebGL（出现 sub_timeline_readiness_timeout 警告属于正常情况）。先添加 --snap 3.8 检查最后一帧。
  4. 检查 画面：目的地卡片完整显示在屏幕上，街道标签不会压在预计到达时间卡片上。
  5. 交付 mp4 文件路径。

规格

{
  "destination": "Iron Yard Gym", "minutes": 9, "distance": 2.8, "unit": "km",
  "places": ["North Quay", "Botanic Gardens", "Market Hall", "Elm Park", "The Canal"],
  "accent": "#2f7cf6", "seed": 7
}
  • destination、minutes、distance：必填。unit："km" 或 "mi"。
  • places：地图上固定位置的 5 个小灰色标签。顺序依次为：起点附近、最左侧的公园、路线中段的街区、最右侧的公园、河流。使用符合用户所在城市的名称，也可以填写 "" 隐藏标签。这些只是装饰，并不代表真实地理位置。
  • accent：路线、移动点和预计到达时间图标的颜色（十六进制）。图钉始终为红色。
  • seed：使用不同的整数可以生成不同的建筑和公园布局。
  • hold（可选）：结尾额外停留的秒数。out（可选）：输出路径。

更改路线

路线形状固定为：向上、向右、向上、向右，终点为图钉所在位置。若要更改，请将 "$SKILL_DIR/template.html" 复制到规格文件所在目录，在副本中编辑 WP（[x, z] 坐标点；每个拐角都必须位于街道上，而街道沿 4 的倍数延伸；x 范围为 -36 到 36，z 范围为 -88 到 24，北方为负 z），并在规格中添加 "template": "template.html"。相机最终拉远的目标位置（new THREE.Vector3(3, 0, -27)）和标签位置（LBL）是按默认路线调整的，因此更改路线时也要相应移动它们，并使用 --snap 检查。

风格

  • 名称简短、听起来自然。目的地卡片最多可容纳约 26 个字符。
  • 保持简洁：一条路线、一个图钉，不要添加额外的箭头或标注。

评论

支持 Markdown