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

home 编辑时间 2022/11/21

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

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

早期我在网站中分别实现过猫和血小板的效果(模型均来源于互联网)
![](/api/file/getImage?fileId=637b2b73da7405001301781c)

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

最近又想重温一下，顺便看看有什么最新的模型

## 折腾

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

项目地址：[https://github.com/xiazeyu/live2d-widget.js](https://github.com/xiazeyu/live2d-widget.js)
演示地址：[https://l2dwidget.js.org/dev.html](https://l2dwidget.js.org/dev.html)

浓缩了几个我觉得比较合适放在网站内用的模型
开源地址：
线上演示：

核心代码如下：

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

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

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

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

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

送人玫瑰,手留余香