Vue項目中加載live2d
1. 去官網(wǎng)下載SDK for web
https://www.live2d.com/zh-CHS/download/cubism-sdk/
下載解壓后將CubismSdkForWeb-4/Core/live2dcubismcore.min.js
此文件復(fù)制到項目中,并在index.html中引用,這是live2d SDK的本體。
2. 需要安裝兩個庫:
這個庫pixi-live2d-display
支持了live2d最新4.x的版本
github地址:https://github.com/guansss/pixi-live2d-display
3. 準(zhǔn)備好live2d資源
一般設(shè)計師會給到一個文件夾,里面包含了一堆json,里面的.model3.json
是live2d模型的入口文件,把這個文件夾放到項目的public目錄,因為打包后它會出現(xiàn)在dist/下,到時候需要能夠引用到。
4. 然后開始寫代碼
5. 一些常用方法
6. 關(guān)于配置文件
live2d資源里有一種.exp3.json
, 這些文件是不同的表情文件,里面的內(nèi)容實際上就是改變?nèi)宋锏牟煌瑓?shù),讓人物做出對應(yīng)的樣子。
有可能設(shè)計師輸出的.model3.json
文件沒有把這些表情文件加入到配置中,需要自己配置一下:
