给你的网页添加一个moc3格式的Live2d模型

网页制作

发布日期: 2020-03-26

更新日期: 2020-05-02

文章字数: 674

阅读时长: 4 分

阅读次数:

分站内容可能或出现渲染错误或内容过时等问题，请以主站为准！
分站禁止评论，评论请前往主站！

前言

之前搞网页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的元素
        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`