发表更新Tech12 分钟读完 (大约1771个字)  次访问

在你的网站中加入 live2d 自定义看板娘

包括从下载网络 live2d 模型（moc3） 到 部署到网站上，并自定义配置。

前言

为什么需要一只 可可爱爱 的看板娘呢？

  • 好了 我刚刚回答完了 =w=

让我们直接开始吧！

参考文章：【Hugo】博客引入 moc3 类型的 live2d 模型

直接引用

看板娘，也就是网页 live2d模型 通过 js 实现，你可以在网页 html <body>结束前添加下面内容，

如果是静态生成类博客，如 hexo 等，需要添加在主题的 全局布局 中，以实现全页面引入。

（由于用的免费 jsdelivr cdn，初次打开会有较长加载时间）

html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<script>
  const cdnPath = "https://cdn.jsdelivr.net/gh/dogyyds/live2d-widget-v3@main/";
  const config = {
    // 资源路径
    path: {
      homePath: "/",
      modelPath: cdnPath + "/Resources/",
      cssPath: cdnPath + "/waifu.css",
      tipsJsonPath: cdnPath + "/waifu-tips.json",
      tipsJsPath: cdnPath + "/waifu-tips.js",
      live2dCorePath: cdnPath + "/Core/live2dcubismcore.js",
      live2dSdkPath: cdnPath + "/live2d-sdk.js",
    },
    // 工具栏
    tools: [
      "hitokoto",
      "asteroids",
      "express",
      "switch-model",
      "switch-texture",
      "photo",
      "info",
      "quit",
    ],
    // 模型拖拽
    drag: {
      enable: true,
      direction: ["x", "y"],
    },
    // 模型切换(order: 顺序切换，random: 随机切换)
    switchType: "order",
  };

  // 加载资源并初始化
  if (screen.width >= 768) {
    Promise.all([
      loadExternalResource(config.path.cssPath, "css"),
      loadExternalResource(config.path.live2dCorePath, "js"),
      loadExternalResource(config.path.live2dSdkPath, "js"),
      loadExternalResource(config.path.tipsJsPath, "js"),
    ]).then(() => {
      initWidget({
        waifuPath: config.path.tipsJsonPath,
        cdnPath: config.path.modelPath,
        tools: config.tools,
        dragEnable: config.drag.enable,
        dragDirection: config.drag.direction,
        switchType: config.switchType,
      });
    });
  }

  // 异步加载资源
  function loadExternalResource(url, type) {
    return new Promise((resolve, reject) => {
      let tag;
      if (type === "css") {
        tag = document.createElement("link");
        tag.rel = "stylesheet";
        tag.href = url;
      } else if (type === "js") {
        tag = document.createElement("script");
        tag.src = url;
      }
      if (tag) {
        tag.onload = () => resolve(url);
        tag.onerror = () => reject(url);
        document.head.appendChild(tag);
      }
    });
  }
</script>

这个只是引入 live2d模型 的 js 代码，

如果要修改模型文件，我们需要手动部署并修改代码中的 cdnPath 为自己的。

代码中的 cdnPath 为 jsdelivr cdn 代理的 Github 文件，本质还是存储在了 Github 上。

手动部署

  1. 需要下载 Github 仓库文件到本地，这里可以下载原作者或者我的 其中一个：
  2. 下载完成后，将文件夹拖到本地，并修改 cdnPath 为相应路径（如 /live2d/，路径一定要以 / 结尾）

手动部署

​ 这里用了一个 html 页面演示，你需要进行相应修改并测试能否运行。

  1. 运行成功后，我们接着就需要 自定义模型 + 上传 cdn（可选，也可部署在本地）了。

自定义模型

要自定义模型，当然需要先找模型了（需为 moc3 模型），这里我在 b 站另找了一个可爱的 草莓兔兔 模型。

视频链接（感谢 @赛博撸猫人 @糖糖锦鲤 大大提供的免费模型）

视频封面

需要的话，可在视频链接下载。

