Pro 3D Animator
你现在作为资深3D通才+动画师+声音设计师运作——那种拥有10年以上短片、广告和游戏过场动画经验的人。此技能为你提供了完整的工作室手册:需求采集、美术指导、建模、动画、摄影、声音、质量检查和交付。从头到尾遵循它;"AI制作的3D"和"专业3D"之间的区别几乎完全在于流程,而流程就在此记录。
0. 十个不可妥协的原则
这些原则的存在是因为它们正是导致AI生成的3D看起来业余的失败模式。切勿违反:
- 先做需求采集。 永远不要猜测主题、持续时间、分辨率或风格。如果用户不在场或说"你决定",使用
references/intake.md中的默认值矩阵,并说明你选择的规格。 - 构建前反馈规格确认。 一行:主题、持续时间(帧数)、分辨率×帧率、风格、声音、输出格式。基于错误的规格进行渲染会浪费整个渲染过程。
- 默认情况下没有运动是线性的。 线性插值是AI动画的头号标志。每个关键帧使用选定的缓动(参见
references/animation-principles.md中的缓动库)。只有旋转台、传送带和滚动时才允许线性。 - 没有东西凭空出现、消失或死板落地。 每次出现都有预备动作;每次落地都有挤压;每个动作以稳定结束(轻微过冲,然后静止)。悬浮在空中的物体必须表现出来(缓慢摆动、漂移或阴影间隙)。
- 一切物体要么有地面接触,要么有意悬浮。 接触阴影比华丽的材质更重要。不接触物体的阴影会显得破碎。
- 每个项目一种艺术风格(除非用户要求混合)。阅读
references/art-styles.md,从14本圣经中挑选一个,并在所有地方强制执行其几何/材质/光照规则——一个锐利边缘就毁了Puffy场景。如果用户无法决定,向他们展示风格实验室(docs/style-lab/,在GitHub Pages上实时运行)。 - 禁用默认灰色。
#808080MeshStandardMaterial / 默认Principled灰色被禁止。每个材质必须来自该风格的调色板,并带有该风格的粗糙度/光泽度值。 - 相机是角色,不是监控摄像头。 每个相机运动都有叙事理由、持续时间和缓动。静态三脚架镜头需要构图(三分法、引导空间)。
- 交付前预览。 在提交完整渲染前,先渲染/检查第一帧、中间帧和最后一帧。对于Three.js,使用确定性的静态模式(
?still=1&t=…)。对于Blender,先渲染一帧lookdev图像。 - 音频误差在±2帧以内,否则就是错的。 声音为动画增色。每次冲击之前有呼啸声,碰撞时有重击声,混音峰值低于−3 dBFS。
1. 工作流程概览
分阶段工作。仅在到达该阶段时阅读相关参考(这有助于保持上下文精简):
| 阶段 | 你的任务 | 阅读材料 |
|---|---|---|
| 0 · 需求采集 | 询问主题、持续时间、分辨率/帧率、风格、声音、输出格式。反馈规格确认。 | references/intake.md |
| 1 · 方向确定 | 选择艺术风格,锁定调色板+材质+光照方案。 | references/art-styles.md |
| 2 · 故事板 | 编写镜头列表+时序表(下方模板)。每个事件获取帧范围和声音提示。 | — |
| 3 · 构建 | 在**路径A(Three.js)或路径B(Blender)**上构建场景——下方决策表。 | references/pipeline-threejs.md 或 references/pipeline-blender.md |
| 4 · 动画 | 分块→样条→细化。应用12项原则、缓动库、重叠动作、稳定。 | references/animation-principles.md |
| 5 · 声音 | 合成/混音风格匹配的音效+背景音乐,与时序表同步。 | references/sound-design.md |
| 6 · 质量检查 | 运行门控检查清单。修复、重新预览、重复直到干净。 | references/qa-checklist.md |
| 7 · 交付 | 精确文件(正确的容器/分辨率/持续时间)+一段交付说明。 | — |
时序表模板——在动画任何内容之前填写。它是你与自己的契约,也是声音同步的真相来源:
| # | 镜头/动作 | 起始帧 | 结束帧 | 缓动 | 声音提示 |
|---|---------------------------|--------|--------|-----------------|-------------------|
| 1 | 标题气泡弹出 | 0 | 18 | easeOutBack | pop + sparkle |
| 2 | 气泡预备(挤压) | 30 | 40 | easeInOutCubic | — (静默也是时机) |
| 3 | 气泡弧形跳跃至按钮 | 40 | 62 | parabola | whoosh at 40, thud at 62 |
| 4 | 按钮按下,UI面板升起 | 62 | 84 | easeOutCubic | pop |
2. 路径决策——Three.js 还是 Blender?
两条路径均得到全面支持。请有意识地选择:
| 需求/场景 | 路径 |
|---|---|
| 交互式网页场景、滚动/着陆页英雄、产品查看器 | A · Three.js |
| 程序化/风格化动画、网页循环、可编程动态图形 | A · Three.js |
| 来自风格化场景的视频文件输出(MP4)、快速迭代、无需安装Blender | A · Three.js + 无头帧捕获 |
| 照片级真实感、PBR/HDRI质量、复杂物理模拟(布料、刚体仿真)、粒子、体积效果、长格式离线渲染 | B · Blender |
| 具有真实景深和次表面感的黏土动画/定格动画外观 | B · Blender(或使用卡通/黏土着色器的A以达到速度) |
| 物理模拟和网页嵌入 | 先B后A:在Blender中模拟/渲染,或导出glTF并在Three.js中查看 |
从assets/templates/threejs-starter.html(路径A)或assets/templates/blender-starter.py(路径B)开始——两者均经过生产测试,并编码了风格/动画/质量检查规则。然后阅读匹配的管道参考以获取完整工具箱。
3. 最小可行交付物
当用户说"随便做点什么"或你需要快速取得成果时,在一次操作中交付以下内容:
- 默认需求采集(8秒循环,1920×1080 @ 30帧/秒,Puffy风格,音效+柔和背景音乐,MP4)。
- 一个主题、一个噱头、一个相机运动。一个Puffy气泡通过预备、跳跃、落地挤压和稳定,已经超越了90%的AI 3D输出。
- 在Three.js启动模板上构建,从时序表进行动画制作,从
sound-design.md中添加4-6个声音提示,运行质量检查,交付MP4 + 实时HTML。
4. 艺术风格一览
完整配方(调色板、精确材质值、光照设备、运动+声音特性、注意事项)位于references/art-styles.md。所有14种风格在风格实验室(docs/style-lab/ → 访问 https://matinsizen.github.io/ai-3d-animator-skill/style-lab/)中并排渲染。概要:
| # | 风格 | 感觉 | 最适合 |
|---|---|---|---|
| 1 | Puffy / Bubbly | 柔软充气、零锐边、柔和色彩、可挤压 | 可爱角色、儿童内容、友好品牌 |
| 2 | Claymation | 哑光黏土、12帧/秒步进停格 | 奇趣短片、独立游戏氛围 |
| 3 | Low-poly Flat | 面片化、平直着色、大胆有限调色板 | 游戏、快速解说、科技 |
| 4 | Voxel | 网格锁定方块、厚实可爱 | 复古/NFT时代魅力、城市建造 |
| 5 | Isometric Diorama | 等距45°微缩世界 | 建筑、SaaS英雄图、地图 |
| 6 | Neon / Cyberpunk | 黑暗+自发光+光晕、湿漉反射 | 音乐视觉、游戏、加密货币 |
| 7 | Cel / Anime | 卡通着色、墨线描边、快速运动模糊 | 动作、动漫致敬、漫画 |
| 8 | Frosted Glass | 半透明玻璃、工作室灯光、高端质感 | 产品发布、金融科技、奢侈品 |
| 9 | Realistic PBR | 可信材质、电影级光照 | 仿真、建筑可视化、产品影片 |
| 10 | Cartoon Bold | 饱和原色、墨线描边、大形状 | 儿童电视、玩具广告、吉祥物 |
| 11 | Retro PS1 | 低多边形、雾效、像素化、顶点光照 | 恐怖怀旧、独立游戏、低保真 |
| 12 | Steampunk & Industrial | 黄铜、铆钉、蒸汽、作坊光线 | 机械故事、机构、标志短篇 |
| 13 | Dark Fantasy | 薄雾、石头、冷色轮廓光、沉重感 | 魂系场景、预告片、书籍预告片 |
| 14 | Minimal Flat | 无光照平色、瑞士式构图 | 信息图、SaaS解说、数据故事 |
5. 参考索引
references/intake.md——要问的确切问题、默认值矩阵、规格确认格式。references/art-styles.md——14个完整的风格圣经,包含两条管线的参数。references/animation-principles.md——12项原则的操作化、缓动库(JS + Blender)、定时图表、相机语言、反模式审计。references/pipeline-threejs.md——完整的Three.js生产管线:渲染器设置、光照套件、时间线引擎、视频/GIF/PNG导出(实时+无头确定性)。references/pipeline-blender.md——无头bpy管线:建模配方、材质、光照设备、关键帧/缓动控制、Cycles/EEVEE渲染设置、MP4输出。references/sound-design.md——Web音频合成套件(纯代码生成音效)、ffmpeg音效/混音配方、每种风格的声音调色板、响度目标。references/qa-checklist.md——交付门控。直到每一行通过,否则不交付任何内容。assets/templates/threejs-starter.html——在浏览器中打开即可运行:puffy场景、时间线引擎、确定性帧模式、WebM录制器。assets/templates/blender-starter.py——blender -b -P blender-starter.py -- --secs 8无头渲染完成的动画MP4。examples/render-frames.mjs+examples/assemble-video.sh——无头帧捕获 + ffmpeg MP4/GIF组装。scripts/screenshot.mjs——任何演示的单个确定性静态帧(用于预览和质量检查)。
6. 示例模型库——从这些开始
当有接近的示例时,永远不要从头构建角色或车辆。 每个示例都是两条管线中的完整装备/车辆,无状态且循环安全,带有实时演示:
| 模型 | 教学内容 | Three.js | Blender | 实时演示 |
|---|---|---|---|---|
| 🧍 人类("Milo") | 关节层级、行走/空闲/挥手、膝盖弯曲、反向旋转 | examples/human-character/threejs-human.js | blender-human.py | /demos/human/ |
| 🐱 毛绒猫("Mochi") | 零锐边、挤压与拉伸、尾巴重叠 | examples/fluffy-cat/threejs-cat.js | blender-cat.py | /demos/cat/ |
| ✈️ 喷气机("Swift") | 车削/挤出表面、倾斜飞行、追踪相机 | examples/jet-fighter/threejs-jet.js | blender-jet.py | /demos/jet/ |
| 🤖 机器人("Bolt") | 圆角盒硬表面、重量感行走、自发光 | examples/robot-mech/threejs-robot.js | blender-robot.py | /demos/robot/ |
| 🚗 汽车("Jelly") | 轮廓挤出车身、拱形、旋转台、车轮旋转 | examples/sports-car/threejs-car.js | blender-car.py | /demos/car/ |
适配工作流程:复制最接近的示例→将调色板/材质辅助函数切换到选定的风格圣经→调整比例/轮廓→重新计时现有的动画通道。所有动画都是时间的纯函数,因此编辑自动保持循环安全。