前言 之前搞网页 Live2d 模型的时候在网上找了很多文章，但大部分都只支持moc格式的模型，不支持moc3格式的模型。 最近在Github上看到这个项目AzurLaneL2DViewer, 使用前请查看live2dcubismcore的许可协议 HCLonely Live2dV3 021efa , up-to-date HCLonely Live2dV3 021efa , up-to-date 使用方法 在标签内添加如下内容：
<div class="Canvas" style="position:fixed;right:250px; bottom: -100px;z-index: 99999999" id="L2dCanvas"></div>
<!------ 依赖 JS ------>
<!---- 可选 ---->
<!-- 兼容低版本浏览器 -->
<script src="http://www.xiaocongyu.com/live2d/js/polyfill.min.js"> </script>
<!-- 音频播放兼容 -->
<script src="http://www.xiaocongyu.com/live2d/js/howler.min.js"></script>
<!---- 必需 ---->
<script src="http://www.xiaocongyu.com/live2d/js/live2dcubismcore.min.js"></script>
<script src="http://www.xiaocongyu.com/live2d/js/pixi.min.js"></script>
<!-- live2dv3.js -->
<script src="http://www.xiaocongyu.com/live2d/yu3/live2dva.min.js"></script>
<!------ 加载Live2d模型 ------>
<script>
window.onload = () => {
new l2dViewer({
el: document.getElementById('L2dCanvas'), // 要添加Live2d的元素, 支持dom选择器和jq选择器
//basePath: 'https://cdn.jsdelivr.net/npm/live2dv3@latest/assets',
//modelName: 'biaoqiang_3',
basePath: 'http://www.xiaocongyu.com/live2d', // 模型根目录
modelName: 't4', // 模型名称
width: 200,
height: 600,
mobileLimit: false,
sounds: [ // 触摸播放声音
'http://www.xiaocongyu.com/live2d/sounds/buhaixiuma.mp3' ,// 也可以是网址
'http://www.xiaocongyu.com/live2d/sounds/haixiu.mp3'
]
})
}
</script>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 sizeLimit [可选] Boolean 当窗口大小小于设置的宽或高时不加载模型 false mobileLimit [可选] Boolean 移动端不加载模型 false sounds [可选] Array 触摸播放声音， 留空则不播放 null 方法 loadModel(modelName?) 重新加载/更换模型