小白教程之给网页添加Live2D

Pastore Antonio | 13 9 月, 2020

下面看效果图

效果都看到了，眼睛跟随鼠标聚焦，可以换装，还能换人，能弹出对话框……功能太多不一一介绍了请自行发掘。

下面直接上部署教程：
1.下载这个Demo：https://pan.baidu.com/s/1CkbC1CcEatsyUWrK5gxRmQ
2.解压之后是这样的

<!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：

<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动画程序搭建完成。里面还有其他功能可自行研究。

参考资料：
https://www.fghrsh.net/post/123.html
“Potion Maker” 字样及应用内包含的文本、模型、图片、动作数据等
所有权均属于 “药水制作师” 作者 Sinsiroad，仅供研究学习，不得用于商业用途

浏览量： 1,176