live2D Cubism3 模型导入Hexo博客做看板娘

发表于 2024-02-22 更新于 2024-10-02 分类于技术分享 Waline：

上篇博客说到最近沉迷幻兽帕鲁，尤其是里面的疾旋鼬（兄弟你好香！！！太可爱啦！！！）突然想到Hexo可以插入live2D看板娘，因此博主就开始了尝试，下文中采用的live2d疾旋鼬模型来源是b站大佬可儿!分享的疾旋鼬模型，非商用！本博客未开放广告或打赏等盈利功能！

基础方法：hexo-helper-live2D

项目地址：github:hexo-helper-live2d

该方法比较简单，直接在博客目录npm安装即可，网上有大量的教程，这里贴上一些：

如果想替换别的看板娘，这个项目收录了大量可用模型：live2d-widget-models
特别的，在下面的进阶方法中，这些模型仍然可用

上述方法仅能得到一个简单的看板娘，如果想要获取更加智能（可爱）的疾旋鼬宝宝，比如光标位置和对应的发言，比如：

点击触发“兄弟别摸我”

鼠标移动触发导览提示

是不是很可爱，大佬早已为我们解决好了这些问题，这里采用的是stevenjoezhang大佬的Live2D Widget项目，我的操作如下，其中部分操作参考了没有秃头基因的燊的教程：

将大佬的项目git clone下来，并复制到主题的source目录，我的主题是next，因此项目应该复制到/themes/next/source/live2d-widget

1	git clone https://github.com/stevenjoezhang/live2d-widget.git

在主体文件的layout部分中找到head文件，并添加下面的代码
我的博客主题是hexo-next 8，对于低版本的next，在/themes/next/layout中的_layout.swig文件中找head部分，对于next8版本，head文件在/themes/next/layout/_layout.njk中

1	<script src="/live2d-widget/autoload.js"></script>

修改live2d-widget文件夹中autoload.js文件中的路径，包括初始的live2d_path和intWidget中的path

这里原作者提供的cdn已经失效！可以用Live2d Widget | Akilarの糖果屋中的cdn地址或没有秃头基因的燊的live2d_api，我下面提供的方法是自建api，注意，后续换模型操作必须基于自建api！

const live2d_path = "/live2d-widget/";

......
......

initWidget({
    waifuPath: live2d_path + "waifu-tips.json",
    //apiPath: "https://live2d.fghrsh.net/api/",
    cdnPath: "/live2d_api/"
});

到这里我们完成了前端的全部配置，下面需要建立后端api

git clone大佬的后端项目live2d_api，同样复制到主题的source目录（next应该复制到/themes/next/source/live2d_api）

1	git clone https://github.com/fghrsh/live2d_api.git

该项目自带有一些模型，上一个方法中提到的模型大多数也可以使用，增加模型需要将模型文件夹移动到/themes/next/source/live2d_api/model中，重命名模型的name.model.json文件为index.json，并在/themes/next/source/live2d_api/model_list.json文件中增加模型文件夹名称，更多分组操作可以参考项目github地址

clean generate deploy即可，然后就能看到可爱的看板娘了！

最终方法：pixi-live2d-display

通过上述进阶方法看到的看板娘是live2d_api自带，可以发现，模型文件的拓展名为.moc，在2019年后，Cubism2.1已不受再支持，现在更新版本的Cubism导出文件均为moc3，model3，我们在网上找到的大部分live2d模型都是.moc3格式

在live-widget这个前端项目中，解析live2d所采用的是live2dcubismcore.min.js，从2019年九月起，官方已经不再提供该版本 SDK 的下载，新的Cubism Core可以从官网下载

不同版本live2D内核框架非常复杂（SDK的js文件甚至是一行！！还使用了大量一个字母命名！！）幸运的是guansss大佬的pixi-live2d-display提供一个统一且简单的API，使可以从较高的层次来控制Live2D模型而无需了解其内部的工作原理，

