大佬博客鏈接:https://blog.csdn.net/weixin_44128558/article/details/104792345
照着大佬的博客做一下,可以先學會怎么生成bundle.js文件,以及官方的sdk文件的詳細內容,講得很詳細
如果想直接用的話也可以看最下面的代碼copy即可
下面是照着大佬的博客的時候遇到的一些問題
將模型文件放在github上面用jsdelivr會出現WebGL加載跨域紋理出錯的問題
查看詳細錯誤后會發現問題出在這里,接着打開lapptexturemanager.ts文件,在這里加上img.crossOrigin = '';
人物沒有布滿整個canvas導致人物相對較小的問題
修改Framework\src\math\cubismmodelmatrix.ts里面的this.setHeight,原來是1.0
刪除官方模板右上角的齒輪出現的問題
根據大佬的博客刪除齒輪后,如果點擊屏幕,會出現下面問題(雖然對使用沒什么影響)
到lappview.ts里面注釋掉下面的代碼即可
加完后重新打包,用新的bundle.js即可
如果想用在博客園上面的話除了上面的修改之外還得再修改一下代碼加載的內容
最后附上自己修改的代碼,右邊的模型是直接用官方的素材
<!-- Live2DCubismCore script -->
<script src="https://cdn.jsdelivr.net/gh/wangstong/live2dm3/live2d/js/live2dcubismcore.js"></script>
<!-- Build script -->
<script src="https://cdn.jsdelivr.net/gh/wangstong/live2dm3/live2d/js/bundle.js"></script>
<canvas id="live2d" width="500" height="500" class="live2d" style="position: fixed; opacity: 1; right: -150px; bottom: 20px; z-index: 99999; pointer-events: none;"></canvas>
<script type="text/javascript">
var resourcesPath = 'https://cdn.jsdelivr.net/gh/wangstong/live2dm3/live2d/model/'; // 指定資源文件(模型)保存的路徑
var backImageName = ''; // 指定背景圖片
var modelDir = ['Hiyori']; // 指定需要加載的模型
initDefine(resourcesPath, backImageName, modelDir); // 初始化模型
</script>