記在vue中引入2D模型(老板娘),可以隨鼠標(biāo)移動而動的人物模型(live2d )

顯示效果
  • 首先把需要的文件先下載下來

鏈接:https://pan.baidu.com/s/1tAfecHdTSzXX7mkPeRGEdA
提取碼:l0kx
復(fù)制這段內(nèi)容后打開百度網(wǎng)盤手機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!

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 1. 組件的data為什么必須是函數(shù)? 組件中的 data 寫成一個函數(shù),數(shù)據(jù)以函數(shù)返回值形式定義,這樣每復(fù)用一次...
    郭先生_515閱讀 1,047評論 0 12
  • F7+Vue+WebPack移動端單頁應(yīng)用腳手架 1 簡介 F7-VUE-WEBPACK-SCAFFOLD,是一個...
    bluexiii閱讀 5,987評論 0 8
  • 七月,很悠閑的一個月,然而卻是心情最糟糕的一個月。漸漸明白人情世故,方知冷暖。有些人來了,有些人散了,是歸人,還是...
    背靠背的微笑閱讀 472評論 7 6
  • 我觀宇宙似無垠, 宇宙觀我如微塵。 此心獨照同此身, 一念剎那兩世界。
    百味工場閱讀 151評論 0 3
  • 下午五點半下班接萱萱去上舞蹈課,走在路上,萱萱跟我說:“媽媽,我今天得到了一張路對卡,可以用來兌換小紅花”...
    艾灸養(yǎng)生麗萍閱讀 116評論 0 0

友情鏈接更多精彩內(nèi)容