如何本地加载live2d模型 离线方式加载看板娘
此項(xiàng)目的基本技術(shù)棧：vue （ + electron-vue ）
在博客園看到不少這樣的在頁面下方有個(gè)live2d的動(dòng)畫（看板娘），會(huì)跟隨鼠標(biāo)移動(dòng)形成動(dòng)態(tài)
想想要不也在最近的桌面應(yīng)用加上去，弄成桌寵，像這樣：
（哈哈哈哈哈哈哈哈！放上最愛的neptune！！！）
咳咳，由于網(wǎng)上大多數(shù)的都是用引入鏈接的方式載入的看板娘，可是考慮到萬一 故 意 拔了網(wǎng)線怎么辦？
女朋友卡網(wǎng)線里了，肯定不可以啊。好不容易找到了離線的方式，下面是方法
離線加載live2d模型
需要用到的庫
pixi.js ( > 5.2.0 ) // npm 安裝，npm install pixi.js -s
live2d.js // 也就是 live2d.min.js 文件，2019年絕版，但是可以點(diǎn) [這里] https://github.com/dylanNew/live2d/tree/master/webgl/Live2D/lib 可以獲取
live2dcubismcore.min.js // [官網(wǎng)下載] https://www.live2d.com/zh-CHS/download/cubism-sdk/download-web/
pixi-live2d-display // npm install pixi-live2d-display -s
這是一個(gè) up 把 Cubism 的SDK優(yōu)化之后的庫，在文章結(jié)尾會(huì)放上他在B站的鏈接，真的特別感謝！！
這三個(gè)庫可以在構(gòu)建 live2d 人物的index.js引入
// index.js // 這個(gè)文件最好放在靜態(tài)資源 assets 下面，后面要把 model文件放在這個(gè)目錄下方便調(diào)用 require('@/utils/live2d.min') require('@/utils/live2dcubismcore.min') import * as PIXI from 'pixi.js'// 這個(gè)函數(shù)構(gòu)建模型，async 是因?yàn)楫惒絹淼?/span> 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>模型文件
這里就是開始放老婆了，要注意 文件放的地方、引入的地址
從網(wǎng)上可以找到 live2d 的模型文件。把模型文件和 index.js 同級(jí)擺放，放在 assets 下面，取名 model 文件夾進(jìn)行管理后宮
注意：模型文件夾里面會(huì)有 index.json ( 模型基本設(shè)置 )
model.moc（ 角色模型框架 ）
pose.json （ 姿勢(shì)文件 ）
physics.json （ 物理 ）
同級(jí)目錄下的其他文件夾里面：
.mtn ( 模型動(dòng)作 )
部分貼圖
等等…
要注意檢查
放好了文件，就開始上設(shè)置的代碼吧！
模型設(shè)置初始化文件
// 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 // 設(shè)置畫布背景顏色// 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) // 錨點(diǎn)，以畫布中心下方為中心點(diǎn),x，y（單位：倍）// interactionmodel.on('hit', (hitAreas) => {// if (hitAreas.includes('body')) {// model.motion('tap_body')// }}) }最后效果
注意：如果有報(bào)錯(cuò)，記得檢查路徑，還有模型文件里面 index.json 引用模型的路徑
最后
如果還有不夠詳細(xì)的地方可以私信我或者在下面評(píng)論說說，看板娘做了幾天了，在下是萌新，還是太菜了，望大家多多包涵
關(guān)于這個(gè)的最大難點(diǎn)之一：
之前嘗試只使用純JS的方式，用二進(jìn)制引入模型，但是 vue 項(xiàng)目的原因，二進(jìn)制文件讀取出問題（ arrayBuffer參數(shù)缺失，八進(jìn)制和十六進(jìn)制無法寫入 ），困擾了兩天
特別感謝：https://www.bilibili.com/video/av971274148/
這個(gè) up 主提供的接口不僅方便了 Cubism SDK 繁瑣的問題，我也在這里找到了解決讀取模型的問題
總結(jié)
以上是生活随笔為你收集整理的如何本地加载live2d模型 离线方式加载看板娘的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【资源挖掘】免费遥感影像文件下载
- 下一篇： Java 开发效率神器 Lombok（含