本文最后更新于天前，内容可能已不再适用！
前言
之前搞网页 Live2d 模型的时候在网上找了很多文章，但大部分都只支持
moc格式的模型，不支持moc3格式的模型。
如果你的模型是
moc格式，请参考给网页添加一个 Live2D 看板娘（前端）
最近在Github上看到这个项目AzurLaneL2DViewer, 根据这个项目做成了 JS 库。
使用前请查看live2dcubismcore的许可协议
使用方法
在
<body>标签内添加如下内容：<!-- 用于存放Live2d的元素，可自定义 --> <div class="Canvas" style="position: fixed; right: 10px; bottom: 10px;z-index: 99999999" id="L2dCanvas"></div>在
</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 | [可选] Number | Canvas 宽度，单位:px | 500 |
height | [可选] Number | Canvas 高度，单位:px | 300 |
sizeLimit | [可选] Boolean | 当窗口大小小于设置的宽或高时不加载模型 | false |
mobileLimit | [可选] Boolean | 移动端不加载模型 | false |
sounds | [可选] Array | 触摸播放声音， 留空则不播放 | null |
方法
loadModel(modelName?)
重新加载/更换模型
Demo
赞赏作者
扫一扫支付
