给你的网页添加一个 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
-
31
如今很多 UI 设计师不是正在做动效，就正在学着做动效。 动效现在已经无处不在了。有的动效可能是一个微妙的悬停效果，使用
-
30
README.md Live2D Widget
-
5
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=7585 本文可全文转载，但需得到原作者书面许可，同时保留原作者和出处，摘要引流...
-
3
如何给你的WordPress网页添加表格Table？ ...
-
5
19号我就要上学了，以后可能会突然失踪一段时间，9月1号正式开学后，我会恢复到2周一更新的频率。在这里对所有关注我博客的人说声抱歉。我寥寥无几的评论区里突然有人问我右下角的看板娘是怎么做到的：wpaladins •*********@163.com...
-
10
给网页添加一只 Live2D 看板娘2021-07-24 / 猫村 あおい 🍭Live2D 看板娘是很多 二次元 博客的标配。这只猫猫手上刚好有 なちょ猫 的模型，当然要给网站加上可爱的猫娘！首先想到的是大家都在...
-
5
基于 NodeJs 的 live2d 后端 Api 服务器博主：HCLonely发布时间：2021-01-2754348 次浏览382 字数分类：
-
14
有很多页面都是没有登录验证的，比如prometheus，skywalking等，这个时候就可以使用oauth2-proxy去添加验证，oauth2-proxy本质是一个反向代理服务器...
-
5
将HTML网页转换为Markdown格式的工具及方法
-
4
给你的留言板添加一个弹幕吧（重制）发表2023-08-18更新2023-08-18字数总计:929阅读时长:4分钟阅读量:84
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK