澪的开发经验分享 - live2d
type: channel
link: https://www.chorblack.top/index.php/category/live2d/
description: live2d
items: Typecho插件Pio版本更新

Typecho插件Pio版本更新
type: item
date: 2026-03-28T12:06:00+00:00
description: 前因逛模之屋的时候发现，里面居然有live2d模型的分享，遂下载下来想放到网站上体验，但是发现模型版本是Live2D Cubism 4，而原始插件Pio只支持到Live2D Cubism 2，于是便想将Live2D SDK更新一下，支持最新的模型。实施方案修改模型发现逻辑，同时识别 model.json（Cubism 2）和 *.model3.json（Cubism 3/4），并将画布从 canvas改为 div容器用 pixi-live2d-display 替换 loadlive2d()修改模型发现逻辑 foreach($load as $key => $value){ $single = substr($value, 26); // 优先检测 Cubism 3/4 的 model3.json $model3_files = glob($value . "/*.model3.json"); if(!empty($model3_files)){ $models[$single] = ucfirst($single) . " (Cubism 3/4)"; } // 再检测 Cubism 2 的 model.json else if(file_exists($value . "/model.json")){ $models[$single] = ucfirst($single); } };下载SDKcdn感觉不如本地稳定文件用途pixi.min.jsPixiJS 渲染引擎live2d.min.jsCubism 2 运行库（pio/kurumi 模型需要）live2dcubismcore.min.jsCubism 4 运行库（Nahida 模型需要）pixi-live2d-display.min.js统一加载器，同时支持 Cubism 2/3/4下载链接替换旧api重写 pio.js，用 pixi-live2d-display 的 PIXI.live2d.Live2DModel.from() 替换旧的 loadlive2d()，同时保留所有原有交互功能。主要修改部分：// 加载模型（支持 Cubism 2 model.json 和 Cubism 3/4 *.model3.json） const loadModel = async (modelUrl) => { if (!window.PIXI || !PIXI.live2d) { console.error("pixi-live2d-display 未加载"); return; } // 首次加载时创建 PIXI.Application if (!current.app) { const width = current.container.clientWidth || 280; const height = current.container.clientHeight || 250; current.app = new PIXI.Application({ width: width, height: height, backgroundAlpha: 0, view: current.container.tagName === "CANVAS" ? current.container : undefined }); // 如果容器不是 canvas，将 PIXI 创建的 canvas 插入容器 if (current.container.tagName !== "CANVAS") { current.container.innerHTML = ""; current.container.appendChild(current.app.view); current.app.view.style.width = width + "px"; current.app.view.style.height = height + "px"; } } // 移除旧模型 if (current.model) { current.app.stage.removeChild(current.model); current.model.destroy(); current.model = null; } try { const model = await PIXI.live2d.Live2DModel.from(modelUrl, { autoInteract: false }); // 自适应缩放 const scaleX = current.app.view.width / model.width; const scaleY = current.app.view.height / model.heigh…