給你的博客園添加一只萌萌的洛天依看板娘吧!(live2d-自制v3版本模型)


如上一篇文章提到,本來打算用@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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM