此项目的基本技术栈：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模型离线方式加载看板娘相关推荐

pytorch数据加载、模型保存及加载
主要涉及的Pytorch官方示例下图红框部分的一些翻译及备注. 1.数据加载及处理该部分主要是用于进行数据集加载及数据预处理说明,使用的数据集为:人脸+标注坐标.demo程序需要pandas(读 ...
three.js加载3d模型_可加载5亿多边形，InsiteVR推Quest端BIM协作应用《Resolve》
6月10日消息,VR软件解决方案商InsiteVR发布一款为AEC行业(建筑.工程和施工)打造的VR远程协作和3D模型预览应用:Resolve.据悉,Resolve支持Oculus Quest,特点是 ...
如何加载3D模型（odj文件和mtl文件）
模型的加载因为,在最近的项目模块中需要加载部分"模型".在加载模型在方面我从来的没有接触过,是通过同事告诉,慢慢摸索才完成的,其中是我遇到的问题和总结的一些的方法. 使用VUE加 ...
pytorch模型保存与加载总结
pytorch模型保存与加载总结模型保存与加载方式模型保存方式一只存储模型中的参数,该方法速度快,占用空间少(官方推荐使用) model = VGGNet() torch.save(model ...
给网站加个漂亮可爱的看板娘live2d，自建api，简化无错版
给网站加个漂亮可爱的看板娘live2d,自建api,简化无错版演示及相关下载演示地址: 下载地址: 添加看板娘流程 1.解压文件到你的站点目录如:https://www.ex.com/live2 ...
用html5看板娘,记在nuxt.js中引入一个萌哒哒的看板娘（Live2d模型）
在vue中引入看板娘很简单,网上资源也很多那么在nuxt中如何引入呢?这个问题我试了好多好多方法,像vue一样引入全局组件...都不行,最后找到了一个方法. 其实就是运用nuxt中的app.html ...
live2d 看板娘简单添加看版娘到自己的网站
简单添加看版娘到自己的网站关注公众号后台回复 "看板娘" 获取全部文件(接口,源代码). 我们先来看一下我们的网站会变成什么样吧! http://www.djyqxbc.vi ...
浅谈pytorch 模型 .pt, .pth, .pkl的区别及模型保存方式 pth中的路径加载使用
首先xxx.pth文件里面会书写一些路径,一行一个. 将xxx.pth文件放在特定位置,则可以让python在加载模块时,读取xxx.pth中指定的路径. Python客栈送红包.纸质书有时,在用i ...
离线GoogleMapAPIV3加载本地谷歌地图并添加标注
利用离线GoogleMapAPIV3加载本地谷歌地图并添加标注一.准备工作下载GoogleMapAPIV3.rar. 二.下载地图首先通过水经注下载器把谷歌卫星地图下载下来. 三.地图引擎部署 ...
maven使用systemPath方式加载本地jar
1.背景在对接第三方厂商时,会提供对应jar,maven公开仓库上没有发布,提供的处理方法. 上传的公司私服. systemPath方式加载本地jar. 本文要讲的就是使用systemPath方式加 ...

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

离线加载live2d模型

这三个库可以在构建 live2d 人物的index.js引入

模型文件

模型设置初始化文件

最后

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

最新文章

热门文章

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

离线加载live2d模型

这三个库可以在构建 live2d 人物的index.js引入

模型文件

模型设置初始化文件

最后

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

最新文章

热门文章

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

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