这边选用的是letere-gzj/live2d-widget-v3: live2d-wdiget适配moc3模型(不适配moc模型)的项目,下载好放置在当前主题下面即可。在我们的主题网站下找到head.php或者是foot.php文件拷贝下面代码复制,这样就实现了本地部署看板娘
<script>
const cdnPath = '/wordpress2/wp-content/themes/你的主题名称/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({
homePath: config.path.homePath,
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示例数据集 (可免费下载) | Live2D Cubism下载模型,也可以在github、b站上去搜索live2d模型。下载解压好后需要将文件放入到live2d-widget-v3-main\Resources下面。
下载好后的第三方模型需要更新文件名才能设配这个项目。如图所示,我需要创建文件夹分类好文件,大部分live2d模型都是带后缀的所以很容易分类。其次因为项目规定了响应文件的格式是cdnPathmodel/{s}/。问题在“文件名不符合 SDK 默认模型名规则”例如(miara_pro_t03 vs miara)。改成 miara.model3.json + 对应资源名,最后在这个miara.model3.json 内部指向已修正。

然后到live2d-widget-v3-main\Resources\model_list.json文件下配置好与你live2d模型文件名一致的名称。
其次到live2d-widget-v3-main\live2d-sdk.js下同样找到var Ot=[],放入你的模型文件名。
