记在vue中引入2D模型（老板娘），可以随鼠标移动而动的人物模型（live2d ）

显示效果

首先把需要的文件先下载下来

链接：https://pan.baidu.com/s/1tAfecHdTSzXX7mkPeRGEdA
提取码：l0kx
复制这段内容后打开百度网盘手机App，操作更方便哦

接着把压缩包解压到项目的public文件夹下

public文件夹
之后再public文件夹下的index.html中加入这么一句话

 <script type="text/javascript" src="/live2dw/lib/L2Dwidget.min.js"></script>!

index.html

最后在src文件夹下的App.vue中加入定时器

  created() {
    setTimeout(() => {
      window.L2Dwidget.init({
        pluginRootPath: "live2dw/",
        pluginJsPath: "lib/",
        pluginModelPath: "live2d-widget-model-shizuku/assets/",
        tagMode: false,
        debug: false,
        model: {
          jsonPath:
            "../live2dw/live2d-widget-model-shizuku/assets/shizuku.model.json"
        },
        display: { position: "right", width: 200, height: 300 },
        mobile: { show: true },
        log: false
      });
    }, 1000);
  }

App.vue

最后把live2dw中多余的不喜欢的老板娘删去就ok！

记在vue中引入2D模型（老板娘），可以随鼠标移动而动的人物模型（live2d ）

推荐阅读更多精彩内容