此项目的基本技术栈：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.PI
  model.scale.set(0.15) // model.scale.set(0.3, 0.3) // 缩放
  model.anchor.set(0.15, 0) // 锚点，以画布中心下方为中心点,x，y（单位：倍）

  // interaction
  model.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 繁琐的问题，我也在这里找到了解决读取模型的问题