Live2D看板娘简化版(历史恢复文章)

该文章恢复至 2020年08月17日 的文章

注意：live2d_tips.js 文件由2D天天编写，内置模型来自网络收集！

应该有很多小伙伴喜欢在自己的博客上添加一个可爱的Live2D看板娘小人的

只不过因为荷包羞涩，购买的服务器或者虚拟主机带不起而不得不放弃（我自己）

为了解决这种情况，天天自己编写了一个轻量的可管理的Live2D程序

使用说明：

文件夹说明：

文件夹	说明
live2d	主体文件夹
js	放JS依赖文件的
model	模型文件夹

文件说明：

文件名	说明
index.php	演示文件，可以直接上传至服务器打开查看
style.css	看板娘样式文件，可以编辑看板年的大小
live2d.js	看板年依赖文件，看板娘核心
live2d_tips.js	Live2D核心管理文件
model.json	模型列表，添加模型需要在里面添加

模型说明：

在 model 文件夹内预置了三个模型，分别为：

• carcano
• haruto
• koharu

添加模型：

在网上查找 Live2D看板娘模型 ，

然后将下载的模型文件放进 model 文件夹内，

确保里面的 .json 文件名为 index.json （如果不是就重命名就行了），

然后在 model 文件夹内的 model.json 添加上模型的文件夹名称。

model.json 文件编辑方法：

{
    "smodel":[
        "carcano",
        "haruto",
        "koharu",
        "这是添加的模型文件夹名1",
        "这是添加的模型文件夹名2",
        "这是添加的模型文件夹名3",
        "以此类推。。。"
    ]
}

怎么样确定模型文件？

确定里面有这么多种文件说明是模型文件：

- - - - - - - - - - - - - -模型文件夹- - - - - - - - - - - -
|                              |                           |
moc文件夹  |          .mtn文件或mtn文件夹        |     .json文件
    |                          |
.moc文件 | xxx.xxx文件夹  |   .mtn文件
                |
             .png文件

.json文件是模型的结构，可以自行更改

texture_00.png 这个是模型的人物，如果服务器宽带较小的话可以将其压缩（我就是）

在线压缩图片：https://zhitu.isux.us/

压缩后可以选择webP格式的图片下载，然后再把后缀改为 .png 覆盖到原来的地方即可

修改看板娘大小：

修改 style.css 文件内的第一行中的 width:200px; 即可

使用方法：

下载 Live2D简化版.zip 文件，上传至服务器网站根目录，将live2d文件夹解压出来（当心别把index.php文件解压出来了，不然覆盖了原来的文件不要怪我！），在网站的脚页加上下面这条代码即可：

<script src="https://你的网站域名/live2d/js/live2d_tips.js"></script>

常见问题：

添加了无法显示？

请检查live2d文件夹是否正确放在 网站根目录 ，或者没有正确调用live2d_tips.js文件。

模型加载慢？

推荐将模型内的 texture_00.png 文件压缩，注意不要压成jpg格式或者白底的了，需要透明背景的.png格式的图片！

添加了模型后切换不出来？

按住 Ctrl+F5 刷新缓存即可，手机用户到 设置-隐私-清除缓存 清理缓存再刷新一下，然后点击更换模型就看到了，如果没有则是没有添加成功。

编辑了js文件或css样式大小刷新没效果？

也是清除缓存再刷新即可。

切换页面看板娘老是需要重新加载？

因为技术不到家，ajax异步加载不会写，所以每点开一个新页面都要重新加载。

当然，如果有哪位大佬会的话可以帮忙升级一下，然后分享给大家，谢谢！

哪里有模型下载？

百度一下即可。

当然也可以下载我之前分享的那些，比如：

网站插件-Live2D源码分享 – 初春云博客 (cv0.cn)
少女前线Live2D看板娘(历史恢复文章) – 初春云博客 (cv0.cn)

模型文件都是在model文件夹内。

添加了模型文件，也在model.json文件内添加了，刷新后为什么还是没有出来？

检查模型文件内的.json文件是否已经重命名为index.json

更多问题请打开控制台检查（按F12）错误信息。

是否可以把live2d文件夹放到其它文件夹或服务器？

可以，只不过需要修改live2d_tips.js文件内的第23、24、41、60、65、76和82行的文件路径，需要修改为绝对路径，不知道绝对路径是什么意思的百度一下就知道了。

有啥遗漏或问题都欢迎留言回复哦！

注意：更换和退出看板娘按钮有些浏览器不适配，有能力的可以自行适配！

下载地址：

蓝奏云