从零制作一只 Live2D 喵可莉

不依赖任何现成的博客「看板娘插件」，只用三个开源库 + 一份自写胶水层 + 一个自制模型。

工业化批量生产的食物，确实不会很好吃。不过，到处可见，也不贵。

时间2026.11.3，后面AI肯定越来越强，说不定以后一张图直接出项目，现在只能是半许愿，还得自己操作一部分。

第一部分：模型文件

图片 + 拆分 + 绑定动作，最难的一集，还好有两个项目已经可以做了，虽然效果不是很完美，但完全 OK。

首先，我们需要一个看板娘图片（image2.5 画的，有点瑕疵但问题不大）

使用 See-Through 一键拆分图层

See-Through：一键式图层拆分 PSD

https://github.com/shitagaki-lab/see-through

Github 上有贴心的说明：中国大陆用户可以使用魔搭社区 ModelScope 在线演示，目前完全免费，并且可以使用更高一点的分辨率。

https://modelscope.cn/studios/ljsabc/See-Through

魔搭上在线跑，多跑几次，有抽卡性质，得到几份 PSD 文件。挑一份效果最好的，主要看头发有没有分前后，图层全打开的情况下是否完整，个别不好的地方看看别的文件有没有好的，可以替换。然后手动调整图层顺序，主要是头发的图层位置。

使用 psd2live 导出 moc3 模型

PSD2Live（GPL-3.0，Kotlin 桌面应用）

项目介绍：输入分层 PSD，自动识别图层语义（支持中英日韩命名）、按连通域拆分左右部件、自动生成三角网格 + 头像、身体变形器链、五官参数、前后发物理，再自动生成 6 秒待机动作。

可以直接导出为L2D模型文件了。不过也可以稍微改一下。
右下栏参数-眼睛可以预览睁眼闭眼画面，我感觉闭眼的画面有点奇怪，在右上模型预设中，调了闭眼弧深。左边选择eyelash，画布左边工具栏的变换，调整闭眼位置。Eyewhite没找到调整方法，后面live2d中调整。
默认的看最左和最右感觉幅度过大，右上模型预设中，调整视线横移和视线纵移，拉到预设的50%位置。

导出后得到这么一堆文件：

model/
├── Nyakori.moc3                235 KB   核心网格数据，二进制，不碰
├── Nyakori.model3.json         1 KB     入口清单，下面细说
├── Nyakori.physics3.json      13 KB     头发摆动、果冻眼物理
├── Nyakori.cdi3.json           4 KB     参数/部件的中文显示名（调试用）
├── Nyakori.4096/
│   └── texture_00.png                   贴图，注意路径书写方式
├── Nyakori.idle.motion3.json  16 KB     待机动作（6 秒循环）
├── Nyakori.blink.motion3.json          眨眼
├── Nyakori.nod.motion3.json            点头
├── Nyakori.shake.motion3.json          摇头
└── Nyakori.{smile,sad,angry,surprised}.exp3.json   表情

使用 live2d微调模型

https://www.live2d.com/zh-CHS

都是P2DLive琢磨半天没找到修改的地方，只能在这里改了，大部分内容已经绑好了，只需要微调一些内容，打开cmo3文件。
左边的部件中找到耳朵，角色的耳朵默认绑脸部，猫耳娘需要修改到前发。点击ears检视面板中修改变形器-前发头部跟随。
mouse的参数-嘴部开合设置最小值为0.1，这样常态有一个嘴的效果，现在为0的时候几乎看不见。
iridis左右眼开合的地方，0.1处加关键帧，不透明度100%，0处加关键帧，不透明度0%。修正闭眼状态下残留了一条细线的问题。
eyewhite左右眼开合的九宫格都打上关键帧，主要调整眼睛上半部分都调到眉毛位置，上面下移了，下面也跟着下移一点。另外，和iridis一样，0.1处加关键帧，不透明度100%，0处加关键帧，不透明度0%，避免完全闭眼状态下，眉毛上残留一丝白色的线。

第二部分：网站实现

以往博客看板娘都是 L2Dwidget，不过是 Cubism2 时代的库，只认 .moc，而现在都是 .moc3，psd2live 也不能导出 .moc。但是不用慌，接下来交给 DEEPSEEK 就好了，写一个胶水层 JS 和 CSS 将 L2D 嵌入博客中。

# 1. PIXI.js 6.5.10（必须 6.x，7.x 会和 pixi-live2d-display 0.4 冲突）
curl -o lib/pixi.min.js \
  https://cdn.jsdelivr.net/npm/pixi.js@6.5.10/dist/browser/pixi.min.js

# 2. pixi-live2d-display 0.4.0 的 cubism4 打包（已内置 Cubism 4 框架）
curl -o lib/cubism4.min.js \
  https://cdn.jsdelivr.net/npm/pixi-live2d-display@0.4.0/dist/cubism4.min.js

# 3. Cubism Core —— 唯一不能从 CDN 随便拿的一个
#    必须去 Live2D 官网下载「Cubism SDK for Web」
#    https://www.live2d.com/download/cubism-sdk/
#    解压后在 Core/ 目录里，文件名 live2dcubismcore.min.js

┌─────────────────────────────────────────────┐
│  你的站点（一行 <script> 引入）                │
├─────────────────────────────────────────────┤
│  live2d.js  ← 自写胶水层（约 600 行）          │
│  live2d.css ← 自写样式（约 160 行）            │
├─────────────────────────────────────────────┤
│  pixi-live2d-display 0.4.0 (cubism4.min.js)  │  渲染调度、动作、physics
│  PIXI.js 6.5.10 (pixi.min.js)                │  WebGL 渲染引擎
│  Live2D Cubism Core (live2dcubismcore.min.js)│  解析 .moc3 的官方黑盒
├─────────────────────────────────────────────┤
│  模型文件 .moc3 + .model3.json + 贴图 ...      │  ← 第一部分做的模型文件
└─────────────────────────────────────────────┘

第三部分：部署

Typecho + Handsome

后台「开发者设置」：

「自定义 JavaScript」（导入 L2D 看板娘）：

<script src="/usr/live2d/live2d.js" async></script>

「自定义 CSS 添加」（关掉魔改 handsome 的看板娘）：

#kotori { display: none !important; }

第四部分：许可提醒