偶尔在别人网站上看到了左下角有一个会动的动画小人，像是2233看板娘一样的小人物，叫做看板娘。身为一个前端，当然会想要是可以在自己的网页上也添加一个就好了。但是网上一搜很多都是只添加三个 Javascript 的链接就可以添加成功，这种方式是可以应用在网页上的。

       但是在做桌面应用的时候，突然也想加一个，但是考虑到万一 （故意） 断开了网络，纸片人卡网线里了，怎么办？于是想到把别人的这些链接里的JS全部扒下来（包括模型），运行在本地，是可以成功的（正常的来说）。但是发现一个致命弱点：vue项目跑起来之后读取模型二进制文件出了问题——arrayBuffer参数缺失，八进制和十六进制无法写入 ，导致无法读取模型。后来找到方法，用Cubism 的SDK加上一个驱动这个SDK的优化插件，可以完美解决添加离线Live2D

 = 准备相应的库，这里部分用的是 npm 的安装方式

# cubism-sdk 

下载：在官网下载 https://www.live2d.com/zh-CHS/download/cubism-sdk/download-web/

在下面点击同意后选择下载 Cubism Core for Web ， 会得到一个js

# live2d.min.js

下载：官网没有，戳这个地址 https://github.com/dylanNew/live2d/tree/master/webgl/Live2D/lib

现在这个库已经在2019年停止更新，这个库是为了适应 Cubism 2.1 的模型

# pixi.js ( > 5.2.0 )  注意版本

    npm install pixi.js -s 

    驱动模型的 pixi 基础库，安装完之后记得 npm info pixi.js 检查版本

    假如安装的版本不是5.2.0之上，可以 npm uninstall pixi.js 卸载，再  npm install [email protected] -s 指定安装6.0.2版本

# pixi-live2d-display

    npm install pixi-live2d-display -s 

    Pencillll大佬打包的一个SDK api优化库，里面的api可以避免 cubism SDK 里面的坑

    正是这个库驱动了我这原本动不了的项目

可以从网上很多渠道获取 Live2D 的模型文件百度搜索就可以了

下载后需要检查里面的文件目录，检查必须文件

└─ model

    ├─ motions         （模型的动作文件夹）

        └─ mtn...          （有很多的mtn动作文件）

    ├─ sounds            （这个人物的声音文件夹）

    index.json                （入口文件）

    model.moc               （模型骨架）

    physics.json             （人物物理）

准备好就放在项目的 assets 文件夹下

# 创建一个JS使用上面的库去驱动这些模型文件 注意路径

index.js 可以放在与 model 文件夹同级

// index.js

// 这个文件最好放在静态资源 assets 下面，后面要把 model文件放在这个目录下方便调用

require('@/utils/live2d.min')

require('@/utils/live2dcubismcore.min')

import * as PIXI from 'pixi.js'

// 编写main()函数构建模型，用 async 解决读取的异步问题

export async function main() {...   }

# 然后在需要展示的 vue 页面

// 需要展示模型的 vue 页面

// 引入加载模型的 index.js

import { main } from '../../assets/live2d/example/index'

export default {

  data() {

    return {}

  },

  mounted() {

    this.$nextTick(() => {

      main().then()

    })

  },

}

引用文件看看有没有问题：路径问题，库引用问题等等

注意点：下载的 live2d.min.js 和 live2dcubismcore.min.js 建议放在 utils 文件夹，这个文件夹属于插件文件夹，这里建议用 require() 引用

在 index.js 内编写的 main() 函数构建人物

    //  构建画布

 const app = new PIXI.Application({

    view: document.getElementById('canvas_view'), 

    autoStart: true,

    width: 280,

    height: 300,

    transparent: true, // 画布透明

  })

载入模型的入口 json 

 const model = await Live2DModel.from(             '/src/renderer/assets/live2d/example/model/neptune_classic/index.json'  

)

把自己的纸片人轻轻的放在容器里面，┬—┬ノ('-'ノ)

app.stage.addChild(model)

这时候你的纸片人就躺在你的容器里面了（听起来不是很妙），欸嘿嘿嘿~刺溜

（当然，以下效果是加了点功夫的）

注意：优化库是有许多现成已优化的 API 请阅读文档（就是这个是英文的，看的可能有点难受）

文档地址： https://guansss.github.io/pixi-live2d-display/

// 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.js 改变锚点和大小，或者也可以在角色文件的 index.json 里面 "layout" （输出位置）调节，看角色是否错位

优化库的接口是有做许多修改的，请阅读文档内容再对你的纸片人下手

鸣谢  Pencillll 大佬 优化的API，减少 cubism 的 sdk 繁杂