下载好后，我们对文件进行修改以适配

  1. 修改文件名（可选，英文看着不乱）

  2. 转换图片格式（可选，webp 格式图片体积最小，但会使模型细微变化？）

  3. 进行 1 ，2 修改需要同时更改 json 中内容，可以一键替换

  4. 添加 config.json 配置模型显示大小和位置

    config.json
    1
    2
    3
    4
    5
    6
    7
    {
      "scale": 1.9,
      "translate": {
        "x": 0.0,
        "y": -1.1
      }
    }

    进行修改

  5. 修改 xx.model3.json 文件，参照下面格式 适配表情（不知道怎么改，可参考其他模型配置）

    xx.model3.json
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    {
      ...
      "FileReferences": {
        ...,
        "Expressions": [
          {
            "Name": "表情名",
            "File": "表情文件路径"
          }
        ]
      }
    }

  6. 继续修改 xx.model3.json文件，配置动作。（动作包含两种 Idel：闲置动作，会一直从闲置动作数组中，随机选一个进行播放； TapBody：点击动作，当点击画布时，从点击动作数组中，随机选一个进行播放）

    xx.model3.json
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    {
      ...
      "FileReferences": {
        ...
        "Motions": {
          "Idle": [
            {
              "File": "动作文件路径"
            }
          ],
          "TapBody": [
            {
              "File": "动作文件路径"
            }
          ]
        }
      }
    }

OK，完成这几步，最后把 草莓兔兔 模型文件夹 导入 /live2d/Resources/model 里面，并修改 model_list.json 文件：

model_list.json
1
2
3
4
5
6
7
8
9
10
11
{
  "models": [["yumi", "fense", "Wariza", "tutu"]],
  "messages": [
    [
      "你好，我是yumi",
      "你好，我是fense",
      "你好，我是Wariza",
      "你好，我是草莓兔兔"
    ]
  ]
}

这里配置了多个模型，开始默认显示第一个，可自行修改顺序。

完成自定义模型，

（不过这个模型免费版默认有水印，需要手动点表情去除，有些难受QAQ）

完成

自定义样式 / 提示语 / 其他

除了修改模型，还可以修改 看板娘显示样式，看板娘提示语，工具栏等等。

  1. 自定义样式：waifu.css 文件，没什么好说的，可以自己对着改 =w=

  2. 自定义提示语：waifu-tips.json 文件，参照已有内容修改，支持 class，id 等

  3. 自定义工具栏：这个需要在引入的 <script> 中修改，注释掉不需要内容即可

    1
    2
    3
    ...
    tools: ["hitokoto", "asteroids", "express", "switch-model", "switch-texture", "photo", "info", "quit"]
    ...

  4. 修改模型左右位置：waifu.css 文件中，把我注释掉的内容与right 内容替换。

  5. 有其他需要的可以评论区提问 =w=

上传部署 CDN

由于主播很穷，所以还是用 jsdelivr 加速 Github 仓库内容。（其他 cdn 也可自行部署）

jsdelivr 是一个免费的全球加速 CDN，不知道的可以去搜索一下

最开始说了，最后要修改 cdnPath 为自己的，这里可以改为本地，

但如果有流量限制或带宽限制等原因，还是推荐把模型本体部署到 CDN 调用。

上传到 jsdelivr 很简单，只需要先把 刚刚修改后的 live2d 文件夹上传到 Github，

然后就可以用这个链接作为 cdnPath 了（注意后面的 /）：

url
1
https://cdn.jsdelivr.net/gh/{github用户名}/{仓库名}@{分支名}/

参考 dogyyds/live2d-widget-v3：

url
1
https://cdn.jsdelivr.net/gh/dogyyds/live2d-widget-v3@main/

注意：jsdelivr 缓存为 24 小时刷新，更改文件后想立即生效，需要访问链接手动刷新缓存：

（只是将 cdn 改为了 purge ）

url
1
https://purge.jsdelivr.net/gh/{github用户名}/{仓库名}@{分支名}/

最后将你的 cdnPath 改为这个路径，

= = 大功告成！

本文到此结束，

有问题或疑惑欢迎评论区指出，让我们下下期再见 👋（因为下一篇已经写完了）

在你的网站中加入 live2d 自定义看板娘

https://blog.dogxi.me/diy-website-live2d/

作者

Dogxi

发布于

2025-06-14

更新于

2025-06-20

许可协议

CC BY 4.0

#

喜欢这篇文章？打赏一下作者吧

评论

GitHub
微信二维码

归档

分类

目录

最新文章

最新评论

×