下面看效果圖
效果都看到了，眼睛跟隨鼠標聚焦，可以換裝，還能換人，能彈出對話框……功能太多不一一介紹了請自行發掘。
下面直接上部署教程：
1.下載這個Demo：https://pan.baidu.com/s/1CkbC1CcEatsyUWrK5gxRmQ
2.解壓之后是這樣的
Demo解壓包
打開demo.html文件查看源代碼：
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Live2D 看板娘 v1.2 / Demo</title> <link rel="stylesheet" type="text/css" href="assets/waifu.css"/> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> </head> <body> <h2><a href="https://www.fghrsh.net/post/123.html" style="color: #38A3DB">Live2D 看板娘 v1.2</a> / Demo</h2> <div class="waifu"> <div class="waifu-tips"></div> <canvas id="live2d" width="280" height="250" class="live2d"></canvas> <div class="waifu-tool"> <span class="fui-home"></span> <span class="fui-chat"></span> <span class="fui-eye"></span> <span class="fui-user"></span> <span class="fui-photo"></span> <span class="fui-info-circle"></span> <span class="fui-cross"></span> </div> </div> <script src="assets/waifu-tips.js"></script> <script src="assets/live2d.js"></script> <script type="text/javascript">initModel("assets/")</script> </body> </html>
3.下面詳細說下其中的關鍵代碼：
在head中引用css和js：
<link rel="stylesheet" type="text/css" href="assets/waifu.css"/> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
然后body中加入以下代碼：
<div class="waifu"> <div class="waifu-tips"></div> <canvas id="live2d" width="280" height="250" class="live2d"></canvas> <div class="waifu-tool"> <span class="fui-home"></span> <span class="fui-chat"></span> <span class="fui-eye"></span> <span class="fui-user"></span> <span class="fui-photo"></span> <span class="fui-info-circle"></span> <span class="fui-cross"></span> </div> </div> <script src="assets/waifu-tips.js"></script> <script src="assets/live2d.js"></script> <script type="text/javascript">initModel("assets/")</script>
以上代碼注意assets文件夾的路徑，現在默認是和demo.html同級。自己使用的的時候要根據情況修改。
做完了以上部分即可在自己的網站看到Live2D的人物了，但是你可能會發現解壓后的文件夾一共加起來才300k左右，怎么可能塞下這么多人物的圖片。其實這個demo是引用了第三方的API，每次加載的人物都是從其他網站下載的，這樣做有個好處就是可以節省雲存儲空間，但是缺點卻很多：
1.第三方API接口不穩定，隨時可能失效；
2.第三方API接口的傳輸速度未知，可能出現加載慢或者加載不出來的情況。
因此，這里教大家手動自己搭建API，這樣自己使用就能夠非常穩定迅速了。
1.下載這個素菜包：https://pan.baidu.com/s/1SPUMYTDlLQ7HOOmXdGEd2g
2.解壓后更改文件夾名字，盡量精簡有意義，這里修改為live2d
，然后放到項目的根目錄：
3.然后打開assets目錄下的waifu-tips.js文件，拉到最后有如下代碼：
localStorage.setItem('modelId', modelId);
if (modelTexturesId === undefined) modelTexturesId = 0;
localStorage.setItem('modelTexturesId', modelTexturesId);
loadlive2d('live2d', 'https://api.fghrsh.net/live2d/get/?id='+modelId+'-'+modelTexturesId, console.log('live2d','模型 '+modelId+'-'+modelTexturesId+' 加載完成'));
}
function loadRandModel(){
var modelId = localStorage.getItem('modelId');
var modelTexturesId = localStorage.getItem('modelTexturesId');
var modelTexturesRandMode = 'rand'; // 可選 'rand'(隨機), 'switch'(順序)
$.ajax({
cache: false,
url: 'https://api.fghrsh.net/live2d/'+modelTexturesRandMode+'_textures/?id='+modelId+'-'+modelTexturesId,
dataType: "json",
success: function (result){
if (result.textures['id'] == 1 && (modelTexturesId == 1 || modelTexturesId == 0)) {
showMessage('我還沒有其他衣服呢', 3000, true);
} else {
showMessage('我的新衣服好看嘛', 3000, true);
}
loadModel(modelId, result.textures['id']);
}
});
}
function loadOtherModel(){
var modelId = localStorage.getItem('modelId');
var modelTexturesRandMode = 'switch'; // 可選 'rand'(隨機), 'switch'(順序)
$.ajax({
cache: false,
url: 'https://api.fghrsh.net/live2d/'+modelTexturesRandMode+'/?id='+modelId,
dataType: "json",
success: function (result){
loadModel(result.model['id']);
showMessage(result.model['message'], 3000, true);
}
});
}
可以看到以上代碼有三處使用了API，這里只需要將以上三處的
https://api.fghrsh.net/live2d/修改為剛剛重命名的live2d/即可，即變成如下樣式：
function loadModel(modelId, modelTexturesId){
localStorage.setItem('modelId', modelId);
if (modelTexturesId === undefined) modelTexturesId = 0;
localStorage.setItem('modelTexturesId', modelTexturesId);
loadlive2d('live2d', 'live2d/get/?id='+modelId+'-'+modelTexturesId, console.log('live2d','模型 '+modelId+'-'+modelTexturesId+' 加載完成'));
}
function loadRandModel(){
var modelId = localStorage.getItem('modelId');
var modelTexturesId = localStorage.getItem('modelTexturesId');
var modelTexturesRandMode = 'rand'; // 可選 'rand'(隨機), 'switch'(順序)
$.ajax({
cache: false,
url: 'live2d/'+modelTexturesRandMode+'_textures/?id='+modelId+'-'+modelTexturesId,
dataType: "json",
success: function (result){
if (result.textures['id'] == 1 && (modelTexturesId == 1 || modelTexturesId == 0)) {
showMessage('我還沒有其他衣服呢', 3000, true);
} else {
showMessage('我的新衣服好看嘛', 3000, true);
}
loadModel(modelId, result.textures['id']);
}
});
}
function loadOtherModel(){
var modelId = localStorage.getItem('modelId');
var modelTexturesRandMode = 'switch'; // 可選 'rand'(隨機), 'switch'(順序)
$.ajax({
cache: false,
url: 'live2d/'+modelTexturesRandMode+'/?id='+modelId,
dataType: "json",
success: function (result){
loadModel(result.model['id']);
showMessage(result.model['message'], 3000, true);
}
});
}
要注意的是這個api接口文件里面用了PHP，因此需要搭建PHP環境（LNMP或者LAMP）才能運行，（我使用的是PHP7.1完美運行）否則本地搭建的API不生效。
至此，一套完整的本地化Live2D動畫程序搭建完成。里面還有其他功能可自行研究。