给你的网页添加一个 moc3 格式的 Live2d 模型
source link: https://blog.hclonely.com/posts/8a7f7919/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
给你的网页添加一个 moc3 格式的 Live2d 模型
之前搞网页 Live2d 模型的时候在网上找了很多文章，但大部分都只支持
moc格式的模型，不支持moc3格式的模型。
如果你的模型是
moc格式，请参考给网页添加一个 Live2D 看板娘（前端）
最近在Github上看到这个项目AzurLaneL2DViewer, 根据这个项目做成了 JS 库。
使用前请查看live2dcubismcore的许可协议
在
<body>标签内添加如下内容：在
</body>之前添加以下内容：
| 参数 | 类型 | 描述 | 默认 |
|---|---|---|---|
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?)
重新加载/更换模型
大佬，找了个moc3的模型放上去不会动咋办啊
用你的模型显示正常，换用自己本地的模型之后无法加载
检查台的状态
代码段如下，
<!-- 用于存放Live2d的元素，可自定义 -->
<div class="Canvas" style="position: fixed; right: 10px; bottom: 10px;z-index: 99999999" id="L2dCanvas"></div>
<!------ 位置可自定义 ------>
<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/[email protected]/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/[email protected]/dist/pixi.min.js"></script>
<!-- live2dv3.js -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/live2dv3.min.js"></script>
<!------ 加载Live2d模型 ------>
<script>
window.onload = () => {
new l2dViewer({
el: document.getElementById(‘L2dCanvas’), // 要添加Live2d的元素, 支持dom选择器和jq选择器
basePath: ‘http://www.mybook.ltd/live2d', // 模型根目录
modelName: ‘tierbici_2’, // 模型名称
width: 3000
height: 5000
sounds: [ // 触摸播放声音
‘sounds/demo.mp3’, // 相对路径是相对于模型文件夹
‘https://cdn.jsdelivr.net/npm/live2dv3@latest/assets/biaoqiang_3/sounds/demo.mp3' // 也可以是网址
]
})
}
</script>
</body>
</html>
live2d文件链接：
https://pan.baidu.com/s/1HeCtLhpKiyma_DjM1qShcg
提取码：1111
大佬，有没有更多模型地址？我换成其他人的地址就不显示了
@HCLonely ,
<!------ 位置可自定义 ------>
<div
class="Canvas"
style="position: fixed; right: 10px; top: 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/[email protected]/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/[email protected]/dist/pixi.min.js"></script>
<!-- live2dv3.js -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/live2dv3.min.js"></script>
<!------ 加载Live2d模型 ------>
<script>
window.onload = () => {
new l2dViewer({
el: document.getElementById(‘L2dCanvas’), // 要添加Live2d的元素, 支持dom选择器和jq选择器
basePath: ‘https://cdn.jsdelivr.net/gh/kali65536/kali-live2d', // 模型根目录
modelName: ‘8qpt01__l2d_322.u’, // 模型名称
mobileLimit: false
sounds: [
// 触摸播放声音
// ‘sounds/demo.mp3’, // 相对路径是相对于模型文件夹
// ‘https://cdn.jsdelivr.net/npm/live2dv3@latest/assets/biaoqiang_3/sounds/demo.mp3' // 也可以是网址
],
})
}
</script>
我这边不显示而且报这个，这是是代码，我没有找到错误
@༺kali༻ , 标点符号都用英文的
new l2dViewer({
el: document.getElementById('L2dCanvas'), // 要添加Live2d的元素, 支持dom选择器和jq选择器
basePath: 'https://cdn.jsdelivr.net/gh/kali65536/kali-live2d', // 模型根目录
modelName: '8qpt01__l2d_322.u', // 模型名称
mobileLimit: false,
sounds: [
// 触摸播放声音
// ‘sounds/demo.mp3’, // 相对路径是相对于模型文件夹
// ‘https://cdn.jsdelivr.net/npm/live2dv3@latest/assets/biaoqiang_3/sounds/demo.mp3' // 也可以是网址
],
})
大佬，在本地测试了一下，能显示moc3，但是人很小，调width和height也没用是怎么回事啊？
<html>
justtest
<!------ 位置可自定义 ------>
<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/[email protected]/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/[email protected]/dist/pixi.min.js"></script>
<!-- live2dv3.js -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/live2dv3.min.js"></script>
<!------ 加载Live2d模型 ------>
<script>
window.onload = () => {
new l2dViewer({
el: document.getElementById(‘L2dCanvas’), // 要添加Live2d的元素, 支持dom选择器和jq选择器
basePath: ‘http://127.0.0.1/ts/assets', // 模型根目录
modelName: ‘nn’, // 模型名称
})
}
</script>
<body>
<!-- 用于存放Live2d的元素，可自定义 -->
<div class="Canvas" style="position: fixed; right: 10px; width: 5000; height: 3000; bottom: 10px;z-index: 99999999" id="L2dCanvas"></div>
</body>
</html>
这是代码emmm
new l2dViewer({
el: document.getElementById(‘L2dCanvas’), // 要添加Live2d的元素, 支持dom选择器和jq选择器
basePath: ‘http://127.0.0.1/ts/assets', // 模型根目录
modelName: ‘nn’, // 模型名称
width: 5000,
height: 3000
})@Bugjump972 , 尺寸改这里
@Bugjump972 , 在js的代码里,this.model.position = new PIXI.Point((width * 0.06), (height * 0.06)) 这个地方是绘制模型时的大小,博主的live2D样例默认比例较大,所以缩小到了0.06倍,可以自己根据实际模型来修改这个绘制比例
不愧是大佬，moc3的格式都能用上，学会了QWQ，以后把我的所有moc3的文件全部打包修改哈哈哈，另外我刚刚还把找到的live2d人物全部打包分级，然后修改了所有的人物的model.json,大佬有兴趣的话可以康康QWQ
v1.4.16
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK