Live2D看板娘
前言（PS:本教程使用的Vue项目）
接上一篇简单版的Live2D看板娘的教程，这次使用高级一点点的，花里胡哨的还有很多，可自行百度，简直眼花缭乱，我这也是刚研究的，后面还搞出什么花样了，再发后续。。。好了好了，步入正题吧，开肝~
一、下载文件
要玩看板娘，需要一些写好的资源文件，下载地址我提供我的
百度网盘链接:https://pan.baidu.com/s/17BCwplSrAPDUc9zlEVgiyA
提取码: 5418
也可以扫下面这个二维码
二、使用步骤
1.引入文件
将下载好的文件放入到项目目录下的static文件夹下，没有该文件夹的放到与index.html同级的存放静态资源文件目录下如public下。
2.引入js
将所需的js在index.html页面引入即可，注意js的路径，如果有问题得改成你自己的路径，不要犯这种傻哦：
<!-- 看板娘 -->
<script type="text/javascript" src="./static/live2dw/lib/L2Dwidget.min.js"></script>
3.修改app.vue
将如下代码写入app.vue中，具体参数也写在里面了：
export default {
name: 'App',
/*看板娘初始化
参数说明
model 模型的配置
json 文件资源路径，可以支持网络路径，此处使用的是相对路径
scale 模型缩放系数
display 模型布局
position 位置
width 宽度
height 高度
hOffset 水平偏移量
vOffset 垂直偏移量
mobile 移动端配置
show 显示/隐藏
scale 缩放比例
react 模型矩形框样式
opacity 透明度
opacityDefault 默认透明度
opacityOnHover 鼠标悬浮透明度
*/
created() {
setTimeout(() => {
window.L2Dwidget.init({
pluginRootPath: '../static/live2dw/',
pluginJsPath: 'lib/',
pluginModelPath: 'live2d-widget-model-haru_2/assets/', //中间这个haru_2就是你的老婆,想换个老婆,换这个就可以了
tagMode: false,
debug: false,
model: { jsonPath: '../static/live2dw/live2d-widget-model-haru_2/assets/haru02.model.json' },
display: { position: 'left', width: 350, height: 800 }, //调整大小,和位置
mobile: { show: true }, //要不要盯着你的鼠标看
log: false,
})
}, 1000)
}
}
4.如何换模型？
如果要该换模型配置的话，也是可以更改的。如下图所示：
更换模型的效果
如下图：
这里我只是简单换了一下模型，文件里面每一个live2d-widget-model-开头的都是一个模型文件，自行去选择。
5.如何换语音？
没错，看板娘是由很多功能的！现在接触的只是冰山一角，现在截图只能看见换装换模型了，其实还有当你点击人物时。模型会有动作，语音。更nb得还有导航，截图，聊天等许多强大功能都可以开发出来。只是实力不允许啊~~ 反正我是不会，到后续慢慢研究，看能不能捣鼓出来，再跟大家分享~
好了，废话说了一大堆，下面开始正题，，，
打开你想要更改的模型文件，比如：
如上图所示，替换成自己的mp3文件即可，不过也可以试试不用mp3格式的其他音频文件看行不行，我就没试了，可自行尝试。。。
下面看下老婆的声音趴~~
辰鬼丫 - 看板娘效果 2020-08-24 19-44-07#人生第一次#
结尾（后续更新更强的配置看板娘~）
以上就是今天要讲的内容，更多骚操作请自行百度，后续研究更强大功能再更新教程，就到这里了，告辞~