借助这个项目，无需改变后端live2d_api，只需修改前端的live2d-widget为perqin的通用模型issue即可，具体方法如下

删去之前的live2d-widget文件夹，git clone这个版本，同样按照进阶操作中的方法修改autoload.js配置 > 实际上，也可以直接删去live2dcubismcore.min.js文件，并删掉autoload.js文件中加载的代码loadExternalResource(live2d_path + "live2d.min.js", "js"),，同时需要修改waifu-tips.js中对应的函数loadlive2d为loadlive2dPixi，后者为pixi-live2d-display这个项目提供，api有所不同，修改易出错，保险起见最好重新git clone
同样，在head文件（hexo-next8中的_layout.njk）中添加PixiJS和pixl-live2d-display依赖。例如，要支持所有版本的模型，则需要添加如下依赖：（这些依赖必须添加在头文件中的autoload之前，否则无法加载！）

<!-- PixiJS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.3.10/pixi.min.js"></script>
<!-- Live2D v2.1 -->
<script src="https://cdn.jsdelivr.net/gh/dylanNew/live2d/webgl/Live2D/lib/live2d.min.js"></script>
<!-- Live2D v3 -->
<script src="https://cubism.live2d.com/sdk-web/cubismcore/live2dcubismcore.min.js"></script>
<!-- pixi-live2d-display -->
<script src="https://cdn.jsdelivr.net/npm/pixi-live2d-display/dist/index.min.js"></script>

下面就可以在model文件中添加我们想要的模型拉，以疾旋鼬为例，下载b站大佬可儿!分享的疾旋鼬模型文件，该模型的配置文件为model.model3.json，同样修改为index.json，将文件夹重命名并放入/themes/next/source/live2d_api/model中，在/themes/next/source/live2d_api/model_list.json文件中增加模型文件夹名称即可！

完成上述全部步骤后，clean generate deploy，可爱的疾旋鼬宝宝就出现了！如果能获取其他可爱的live2d人物也可以使用哦！（注意不要侵犯版权！）

其他事项

本博客网站基于github page，本来加载速度就不快，疾旋鼬模型高达50M+的png图片让网站更加载不出来了。且博主并不会live2D的制作，并且获取的模型是导出后的非编辑版本，因此博主采用了最暴力的方法：直接压缩png图片！没想到这么奇怪的方法居然不影响模型文件的使用（？）
原模型看板娘有很多羞耻的话，可以在前端文件夹live2d-widget中的waifu-tips.js和waifu-tips,json文件中修改，~~改成更适合疾旋鼬的“兄弟！你好香！”就不羞耻了~~
由于浏览器内核等原因，原前端提供的部分功能（如飞机大战）可能无法使用，也可以在waifu-tips.js文件中修改，只需要删除对应的fa按钮并注释响应函数即可，例如：

document.body.insertAdjacentHTML("beforeend", `<div id="waifu">
        <div id="waifu-tips"></div>
        <canvas id="live2d"></canvas>
        <div id="waifu-tool">
            <span class="fa fa-lg fa-comment"></span>
            <span class="fa fa-lg fa-info-circle"></span>
            <span class="fa fa-lg fa-times"></span>
        </div>
    </div>`);
//注释了下面这些功能按钮
//		<span class="fa fa-lg fa-paper-plane"></span>
//		<span class="fa fa-lg fa-user-circle"></span>
//		<span class="fa fa-lg fa-street-view"></span>
//		<span class="fa fa-lg fa-camera-retro"></span>

document.querySelector("#waifu-tool .fa-comment").addEventListener("click", showHitokoto);
// 注释了一些功能对应函数
//		document.querySelector("#waifu-tool .fa-user-circle").addEventListener("click", loadOtherModel);
//		document.querySelector("#waifu-tool .fa-street-view").addEventListener("click", loadRandModel);

基础方法：hexo-helper-live2D

进阶方法：Live2D Widget

最终方法：pixi-live2d-display

其他事项