给自己的博客添加自定义live2d看板娘！

给自己的博客添加自定义live2d看板娘！

写在前面

网上有很多添加看板娘的教程，但是都是前篇一律的 Pio 或者 22娘 ，连样式都是一模一样的，看了着实烦躁。

正好我在 这里 看到了从少女前线中提取的 live2d 模型后，决定动手。

模型准备

首先获取一个 live2d 模型。我的是从上面的链接下载的。注意模型的版本不同，加载方式也不同，这里的模型是 .moc 格式。如果是 .moc3 格式的，那么就是新版本的了，不适用本教程。

可以用插件 gitzip 快速下载单独的文件夹。

脚本准备

这里用了大佬的脚本，也是网上最普遍的脚本。但是我翻回去的时候到了小马中国的页面，所以原来的食用方法就找不到了……所以现在只能照葫芦画瓢，修改几个有限的参数了。

<script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>
<script>
    L2Dwidget.init({
        "model": {
　　　　　　　//jsonpath控制显示模型
            jsonPath: "https://cdn.jsdelivr.net/gh/xi2oh2co3/modelpack/normal/model.json",
        },
        "display": {
            "position": "right", //看板娘的表现位置
            "width": 200,  //宽度
            "height": 350, //高度
            "hOffset": -50,
            "vOffset": -20
        },
        "mobile": {
            "show": true,
        },
        "react": {
            "opacityDefault": 1,//不透明度，可调
            "opacityOnHover": 0.2
        }
    });
</script>

这里的 jsonpath 就是我们要填入模型链接的地方了。

装入模型

我们先把模型传到网上。在 github 新建一个仓库，把下载好的文件夹丢进去。点击 raw 生成外链，然后把整段代码放进 html文件 里。博客园用户可以放在 侧边栏公告 里。（请确保有js权限）

之前有人说可以放到 页脚，这个也是可以的，侧边栏js太多就可以塞到页脚，加载快一点。

但是我刚刚放上去的时候，页面一片空白……我检查了半天，发现竟然是模型里面文件名有空格，泪目！修改了好几个文件名后重新上传。

没有想到的是，这种外链访问太慢了！我等了半个世纪看板娘才加载出来。只好含泪采用另一种方法，用 jsDeliver 提供的加速。只要在 github 上传，jsDeliver 就自动生成了链接，具体格式可以自行百度。

效果图：

客制化

参数调节

弄好的看板娘很不错，可是她挡到菜单球球了！这时可以调整脚本中看板娘出现的位置。

填入 top bottom right 三种比较正常，分别是 左上角 左下角 右下角，但是 left 的位置就很奇怪，它会把模型放到一个很靠左的位置，NTW-20 的茶桌就被挡掉了。right 其实也把裙子的一部分挡掉了，泪目。

其他的参数，大家可以自己试试。

丰富动作

加入模型后，发现模型她根本对我没反应！我怎么戳她都是那样！无法，最后只能开始研究 model.json 。

我的 model.json 长这样：

{
    "version":"1.0.1",
    "model":"model.moc",
    "textures":[
        "model.1024/texture_00.png"
    ],
    "motions":{
        "":[
            {"file":"motions/login.mtn"},
            {"file":"motions/shake.mtn"},
            {"file":"motions/touch_1.mtn"},
            {"file":"motions/touch_2.mtn"},
            {"file":"motions/touch_3.mtn"},
            {"file":"motions/touch_4.mtn"},
            {"file":"motions/touch_5.mtn"},
            {"file":"motions/wait_1.mtn"},
            {"file":"motions/wait_2.mtn"},
            {"file":"motions/wedding.mtn"},
            {"file":"motions/wedding_touch.mtn"}
        ],
        "idle":[
            {"file":"motions/daiji_idle_01.mtn"}
        ],
        //新添加
        "tap_head":[
            {"file":"motions/login.mtn"},
            {"file":"motions/shake.mtn"},
            {"file":"motions/touch_1.mtn"},
            {"file":"motions/touch_2.mtn"},
            {"file":"motions/touch_3.mtn"},
            {"file":"motions/touch_4.mtn"},
            {"file":"motions/touch_5.mtn"},
            {"file":"motions/wait_1.mtn"},
            {"file":"motions/wait_2.mtn"},
            {"file":"motions/wedding.mtn"},
            {"file":"motions/wedding_touch.mtn"}
        ],
        "tap_body":[
            {"file":"motions/login.mtn"},
            {"file":"motions/shake.mtn"},
            {"file":"motions/touch_1.mtn"},
            {"file":"motions/touch_2.mtn"},
            {"file":"motions/touch_3.mtn"},
            {"file":"motions/touch_4.mtn"},
            {"file":"motions/touch_5.mtn"},
            {"file":"motions/wait_1.mtn"},
            {"file":"motions/wait_2.mtn"},
            {"file":"motions/wedding.mtn"},
            {"file":"motions/wedding_touch.mtn"}
        ],
        "tap_leg":[
            {"file":"motions/login.mtn"},
            {"file":"motions/shake.mtn"},
            {"file":"motions/touch_1.mtn"},
            {"file":"motions/touch_2.mtn"},
            {"file":"motions/touch_3.mtn"},
            {"file":"motions/touch_4.mtn"},
            {"file":"motions/touch_5.mtn"},
            {"file":"motions/wait_1.mtn"},
            {"file":"motions/wait_2.mtn"},
            {"file":"motions/wedding.mtn"},
            {"file":"motions/wedding_touch.mtn"}
        ]
    },
    "physics":"physics.json",
        "hit_areas":[
            {"name":"head","id":"D_REF.HEAD"},
            {"name":"leg","id":"D_REF.LEG"},
            {"name":"body","id":"D_REF.BODY"},
            {"name":"cake","id":"D_REF.CAKE"}
            ]
}

其中后面添加的部分就是指定点击反应的。

懒得去搞的话，就像我一样全部填上就好了，这样看板娘很生动，可是会显得反应没有针对性。如果想单独安排动作，大家可以自己把模型放到 live2d viewer 里面看一下点击块，其中 tab_xxx 就是点击 xxx 这个块的动作。软件里还可以演示动作。选择好之后，自行编写 model.json 即可。

idle 是放置动作，如果有的话可以安排。

点击块的名称可以在 hit_areas 里面看到，NTW-20 比别人多了一个蛋糕块，不影响。

安排好之后更新一下 github 仓库，船新版本的战术人形就出现在你博客里啦！