live2D可交互性動畫角色
最近在網上查資料的時候發現好多博客都有一個小人 眼睛還會盯着你鼠標 厲害的還能拖動自動說話看着十分炫酷 我就琢磨着搞一個
查了資料才知道這叫live2D可交互性動畫角色 聽着學名挺高大上的 實際操作發現一點都不難
本文轉自https://ikmoe.com/7218.html
首先從 https://pan.baidu.com/s/1i5xS5Id 下載live2d總文件
解壓密碼ikmoe
首先再項目中在項目中創建一個lib 然后把下載過來的文件放入其中
輸入<link rel='stylesheet' href='http://localhost:8080/lib/live2d.css' type='text/css'/>引入css
輸入<script type="text/javascript" src="http://localhost:8080/lib/live2d.js"></script>引入js
(如果不確定路徑是否正確可以在啟動tomcat后復制 直接在地址欄訪問)
之后就是你要把這個角色放在哪里了
<div id="landlord">
<canvas id="live2d" width="180" height="600" class="live2d" ></canvas>
</div>
再引入模型
<script type="text/javascript">
loadlive2d("live2d", "http://localhost:8080/model/tia/model.json");
</script>
其中width設置的是寬 height設置的是高 記得不要設太低不然會變成無頭騎士的
具體代碼如下圖
默認圖片是月娘(我也不認識)
如果想要修改圖片的話
只需要上傳圖片與model.moc文件就OK了
以chitose模型為例子，這里texture_00.png文件重命名為default-costume.png
\live2d總文件\模型\chitose\moc\chitose.2048\texture_00.png
這里的chitose.moc重命名為model.moc
\live2d總文件\模型\chitose\moc\chitose.moc
將重命名后的文件依次上傳到
\live2d總文件\加載文件\model\tia\textures\default-costume.png
\live2d總文件\加載文件\model\tia\model.moc
然后刷新一下你就能看見你新加的人物啦！人物是PNG格式可以在PS里面自己修改，但不要隨便移動原來的位置。另外更多模型你可以到live2d官方網站與live2d貼吧下載資源，或者自行提取
最后附上效果圖
