如上一篇文章提到,本來打算用@unsignzhang 的方法和模型把洛天依添加到博客園
(博文鏈接 )
但是因為live2d的v2版本模型(unsignedzhang的模型)在博客園上存在跨域引用的問題,所以導致模型無法顯示在博客園里。
於是我尋找別的方法,在@麻辣豬仔 的文章里找到了解決方法:
(博文鏈接 )
首先,從 @麻辣豬仔 的博文這里,得到兩個文件
1.bundle.js
2.live2dcubismcore.js
(我也不知道具體是什么原理(因為之前完全不懂html
,js
,css
這些,太菜了……)),這兩個文件應該是對所有moc3
(live2d-v3版本的)模型通用的配置文件
然后把以下代碼放到你的博客園html
框里,並上傳上面兩個文件到博客園后台就可以使用了!
<!-- Live2DCubismCore script -->
<script src="https://blog-static.cnblogs.com/files/【這里寫你的cnblogs域名】/live2dcubismcore.js"></script>
<!-- Build script -->
<script src="https://blog-static.cnblogs.com/files/【這里寫你的cnblogs域名】/bundle.js"></script>
<canvas id="live2d" width="500" height="500" class="live2d" style="position: fixed; opacity: 1; left: -110px; bottom: -125px; z-index: 99999; pointer-events: none;"></canvas>
<script type="text/javascript">
var resourcesPath = 'https://cdn.jsdelivr.net/gh/x66ccff/lty-lv2d-v3@v1.2/'; // 指定資源文件(模型)保存的路徑
var backImageName = ''; // 指定背景圖片
var modelDir = ['Hiyori']; // 指定需要加載的模型
initDefine(resourcesPath, backImageName, modelDir); // 初始化模型
</script>
關於洛天依模型的制作:
如果你訪問上述cdn
鏈接會發現,模型的名稱是Hiyori
(live2d的一個官方模型)而不是天依,這是因為模型的大部分文件(包括動作、表情)都是使用Hiyori
的(來自@麻辣豬仔 的github
),直接拿來主義了,如果要親手做的話可能要很久;貼圖來自 @unsignedzhang 的v2版本模型;而模型其他部分如各個參數的運動是我自己做的。
項目github鏈接:https://github.com/x66ccff/lty-lv2d-v3
ps:本人目前無論在github還是博客、前端這方面都是小白,有什么地方做的不好請多多指教,如果這個模型有什么可以改進的可以在github上(pull request???)
效果展示:
pps:覺得好請給我(和上述其他作者)點個贊!8(:з」∠)
本文作者:https://www.cnblogs.com/x66ccff/
項目github: https://github.com/x66ccff/lty-lv2d-v3