前言

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

如果你的模型是moc格式,请参考给网页添加一个Live2D看板娘(前端)

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

使用前请查看live2dcubismcore许可协议

使用方法

  1. <body>标签内添加如下内容:

    <!-- 用于存放Live2d的元素,可自定义 -->
    <div class="Canvas" style="position: fixed; right: 10px; bottom: 10px;z-index: 99999999" id="L2dCanvas"></div>
  2. </body>之前添加以下内容:

    <!------ 位置可自定义 ------>
    <div class="Canvas" style="position: fixed; right: 10px; bottom: 10px;z-index: 99999999" id="L2dCanvas"></div>
    <!------ 依赖 JS ------>
    <!---- 可选 ---->
    <!-- 兼容低版本浏览器 -->
    <script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"> </script>
    <!-- 音频播放兼容 -->
    <script src="https://cdn.jsdelivr.net/npm/howler@2.1.3/dist/howler.min.js"></script>
    <!---- 必需 ---->
    <script src="https://cubism.live2d.com/sdk-web/cubismcore/live2dcubismcore.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/pixi.js@4.6.1/dist/pixi.min.js"></script>
    <!-- live2dv3.js -->
    <script src="https://cdn.jsdelivr.net/npm/live2dv3@1.2.2/live2dv3.min.js"></script>
    <!------ 加载Live2d模型 ------>
    <script>
    window.onload = () => {
    new l2dViewer({
    el: document.getElementById('L2dCanvas'), // 要添加Live2d的元素, 支持dom选择器和jq选择器
    basePath: 'https://cdn.jsdelivr.net/gh/HCLonely/Live2dV3/assets', // 模型根目录
    modelName: 'biaoqiang_3', // 模型名称
    sounds: [ // 触摸播放声音
    'sounds/demo.mp3', // 相对路径是相对于模型文件夹
    'https://cdn.jsdelivr.net/npm/live2dv3@latest/assets/biaoqiang_3/sounds/demo.mp3' // 也可以是网址
    ]
    })
    }
    </script>

参数

参数类型描述默认
el[必需] DOM 对象或 jQuery 对象要挂载Live2d模型的元素, 支持DOM选择器和jQuery选择器,例:document.getElementById('L2dCanvas')document.querySelector('#L2dCanvas')$('#L2dCanvas')null
basePath[必需] String模型根目录null
modelName[必需] String模型目录null
width[可选] NumberCanvas宽度,单位: px500
height[可选] NumberCanvas高度,单位: px300
sizeLimit[可选] Boolean当窗口大小小于设置的宽或高时不加载模型false
mobileLimit[可选] Boolean移动端不加载模型false
sounds[可选] Array触摸播放声音, 留空则不播放null

方法

loadModel(modelName?)

重新加载/更换模型

Demo

https://live2dv3demo.hclonely.com/