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

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

前言

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

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

让我们直接开始吧！

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

直接引用

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

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

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

<script>
  const cdnPath = 'https://cdn.jsdelivr.net/gh/dogxii/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 上。

手动部署

需要下载 Github 仓库文件到本地，这里可以下载原作者或者我的 其中一个：
- letere-gzj/live2d-widget-v3 原作者
- dogxii/live2d-widget-v3 我的（删除了无用文件）
下载完成后，将文件夹拖到本地，并修改 cdnPath 为相应路径（如 /live2d/，路径一定要以 / 结尾）

手动部署

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

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

自定义模型

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

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

视频封面

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

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

修改文件名（可选，英文看着不乱）
转换图片格式（可选，webp 格式图片体积最小，但会使模型细微变化？）
进行 1 ，2 修改需要同时更改 json 中内容，可以一键替换

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

{
  "scale": 1.9,
  "translate": {
    "x": 0.0,
    "y": -1.1
  }
}

进行修改

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

{
  ...
  "FileReferences": {
    ...,
    "Expressions": [
      {
        "Name": "表情名",
        "File": "表情文件路径"
      }
    ]
  }
}

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

{
  ...
  "FileReferences": {
    ...
    "Motions": {
      "Idle": [
        {
          "File": "动作文件路径"
        }
      ],
      "TapBody": [
        {
          "File": "动作文件路径"
        }
      ]
    }
  }
}

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

{
  "models": [["yumi", "fense", "Wariza", "tutu"]],
  "messages": [
    [
      "你好，我是yumi",
      "你好，我是fense",
      "你好，我是Wariza",
      "你好，我是草莓兔兔"
    ]
  ]
}

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

完成自定义模型，

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

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

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

自定义样式：waifu.css 文件，没什么好说的，可以自己对着改 =w=
自定义提示语：waifu-tips.json 文件，参照已有内容修改，支持 class，id 等

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

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

修改模型左右位置：waifu.css 文件中，把我注释掉的内容与right 内容替换。
有其他需要的可以评论区提问 =w=

上传部署 CDN

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

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

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

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

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

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

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

参考 dogxii/live2d-widget-v3：

https://cdn.jsdelivr.net/gh/dogxii/live2d-widget-v3@main/

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

（只是将 cdn 改为了 purge ）

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

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

= = 大功告成！

本文到此结束，

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

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

前言

直接引用

手动部署

自定义模型

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

上传部署 CDN

也可以看看

评论