给博客添加萌萌的看板娘
之前搞网页 Live2d 模型的时候在网上找了很多文章,但大部分都只支持moc格式的模型,不支持moc3格式的模型。
如果你的模型是moc格式,下期将出简单的教程
最近在Github上看到这个项目AzurLaneL2DViewer, 根据这个项目做成了 JS 库。
使用方法
Document
参数
参数 | 类型 | 描述 | 默认值 |
---|---|---|---|
el | [必须]DOM对象或jQuery对象 | 要挂载 Live2d 模型的元素, 支持 DOM 选择器和 jQuery 选择器,例:document.getElementById('L2dCanvas')或document.querySelector('#L2dCanvas')或$('#L2dCanvas') | null |
basePath | [必须]String | 模型根目录 | null |
modelName | [必须]String | 模型名称 | null |
width | [可选]number | canvas宽度,单位:px | 500 |
height | [可选]number | canvas高度,单位:px | 300 |
模型名称
模型名称有如下多种:
1. aidang_2
2. aierdeliqi_4
3. aierdeliqi_5
4. aimierbeierding_2
5. banrenma_2
6. beierfasite_2
7. biaoqiang
8. biaoqiang_3
9. bisimai_2
10. chuixue_3
11. dafeng_2
12. deyizhi_3
13. dujiaoshou_4
14. dunkeerke_2
15. genaisennao_2
16. heitaizi_2
17. huangjiafangzhou_3
18. huonululu_3
19. huonululu_5
20. kelifulan_3
21. lafei
22. lafei_4
23. lingbo
24. mingshi
25. ninghai_4
26. pinghai_4
27. qibolin_2
28. shengluyisi_2
29. shengluyisi_3
30. sipeibojue_5
31. taiyuan_2
32. tianlangxing_3
33. tierbici_2
34. xianghe_2
35. xixuegui_4
36. xuefeng
37. yichui_2
38. z23
39. z46_2
40. zhala_2
从以上模型中选择自己喜欢的,然后替换modelName的值,就可以了,第一次加载的时间可能会有点长,
效果预览地址https://live2d-3.vercel.app/