此項目的基本技術棧：vue （ + electron-vue ）

在博客園看到不少這樣的在頁面下方有個live2d的動畫（看板娘），會跟隨鼠標移動形成動態
想想要不也在最近的桌面應用加上去，弄成桌寵，像這樣：

（哈哈哈哈哈哈哈哈！放上最愛的neptune！！！）
咳咳，由于網上大多數的都是用引入鏈接的方式載入的看板娘，可是考慮到萬一 故 意 拔了網線怎么辦？
女朋友卡網線里了，肯定不可以啊。好不容易找到了離線的方式，下面是方法

離線加載live2d模型

需要用到的庫

pixi.js ( > 5.2.0 ) // npm 安裝，npm install pixi.js -s

live2d.js // 也就是 live2d.min.js 文件，2019年絕版，但是可以點 [這里] https://github.com/dylanNew/live2d/tree/master/webgl/Live2D/lib 可以獲取

live2dcubismcore.min.js // [官網下載] https://www.live2d.com/zh-CHS/download/cubism-sdk/download-web/

pixi-live2d-display // npm install pixi-live2d-display -s 　
這是一個 up 把 Cubism 的SDK優化之后的庫，在文章結尾會放上他在B站的鏈接，真的特別感謝！！

這三個庫可以在構建 live2d 人物的index.js引入

// index.js // 這個文件最好放在靜態資源 assets 下面，后面要把 model文件放在這個目錄下方便調用 require('@/utils/live2d.min') require('@/utils/live2dcubismcore.min') import * as PIXI from 'pixi.js'// 這個函數構建模型，async 是因為異步來的 export async function main() {... } // 需要展示模型的 vue 頁面 <script> // 引入加載模型的 index.js import { main } from '../../assets/live2d/example/index'export default {data() {return {}},mounted() {this.$nextTick(() => {main().then()})}, } </script>

模型文件

這里就是開始放老婆了，要注意 文件放的地方、引入的地址

從網上可以找到 live2d 的模型文件。把模型文件和 index.js 同級擺放，放在 assets 下面，取名 model 文件夾進行管理后宮

注意：模型文件夾里面會有 index.json ( 模型基本設置 )
model.moc（ 角色模型框架 ）
pose.json （ 姿勢文件 ）
physics.json （ 物理 ）
同級目錄下的其他文件夾里面：
.mtn ( 模型動作 )
部分貼圖
等等…
要注意檢查

放好了文件，就開始上設置的代碼吧！

模型設置初始化文件

// index.js require('@/utils/live2d.min') require('@/utils/live2dcubismcore.min') import * as PIXI from 'pixi.js'window.PIXI = PIXI // 全局const { Live2DModel, Cubism2ModelSettings } = require('pixi-live2d-display')export async function main() {const app = new PIXI.Application({view: document.getElementById('canvas_view'),autoStart: true,width: 280,height: 300,transparent: true, // 畫布透明})const model = await Live2DModel.from('/src/renderer/assets/live2d/example/model/neptune_classic/index.json')app.stage.addChild(model)app.renderer.backgroundColor = 0x061639 // 設置畫布背景顏色// transforms 模型方位// model.x = -10 // 方位（單位像素）// model.y = 100// model.rotation = Math.PI// model.skew.x = Math.PImodel.scale.set(0.15) // model.scale.set(0.3, 0.3) // 縮放model.anchor.set(0.15, 0) // 錨點，以畫布中心下方為中心點,x，y（單位：倍）// interactionmodel.on('hit', (hitAreas) => {// if (hitAreas.includes('body')) {// model.motion('tap_body')// }}) }

最后效果

注意：如果有報錯，記得檢查路徑，還有模型文件里面 index.json 引用模型的路徑

最后

如果還有不夠詳細的地方可以私信我或者在下面評論說說，看板娘做了幾天了，在下是萌新，還是太菜了，望大家多多包涵

關于這個的最大難點之一：
之前嘗試只使用純JS的方式，用二進制引入模型，但是 vue 項目的原因，二進制文件讀取出問題（ arrayBuffer參數缺失，八進制和十六進制無法寫入 ），困擾了兩天

特別感謝：https://www.bilibili.com/video/av971274148/
這個 up 主提供的接口不僅方便了 Cubism SDK 繁瑣的問題，我也在這里找到了解決讀取模型的問題

總結

以上是生活随笔為你收集整理的如何本地加载live2d模型 离线方式加载看板娘的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。