Communitygithub.com

nikisge/claude-motion-kit

在 HyperFrames 中通过 Three.js 实现真正的 3D 运动图形(产品镜头、金属、玻璃、景深、微距、变换或组装物体、镜头列表),或从 Blender 导入 3D 模型(Blender MCP、无头 Blender、glTF/GLB 导出)。触发词:3D、Produktfilm、Metall、Glas、Tiefenunschärfe、Bokeh、Three.js、Blender、GLB。

claude-motion-kit 是什么?

此技能提供一条完整的管道,用于在 HyperFrames 中创建真正的 3D 运动图形,支持两个主要工作流程。第一个工作流程使用 `hf3d` 工具,这是一个基于 Three.js 的 studio,可直接在 HyperFrames 项目内运行,无需外部渲染。它利用 Three.js r181 提供各种材质(拉丝金属、玻璃、软触感、陶瓷等)、相机刚体镜头列表(带景深控制)以及用于实例化、变形和组装的辅助工具(如 `Swarm`)。该工作流程经过实战测试,能高效渲染产品镜头、组装动画和 3D 文字。第二个工作流程通过 Blender MCP 或 headless Blender 实现,用于将 Blender 作为模型源使用。它旨在处理复杂模型(角色、车辆、建筑),并将其导出为 GLB,然后在 HyperFrames 中加载,由 hf3d 处理照明、摄影和合成。此管道专为 Claude Code、Cursor 和 Codex 等 AI 代理设计,涵盖常见陷阱,如根元素未设置 `data-no-timeline`、裸露金属缺乏环境、以及确保玻璃材质具有适当的前景结构。

兼容平台✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/nikisge/claude-motion-kit/tree/HEAD/motion-kit/skills/motion-3d

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

Motion 3D:HyperFrames 中的真正 3D(+ Blender 作为模型源)

根据目标,有两种方式:

目标方式状态
从基本形状制作产品/物体动画:旋转部件、滚花、玻璃、金属、光条、组装、3D 文字hf3d(HyperFrames 中的 Three.js 工作室,hf3d/)已投入实战测试
复杂模型(人物、车辆、建筑),无法从基本形状构建Blender 作为模型源 → GLB → hf3d未经测试,基于调研(2026 年 10 月)

原则:在 HyperFrames 中渲染(支持 seek,使用与其他部分相同的检查工具)。Blender 提供模型,而非最终影片。真正的 Blender 渲染(Cycles)则是另一个拥有自身渲染时间的独立项目。

方式 1:hf3d(Three.js 工作室)

cd projects/<name>/hf
bash <this-skill>/hf3d/install.sh . --template    # Three.js r181 + hf3d.js + 字体到 vendor/hf3d,模板作为 index.html
npx hyperframes lint
npx hyperframes snapshot --at 0.7,2,3.3 --describe false

包含的内容(API 及所有注意事项:hf3d/README.md):

  • createStudio:不依赖 HDR 文件的工作室环境,使用渐变背景而非纯黑,柔和阴影、景深、Bloom、颗粒/暗角、ACES 色调映射。studioLights(主光/轮廓光/补光)。
  • mat.*:拉丝/抛光金属、玻璃(透射 + 色散)、柔软触感、陶瓷、高光、自发光。
  • shotRig:镜头列表,包含开始/结束时间、路径、焦距(毫米)、对焦目标、Bokeh。条目 = 硬切,路径 = 运镜。
  • 辅助工具:lathe、knurl、roundedBox、ribbon、extrudeText、extrudeSVG、Swarm(实例化:变形、爆炸、组装)。
  • 示例:examples/rondo/index.html(10 个镜头,9.6 秒片长;渲染约 2 分钟,峰值内存约 1.8 GB,在 24 GB MacBook 上)。

五个最常见错误:

  1. 根元素未设置 data-no-timeline(如果没有 GSAP 时间线):Lint 错误,每次渲染等待时间变长。
  2. 金属没有环境贴图时呈现黑色。玻璃只有在前方有结构时效果才好。
  3. 对焦应放在具体物体上,而非画面中心。
  4. 运动模糊只能为整个镜头开启或关闭。
  5. 微距镜头下计算而非猜测:可见高度 = 2 · 距离 · tan(垂直视场角/2),50 mm 时垂直视场角 ≈ 22°。

方式 2:Blender 作为模型源(未经测试)

已验证的标准方式(截至 2026 年 10 月 19 日):ahujasid/mcp-for-blender(MIT 协议)。Blender 插件会打开一个本地服务器,Claude Code 通过 MCP 控制 Blender,也可以执行任意 Python 代码(execute_blender_code),并能查看视图进行自我检查。

uvx mcp-for-blender setup                 # 如果 uv 已安装:配置 Claude Code 并安装插件
# 手动方式:
claude mcp add blender uvx mcp-for-blender
uvx mcp-for-blender install-addon

之后在 Blender 中连接插件。制作影片的流程:

  1. 在 Blender 中构建或加载模型,单位使用米,合理设置原点。
  2. 导出为 GLB(bpy.ops.export_scene.gltf(filepath="model.glb", export_format="GLB")),纹理 ≤ 4096 像素。
  3. 在 hf3d 中加载:import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js"(位于 hf3d/vendor),在 ready Promise 中加载(loadAsync),必要时用 mat.* 替换材质。GLB 文件本地放入项目目录,渲染时无需网络获取。
  4. 摄像机、灯光和剪辑保持在 HyperFrames 中。

如果没有 MCP,也可以无头运行:blender -b -P build.py(脚本构建并导出模型)。-a 可以渲染动画为图片序列,如果需要在 Blender 中进行渲染。

已知的注意事项(根据 README,未经本人实测):uv 可能会使用 conda/pyenv 的 Python(UV_PYTHON_PREFERENCE=only-managed),插件必须保持运行,每次命令前需要保存(代码在 Blender 中未经检查直接运行),大型任务应分解为小步骤。渲染时间和内存请自行测试。

更多 Blender 方式:请参阅仓库根目录下的 RESOURCES.md。

Individual skills in this repo

This repo contains 4 individual skills — each has its own dedicated page.

相关技能