Live2D使用分享
记得当时在做这个博客网站的时候，确实搞了很多花样。记得当时完live2d看板娘的时候就花了很多时间在这上面，毕竟是一步一步探索，都是从未知开始，今天我来分享总结一下Live2d的使用经历。
主要介绍三种玩法
玩法方式一
第一种玩法是只加载Live 2D模型，不能变身，可以使用在自己建的html文件里面。 这样的模型我一共发现总结了16个 比如： izumi
shizuku
wanko
在这里插入图片描述 具体大家可以看这里：live2d看板娘一览图
使用方式如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>live2d模型</title>
</head>
<body>
</body>
<!-- 导入模型的脚本文件 -->
<script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>
<script>
L2Dwidget.init({
// 引用的模型
"model": {
// jsonPath: "https://unpkg.com/live2d-widget-model-chitose@1.0.5/assets/chitose.model.json",
// jsonPath: "https://unpkg.com/live2d-widget-model-haruto@1.0.5/assets/haruto.model.json",
// jsonPath: "https://unpkg.com/live2d-widget-model-hibiki@1.0.5/assets/hibiki.model.json",
// jsonPath: "https://unpkg.com/live2d-widget-model-hijiki@1.0.5/assets/hijiki.model.json",
// jsonPath: "https://unpkg.com/live2d-widget-model-izumi@1.0.5/assets/izumi.model.json",
// jsonPath: "https://unpkg.com/live2d-widget-model-koharu@1.0.5/assets/koharu.model.json",
// jsonPath: "https://unpkg.com/live2d-widget-model-miku@1.0.5/assets/miku.model.json",
// jsonPath: "https://unpkg.com/live2d-widget-model-ni-j@1.0.5/assets/ni-j.model.json",
jsonPath: "https://unpkg.com/live2d-widget-model-shizuku@1.0.5/assets/shizuku.model.json",
// jsonPath: "https://unpkg.com/live2d-widget-model-tororo@1.0.5/assets/tororo.model.json",
// jsonPath: "https://unpkg.com/live2d-widget-model-tsumiki@1.0.5/assets/tsumiki.model.json",
// jsonPath: "https://unpkg.com/live2d-widget-model-unitychan@1.0.5/assets/unitychan.model.json",
// jsonPath: "https://unpkg.com/live2d-widget-model-z16@1.0.5/assets/z16.model.json",
// jsonPath: "https://unpkg.com/live2d-widget-model-nico@1.0.5/assets/nico.model.json",
// jsonPath: "https://unpkg.com/live2d-widget-model-nipsilon@1.0.5/assets/nipsilon.model.json",
// jsonPath: "https://unpkg.com/live2d-widget-model-nito@1.0.5/assets/nito.model.json",
// jsonPath: "https://unpkg.com/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json",
"scale": 1
},
// 模型的样式，可以自行更改
"display": {
"position": "right",
"width": 150,
"height": 300,
"hOffset": 0,
"vOffset": -20
},
"mobile": {
"show": true,
"scale": 0.5
},
"react": {
"opacityDefault": 1,
"opacityOnHover": 0.2
}
});
</script>
</html>上面的代码引入的脚本文件都是别人写好的轮子，我们可以不用下载源模型文件，可以根据我的代码进行更改为自己的样式使用，jsonpath：中的每一个注释都是一个模型脚本，可以任意使用。 提一下：自己也下载过很多这样的源脚本文件，但发现本地引入会报错，因为涉及到json数据请求，必须使用服务器来接受请求，所以不怎么行的通，以前做过部署在服务器上，直接引入服务器上的，发现是可行的。
玩法方式二
第二种玩法是集中了好几种live2d模型，有变身，换装功能，也是利用别人写好的轮子来使用。 效果如下：
哈哈哈，是不是很酷/(ㄒoㄒ)/
使用方式如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Live2D 看板娘 / Demo</title>
<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css" rel="nofollow noopener" rel="nofollow noopener" >
<style>
</style>
</head>
<body>
<script src="https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget/autoload.js"></script>
</body>
</html>上面的代码引入的脚本文件都是别人写好的轮子，我们可以不用下载源模型文件，可以根据我的代码进行更改为自己的样式使用，jsonpath：中的每一个注释都是一个模型脚本，可以任意使用。 提一下：自己也下载过很多这样的源脚本文件，但发现本地引入会报错，因为涉及到json数据请求，必须使用服务器来接受请求，所以不怎么行的通，以前做过部署在服务器上，直接引入服务器上的，发现是可行的。
玩法方式二
第二种玩法是集中了好几种live2d模型，有变身，换装功能，也是利用别人写好的轮子来使用。 效果如下：
哈哈哈，是不是很酷/(ㄒoㄒ)/
使用方式如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Live2D 看板娘 / Demo</title>
<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css" rel="nofollow noopener" rel="nofollow noopener" >
<style>
</style>
</head>
<body>
<script src="https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget/autoload.js"></script>
</body>
</html>对的就是这么简单使用，所有的脚本和样式都是引入了外部的，我们要做的只要在body里面添加自己的代码就行了。 说明一下：如果直接像上面使用，所有的样式都是固定的，如果要自己设置人物模型的大小或者位置，就必须引入自己更改后的样式脚本。
如何自定义更改样式
- 下载该模型的源码包 下载地址
- 最后一行的script脚本就是最重要的加载脚本
<script src="https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget/autoload.js"></script>下载源码之后导入本地的autoload.js
3. 打开autoload.js，发现里面加载了一个css文件
这个css样式文件下载的源码中有，可以把路径改为本地路径，然后直接修改waifu.css里面的样式就可以对模型的位置大小等样式进行更改了。
玩法方式三
第三种玩法是wordpress的插件安装法。
网上看到有很多种，有些需要自己修改wordpress主题的页面源代码，这样做有些麻烦，而且会有很多路径问题，也有第二种方法就是有大佬直接把live2d做成了插件，直接打开wordpress后台进行插件安装，然后启用，就可以使用了。
这种wordpress的方式可以参考大佬博客文章： 1. 参考一 2. 参考二 3. 参考三 然后我把自己使用过可行的live2d的wordpress插件资源放在下面 点击下载 链接：https://pan.baidu.com/s/1mKxg6TZHdPHwMR8WrsrSvg 提取码：udye
总结
这些是自己的使用宝贵经验，也是不断的尝试，花了很长时间自己整理出来的