如何本地加载live2d模型离线方式加载看板娘

最新推荐文章于 2024-07-29 22:57:08 发布

什么都不会的梓桐

最新推荐文章于 2024-07-29 22:57:08 发布

阅读量6.2k

点赞数 7

分类专栏： vue electron live2d 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_47917308/article/details/116133349

版权

electron 同时被 3 个专栏收录

5 篇文章 0 订阅

订阅专栏

vue

3 篇文章 0 订阅

订阅专栏

live2d

1 篇文章 0 订阅

订阅专栏

此项目的基本技术栈：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')
    // }
  })
}