给博客添加萌萌的看板娘

之前搞网页 Live2d 模型的时候在网上找了很多文章，但大部分都只支持moc格式的模型，不支持moc3格式的模型。

如果你的模型是moc格式，下期将出简单的教程

最近在Github上看到这个项目AzurLaneL2DViewer, 根据这个项目做成了 JS 库。

使用方法

image

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <!-- 用于存放Live2d的元素，可自定义 -->
  <div class="Canvas" style="position: fixed; right: 10px; bottom: 10px;z-index: 99999999" id="L2dCanvas"></div>
  <!---- 必需 ---->
  <script src="https://live2d-3.vercel.app/js/live2dcubismcore.min.js"></script>
  <script src="https://live2d-3.vercel.app/js/pixi.min.js"></script>
  <!-- live2dv3.js -->
  <script src="https://live2d-3.vercel.app/js/live2dv3.min.js"></script>
  <!------ 加载Live2d模型 ------>
  <script>
    window.onload = () => {
      new l2dViewer({
        el: document.getElementById('L2dCanvas'), // 要添加Live2d的元素, 支持dom选择器和jq选择器
        basePath: 'https://live2d-3.vercel.app/model', // 模型根目录
        modelName: 'biaoqiang_3', // 模型名称
      })
    }
  </script>

</body>

</html>

参数

参数 类型 描述 默认值
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/

posted @ 2021-12-28 17:27  春水映桃花  阅读(156)  评论(0)  编辑  收藏  举报