Live2d WEB 入门教程在线加载模型技术领取网站右下角同款小黑猫

2023-04-04 阅读 {{counts.readCount}} 评论 {{counts.commentCount}}

## 前言
Live2d 是一项类3D的2D渲染技术，是可以栩栩如生的表现出人物表情和情感的全新动画技术，使用范围广泛，可以用于游戏、网页制作等，在bilibili等视频网站可以搜到大神们制作模型的教程。现在部分主播的虚拟形象也是用Live2d技术来实现的，这些虚拟形象主播统称为VTuber。

本文章只介绍在网页中加载Live2d的方法，比如在我的博客右下角，有一只小黑猫，就是用Live2d加载出来的模型
早期我在网站中分别实现过猫和血小板的模型加载，效果如下
(模型均来源于互联网)

![](/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>
```

不用怀疑，核心代码真的就这么简单一句话，就能实现加载模型，至于剩下的功能，例如长按跟随鼠标拖动，右键点击穿透，文字对话和换装等功能，都是需要另外写js来实现的，这个js只是最基本的加载模型，刚好符合我的需求。

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

具体用法如下
```html
<body>
    <!-- 写一个canvas的dom id必须和加载时候的对应 -->
    <canvas id="live2d" width="300" height="300"></canvas>
    <!-- 用cdn方式引入 -->
    <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>
```


如果需要替换其他模型，参考具体目录如下，替换模型加载地址即可
```shell
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>
DEMO在线演示地址: https://zzzmhcn.gitee.io/live2ddemo/demo.html
DEMO代码开源地址：https://github.com/zzzmhcn/live2dDemo/blob/master/demo.html
本项目完整开源地址：https://github.com/zzzmhcn/live2dDemo

必须再次说明下：本项目我只是学习参考github上大神项目，内容全部非本人原创，只做简单的学习、收集、精简出我需要的部分等简单工作。

<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

<br>
补充：
本文章封面图出处为 Youtuber A.I.Channel 此处仅为意会 与本文实际内容无直接关联

mdi-chevron-left