Vue看板娘教程1.0

Live2D看板娘

• 前言（PS:本教程使用的Vue项目）
• 一、下载文件
• 二、使用步骤
• 1.引入文件
• 2.引入js
• 3.修改app.vue
• 4.如何换模型？
• 更换模型的效果
• 5.如何换语音？
• 结尾（后续更新更强的配置看板娘~）

---

前言（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#人生第一次#

结尾（后续更新更强的配置看板娘~）

以上就是今天要讲的内容，更多骚操作请自行百度，后续研究更强大功能再更新教程，就到这里了，告辞~