3D 吉祥物手把手教程

包里有什么

| 文件 | 作用 | |---|---| | motion.json | 模板说明：引擎、入口、依赖、画幅、帧率、时长规则、预设列表 | | params.schema.json | 全部可替换参数，包括必填项、字数上限、默认值，以及缺省时会怎样 | | guide.json | 做一条新片子的步骤，以及每种动作怎么写 | | presets/demo.json | 演示参数：虚构花店品牌「Bloomly 花点」的下单教程，72 秒 | | src/ | 源码：render.mjs 是一键渲染，scene.js 负责每一帧的画面，timeline.js 负责排时间线，pet.js 是小宠物，browser.js 画浏览器，audio.mjs 合成音效和节拍，params.mjs 做参数校验 | | assets/ | 演示素材，每个文件的来源和授权都写在 asset-manifest.json 里 | | tests/ | 两份测试参数：stress-text.json 把所有文字写到字数上限、步骤加到 8 步；invalid.json 故意写错，用来确认校验能拦下 | | tools/ | 辅助脚本：生成 Bloomly 演示素材、做预览、生成素材清单和校验文件 | | previews/ | 预览：演示参数的封面、12 格联系表、720p 全长预览片 | | licenses/ | 授权说明和第三方授权全文 | | motion.lock.json | 验证过的依赖版本和运行环境 | | integrity.json | 包里每个文件的 sha256 |

快速开始

npm install                   # 安装 three、思源黑体网页字体、Playwright
npx playwright install chromium
node src/render.mjs presets/demo.json --check      # 只做校验和排版检查，几十秒出结果
node src/render.mjs presets/demo.json --still 5,30 # 先出两张静帧看看
node src/render.mjs presets/demo.json              # 正式出片，结果在 out/demo/demo.mp4

还需要系统里装好 FFmpeg 6 或更高版本。渲染用的是软件渲染（不需要显卡），4 核机器大约每秒 0.55 帧，一条 80 秒的片子大约要 75 分钟。中途断了，重跑同一条命令会跳过已经出好的帧。

每次出片会得到这些文件：

• <名字>.mp4：1920×1080、30fps，H.264 编码，AAC 48kHz 声音
• <名字>_屏幕文字.srt：屏幕上出现过的文字
• mix.wav 和 sfx.wav：混好的声音，以及只有音效的一轨
• timeline.json 和 check.json：排好的时间线，以及排版检查报告

换成自己的内容

这一节是简要版，完整说明在 guide.json。

1. 复制 presets/demo.json，改个名字。参数里的图片路径都相对于这个 JSON 文件。
2. 填写 brand（品牌名、网址、logo、字标、颜色）和 mascot（选和 logo 最像的身体形状，配上 logo 的颜色）。
3. 填写 intro，需要一张首页截图，再写上 logo 和主按钮在截图里的 [x, y, 宽, 高]。
4. 写 steps，每一步有一个大字标题，下面跟几个动作。动作坐标用那一刻屏幕上那张截图自己的像素坐标，模板会自动换算。
5. 写 outro，最后用 --check 和 --still 检查一遍，再正式出片。

可以用的动作有 11 种：

| 动作 | 效果 | |---|---| | browser | 打网址，网址放大，然后按回车 | | tap | 踩一下按钮，表示点击 | | type | 往输入框里打字 | | point | 指着某处，目标上出现脉冲圈 | | oops | 演示一个错误操作 | | reward | 弹出金币，小宠物接住 | | callout | 大字放大 | | slam | 大字砸下来，同时撒彩纸 | | cheer | 小宠物欢呼 | | screen | 换一张界面 | | wait | 停留一会儿 |

时长和画幅

• 固定横屏 16:9。宽度可以选 1280、1920、2560 或 3840，帧率可以选 24、25、30、50 或 60。
• 时长按「拍」来算：总拍数 = 开场 28 拍 + 每一步（标题 2.6 拍 + 各动作的拍数 + 0.4 拍）+ 片尾 14 拍。秒数 = 拍数 × 60 ÷ BPM。每种动作占几拍见 motion.json → duration。
• 平板屏幕是 16:10。截图比例不同的时候，screenFit: contain 会完整显示截图并在两边补底色，cover 会铺满并裁掉多出来的部分。