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

显示效果
  • 首先把需要的文件先下载下来

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

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


    记在vue中引入2D模型(老板娘),可以随鼠标移动而动的人物模型(live2d )_第1张图片
    public文件夹
  • 之后再public文件夹下的index.html中加入这么一句话
 !
记在vue中引入2D模型(老板娘),可以随鼠标移动而动的人物模型(live2d )_第2张图片
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);
  }
记在vue中引入2D模型(老板娘),可以随鼠标移动而动的人物模型(live2d )_第3张图片
App.vue

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

你可能感兴趣的:(记在vue中引入2D模型(老板娘),可以随鼠标移动而动的人物模型(live2d ))