3D 吉祥物手把手教程

3D 吉祥物手把手教程 · 动效模板

首页上的 logo 揭起来，变厚、长出手脚，变成一只 3D 小宠物。它跳进平板里的产品界面，一步一步演示操作：踩按钮、打字、指重点，出错时会缩一下。整片是横屏，没有配音，配背景音乐和音效，镜头全程跟拍。

这个模板是从作者自己的《教程第01集 注册登录 3D 版》v2 定稿抽出来的。开场 28 拍的编排、镜头、小宠物动作和字幕样式都和定稿一致，要替换的内容全部写在一份 JSON 参数里。

包里有什么

| 文件 | 作用 | |---|---| | 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 会铺满并裁掉多出来的部分。

文字放不下时会怎样

• 字幕：26 字以内用一行 50px。再长先缩到 40px，还放不下就自动拆成两行。
• 标题、网址放大、提示条、片尾：放不下时自动缩小字号。
• 导航条：先缩字号，再放不下就截断，末尾加省略号。
• 凡是自动调整过的文字都会记进 check.json。如果标了 overflow: true，说明缩到最小还是放不下，需要把文字改短。
• 选填的文字不填，对应的那块就不显示。比如不填网址，右上角的网址胶囊和片尾的网址条都不会出现。

验证记录（2026-10-25）

开发时用两套参数各完整渲染了一遍：一套是作者自己产品的真实素材（83.0 秒，124.5 BPM，5 步 28 个动作，用到 11 种动作里的 8 种）；另一套是虚构品牌 Bloomly。真实产品素材没有对外授权，公开包里只保留 Bloomly，结果见 previews/：

• 时长：72.3 秒，112 BPM，舒缓风格自带节拍
• Logo 和小宠物：圆形 + 花朵，青绿配橙
• 截图：首页和 6 张界面是 1440×900，付款页和成功页是 1280×960（4:3，用 contain 补边）
• 步骤和动作：4 步 16 个动作
• 排版检查：28 字的长字幕也能一行放下

另外做了两项测试：

• 文字压力测试（tests/stress-text.json）：所有文字都写到字数上限，步骤加到 8 步。测出两个问题，都已经修好：一是 8 步时导航条挤成 16px 小字，现在步骤放不下就改成紧凑导航，只显示「3 / 8」、当前步骤名和进度点；二是片尾的长标语会压到右边的小宠物，现在片尾文字限宽，放不下自动缩小。36 字的字幕会缩到 46px，仍然是一行；32 个字符的网址放大会缩到 84px。
• 错误参数测试（tests/invalid.json）：缺必填项、标题超字数、颜色写成 orange、动作类型写错，这几种都会被拦下，出片前逐条说明是哪个字段出了什么错。

不要这样用

• 不要把私人录屏、真实账号、手机号、二维码，或者无权再分发的音乐放进参数和素材。
• 成片 MP4 只是预览和交付物。想改内容就改参数、重新渲染，不要在成片上再叠字。