给网页添加live2D模型
live2D简介
Live2D 是一种应用于电子游戏的绘图渲染技术，由日本 Cybernoids 公司开发。
工作原理
Live2D Cubism 的工作原理是通过将一系列的 2D 图像进行平移、旋转和变形等操作，生成一个具有自然动画效果的可动人物模型。
看板娘
live2D模型俗称“看板娘”，是一种职业和习惯称呼，也是ACGN次文化中的萌属性之一。一些网站、论坛、网络公司的代表形象、吉祥物被称作看板娘，一般可以看作吉祥物或网站、公司的拟人化的等同概念。
比如博客右下角的猫咪。
趴在碗里的小胖狗。
当然更多的还是喜闻乐见的纸片人。
网页代码实现
在博客上放置一个可爱的看板娘只需要在页面<body>后添加几行代码：
- 引入 live2d 的 js：
<script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>
- 初始化 js ，加载模型：
<script>
L2Dwidget.init({
"model": {
jsonPath: "https://unpkg.com/live2d-widget-model-hijiki/assets/hijiki.model.json",
"scale": 1
},
"display": {
"position": "left",<!--设置看板娘的上下左右位置-->
"width": 150,
"height": 300,
"hOffset": 0,
"vOffset": -150
},
"mobile": {
"show": true,
"scale": 0.5
},
"react": {
"opacityDefault": 0.9,<!--设置透明度-->
"opacityOnHover": 0.2
}
});
</script>
想要换成其他的模型，可以修改上面代码里 jsonPath 的路径，jsonPath 的路径格式为：
https://unpkg.com/live2d-widget-model-模型名称@1.0.5/assets/模型名称.model.json
复制替换蓝色字体即可。
# 几个常用的看板娘样式：
黑猫：https://unpkg.com/live2d-widget-model-hijiki@1.0.5/assets/hijiki.model.json
萌娘：https://unpkg.com/live2d-widget-model-shizuku@1.0.5/assets/shizuku.model.json
白猫：https://unpkg.com/live2d-widget-model-tororo@1.0.5/assets/tororo.model.json
狗狗：https://unpkg.com/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json
小可爱：https://unpkg.com/live2d-widget-model-z16@1.0.5/assets/z16.model.json
小可爱：https://unpkg.com/live2d-widget-model-koharu@1.0.5/assets/koharu.model.json
# 其他可替换模型：
live2d-widget-model-chitose
live2d-widget-model-epsilon2_1
live2d-widget-model-gf
live2d-widget-model-haru/01 (use npm install --save live2d-widget-model-haru)
live2d-widget-model-haru/02 (use npm install --save live2d-widget-model-haru)
live2d-widget-model-haruto
live2d-widget-model-hibiki
live2d-widget-model-hijiki
live2d-widget-model-izumi
live2d-widget-model-koharu
live2d-widget-model-miku
live2d-widget-model-ni-j
live2d-widget-model-nico
live2d-widget-model-nietzsche
live2d-widget-model-nipsilon
live2d-widget-model-nito
live2d-widget-model-shizuku
live2d-widget-model-tororo
live2d-widget-model-tsumiki
live2d-widget-model-unitychan
live2d-widget-model-wanko
live2d-widget-model-z16
