👉live2d-moc3-web-集成渲染库

👉Live2d-moc3👈

[x] 支持 live2d-moc3 版本的 web 渲染库
[x] 支持鼠标点击互动 | 不提供拖动功能
[x] 新增支持 [多模型] 异步加载 + 每日恒定随机模型 (每天更换自定义列表内随机模型,当日不再随刷新而替换)

如何添加

三个必要的头: ^[1] ^[2]

<!-- Live2DCubismCore -->
<script src="https://fastly.jsdelivr.net/gh/Weidows-projects/live2d-moc3/dist/live2dcubismcore.min.js"></script>
<!-- Include Pixi. -->
<script src="https://fastly.jsdelivr.net/gh/Weidows-projects/live2d-moc3/dist/pixi.min.js"></script>
<script src="https://fastly.jsdelivr.net/gh/Weidows-projects/live2d-moc3/dist/live2d.min.js"></script>

以及自定义的 js, 单个/多个模型都可以, 但只显示一个, 想要多个可以多 new 几个

addEventListener("DOMContentLoaded", function () {
  let models = [
    {
      left: "0px",
      bottom: "0px",
      basePath:
        "https://fastly.jsdelivr.net/gh/alg-wiki/AzurLaneL2DViewer@gh-pages/assets",
      role: "bisimai_2",
      background: "",
      opacity: 1,
      mobile: false,
    },
    {
      right: "0px",
      bottom: "0px",
      basePath:
        "https://fastly.jsdelivr.net/gh/alg-wiki/AzurLaneL2DViewer@gh-pages/assets",
      role: "bisimai_2",
      background: "",
      opacity: 1,
      mobile: false,
    },
  ];
  new Live2dLoader(models);
});

比如 Hexo

添加到主题的 _config.yml

js 代码可以写完参数后压缩为一行,一起添加到下面;

当然也可以魔改框架源码,此处不再赘述.

inject:
  head:
    # - <link rel="stylesheet" href="/xxx.css">
    - <script src="https://fastly.jsdelivr.net/gh/Weidows-projects/live2d-moc3/dist/live2dcubismcore.min.js"></script>
    - <script src="https://fastly.jsdelivr.net/gh/Weidows-projects/live2d-moc3/dist/pixi.min.js"></script>
    - <script src="https://fastly.jsdelivr.net/gh/Weidows-projects/live2d-moc3/dist/live2d.min.js"></script>
  bottom:
    # - <script src="xxxx"></script>
    - <script>addEventListener("DOMContentLoaded",function(){let models=[{left:"0px",bottom:"0px",basePath:"https://fastly.jsdelivr.net/gh/alg-wiki/AzurLaneL2DViewer@gh-pages/assets",role:"bisimai_2",background:"",opacity:1,mobile:false,},{right:"0px",bottom:"0px",basePath:"https://fastly.jsdelivr.net/gh/alg-wiki/AzurLaneL2DViewer@gh-pages/assets",role:"bisimai_2",background:"",opacity:1,mobile:false,},];new Live2dLoader(models)});</script>

可选参数

参数	Type	Default	Description
width	可选[Number]	800	宽度，单位为 px
height	可选[Number]	600	长度，单位为 px
top,right,bottom,left	可选[String]	“”	模型到浏览器各边框的距离。选择两个即可定位，如定位在左下角：left: ‘0px’ , bottom: ‘0px’
basePath	必须[String]	“”	live2d 模型资源库的路径
role	必须[String]	“”	角色模型对应的文件夹（即 basePath 下的文件夹
background	可选[String]	“”	背景图片，可填入图片外链
opacity	可选[Number]	1	模型透明度，0~1 取值
mobile	可选[boolean]	true	移动端(手机)是否显示

basePath 所使用的模型地址,推荐下面两个仓库,模型非常好看:
alg-wiki/AzurLaneL2DViewer
imuncle/live2d

Q-A

关于报错含有 reading ‘_ptr’ 的, 是模型不适配问题 (#2)

live2dcubismcore.min.js:1
Uncaught TypeError: Cannot read properties of null (reading ‘_ptr’)
at new Model (live2dcubismcore.min.js:1:138485)
at Function.Model.fromMoc (live2dcubismcore.min.js:1:138707)
at l2d.js💯60
at t.value (mini-signals.js:93:1)
at e.t._onComplete (Loader.js:568:1)
at Loader.js:608:1
at s (async.js:27:1)
at e. (interactiveTarget.js:82:5)
at Loader.js:590:1
at async.js:35:1