把自己 oc 的 live2d 看板娘展示在网页上～

2025-02-23codinglive2dblog

起

最近在逛米画师时，刷到了一个 Q版 live2d 很便宜，随即马上下单，把咱的一只 oc 做成了 live2d 小人～

等了几天终于成功收到成品一只。

在 mac 上和在手机上呢，一般都是用 Live2DViewerEX 来进行展示的，官方软件不需要做一些额外适配。

但是想把它展示到博客上，还是需要费一些力气的。

使用的库

在 github 上简单搜了一下，star 最多的是这个项目 live2d-widget。

但看了一眼它的文档，比较简陋，像是一个玩具，把从各个地方下载的 live2d 给塞到自己的博客上，而不是把自己已有的 live2d 呈现到网页上的工具。

比如不支持挂载到指定容器（没找到哪里有配置），加了很多官方模型之外的东西，比如对话文案，以及需要后端 api 服务。

最重要的是，画师给到我的 live2d 是 *.model3.json，试了一下这个项目，直接报错不能加载。

这才让我注意到对应的版本是 v3 版本，这个项目并不支持该版本，再次吐槽，这个项目文档里都没有标识兼容性，真的很不专业。

又找了几个相关的库，最后使用的是这个 pixi-live2d-display 文档比较清晰明了。

有一个对应的展示的 demo:

pixi-live2d-display 支持多个版本的 live2d，包括 Cubism 2.1, Cubism 3 and Cubism 4，其中 Cubism 4 完全兼容 Cubism 3 模型。

但是它需要首先加载官方模型 Cubism 的 SDK，以及渲染层 pixi.js，才能加载 pixi-live2d-display。

那就让我们开始吧～

live2d

因为我只需要展示 v3 版本的模型，所以只需要加载 cubism4.min.js 和 pixi.js 即可

<script src="https://cubism.live2d.com/sdk-web/cubismcore/live2dcubismcore.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/pixi.js@6.5.2/dist/browser/pixi.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/pixi-live2d-display/dist/cubism4.min.js"></script>
const app = new PIXI.Application({
  view: document.getElementById("canvas1"),
  autoStart: true,
  backgroundAlpha: 0, // 背景透明度（0为完全透明）
  transparent: true, // 启用透明通道（兼容旧版本）
  width: 800,
  height: 436,
});

const model = await PIXI.live2d.Live2DModel.from(modelUrl);

app.stage.addChild(model);

model.scale.set(0.25);
model.anchor.set(0.5, 0.5)

model.x = 400;
model.y = 150;

当当当当，闪亮亮相。

但似乎看起来有点糊，因为一般高清屏幕的需要设置更高的分辨率。

比如在 window.devicePixelRatio 为 2 的时候，用 1600 宽度的画布缩小到 800px 来展示。

const app = new PIXI.Application({
  ...,
  resolution: window.devicePixelRatio || 1,
});

接着让它可以点击切换表情～ 在点击时切换随机表情

model.interactive = true; // 启用交互
model.buttonMode = true; // 显示指针手型

const resetExperssion = () => {
  model.internalModel.motionManager.expressionManager.resetExpression();
  model.internalModel.motionManager.expressionManager.currentExpression =
    model.internalModel.motionManager.expressionManager.defaultExpression;
};

let resetExperssionTimeId = -1;

model.on("pointerdown", () => {
  model.internalModel.motionManager.expressionManager.setRandomExpression();
  clearTimeout(resetExperssionTimeId);
  resetExperssionTimeId = setTimeout(() => {
    resetExperssion();
  }, 1000);
});

在切换表情这里面还是有一点点坑的，比如在调用了内置的 resetExpression 方法后，再调用 setExpression 就会失效，因为内部方法只把当前表情改成默认表情，没有更新内部维护的 currentExpression 变量，导致再恢复之前的表情时，判断与 currentExpression 相同就不能触发更新。

感觉可以提个 mr，但这个库上次提交也是两年前了，摊手.jpg

https://github.com/guansss/pixi-live2d-display/pull/170

点赞 0