Live2d 最新学习笔记在网页上展示二次元

home 编辑时间 2022/11/21

![](/api/file/getImage?fileId=637b1f66da74050013017810)
(上图出自Youtuber A.I.Channel 仅为意会 与本文实际内容无关)

## 前言
Live2d 是一项类3D的2D渲染技术，是可以栩栩如生的表现出人物表情和情感的全新动画技术，使用范围广泛，可以用于游戏、网页制作等，在bilibili等视频网站可以搜到大神们制作模型的教程。

早期我在网站中分别实现过猫和血小板的效果(模型均来源于互联网)

![](/api/file/getImage?fileId=642b8f42da74050013022227)

![](/api/file/getImage?fileId=642b8f42da74050013022228)

最近又想重温一下live2d，后期有时间加到新项目极简导航里 https://nav.zzzmh.cn

<br>
## 折腾

折腾一圈最后发现适合放在网站右下角的并不多，最后选择学习这个github项目
项目地址：[https://github.com/imuncle/live2d](https://github.com/imuncle/live2d)
演示地址：[https://imuncle.github.io/live2d/](https://imuncle.github.io/live2d/)

<br>
精简了一下，只留了几个适合我放在网站的模型
最终线上效果如下
开源地址：
https://github.com/zzzmhcn/live2dDemo
https://gitee.com/zzzmhcn/live2dDemo
线上演示：
https://zzzmhcn.gitee.io/live2ddemo/

CDN方式加载DEMO：
https://zzzmhcn.gitee.io/live2ddemo/demo.html

<br>
核心代码如下：
引入js依赖，用load方法加载模型json文件即可
```html
<canvas id="live2d" width="300" height="300"></canvas>
<script src="js/live2d.min.js"></script>
<script>
    loadlive2d("live2d", 'model/22/model.default.json');
</script>
```

<br>
我在另一篇笔记里，顺便把白嫖github的cdn的方法也研究出来了
笔记地址: https://leanote.zzzmh.cn/blog/post/642a4448da740500130220b5

具体用法如下
```html
<body>
    
    <canvas id="live2d" width="300" height="300"></canvas>
    
    <script src="https://fastly.jsdelivr.net/gh/zzzmhcn/live2dDemo@1.0.0/js/live2d.min.js"></script>
    <script>
        
        loadlive2d('live2d', 'https://fastly.jsdelivr.net/gh/zzzmhcn/live2dDemo@1.0.0/model/platelet-3/kesyoban.model.json');
    </script>
</body>
```

我这个demo项目里一共只选取了几个适合我网站用的模型
具体目录如下
```
22娘(B站)
model/22/model.default.json

33娘(B站)
model/33/model.default.json

羊栖菜(黑猫)
model/hijiki/hijiki.model.json

山药泥(白猫)
model/tororo/tororo.model.json

小埋
model/xiaomai/xiaomai.model.json

碗中小年糕
model/wanko/wanko.model.json

血小板
model/platelet-3/kesyoban.model.json
```

<br>
## END
**参考**
收集了一些github大神的源码和demo
(github访问速度慢，模型和贴图加载会因此遇到问题，需要自己解决速度的问题才能正常访问模型)

<br>
最牛的是这位 我愿称之为 "全场最佳" 直接刷新我的认知
源码: https://github.com/imuncle/live2d
demo1: https://imuncle.github.io/live2d
demo2: https://imuncle.github.io/live2d/live2d_3/

![](/api/file/getImage?fileId=637b2004da74050013017812)

<br>
与此同时还发现了一个大神把我想做不知道怎么做的东西实现出来了，就是把live2d搬到电脑桌面上
https://github.com/fguby/Electron-elf

<br>
其他的我不介绍了直接贴地址，自行查阅吧
https://github.com/xiazeyu/live2d-widget.js
https://github.com/QiShaoXuan/live2DModel
https://github.com/Eikanya/Live2d-model

送人玫瑰,手留余香