<!-- 用于存放Live2d的元素,可自定义 -->
<div class="Canvas" style="margin: 0px auto;" id="L2dCanvas"></div>
<!------ 依赖 JS ------>
<!---- 可选 ---->
<!-- 兼容低版本浏览器 -->
<script src="https://unpkg.com/promise-polyfill@8.3.0/dist/polyfill.min.js"> </script>
<!-- 音频播放兼容 -->
<script src="https://npm.elemecdn.com/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://npm.elemecdn.com/pixi.js@4.6.1/dist/pixi.min.js"></script>
<!-- live2dv3.js -->
<script src="https://cdn.jsdelivr.net/gh/ZhuangRenyang/live2d-moc3@1.0.6/jsnew/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>
live2d-moc3
项目基于AzurLaneL2DViewer修改
更新日志:
- 8.20 已经能用了
- 8.22 添加移动端(手机)是否显示的选项
Demo
-
网页全屏示例:litstronger.github.io/show/
-
博客看板示例:
可选参数
参数 | Type | Default | Description |
---|---|---|---|
width | 可选[Number] | 800 | 宽度,单位为px |
height | 可选[Number] | 600 | 长度,单位为px |
top,right,bottom,left | 可选[String] | "" | 模型到浏览器各边框的距离。选择两个即可定位,如定位在左下角:left: '0px' , bottom: '0px' |
basePath | 必须[String] | "" | live2d模型资源库的路径 |
role | 必须[String] | "" | 角色模型对应的文件夹(即basePath下的文件夹 |
background | 可选[String] | "" | 背景图片,可填入图片外链 |
opacity | 可选[Number] | 1 | 模型透明度,0~1取值 |
mobile | 可选[boolean] | true | 移动端(手机)是否显示 |
下面示例中的basePath为原项目经jsdeliver的cdn加速后的模型资源路径,该basePath更多其他可用的角色模型可到原项目AzurLaneL2DViewer查看。当然,你也可以从其他地方引入moc3类型的模型角色,只需指定相应的basePath和role参数
Tip: 怎么判断是不是moc3的模型? 查看模型文件内容,如图则是
示例
复制这段代码保存到空的html文件中,在浏览器打开即可
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>live2d-demo</title>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<!-- Live2DCubismCore -->
<script src="https://cdn.jsdelivr.net/gh/ZhuangRenyang/live2d-moc3@1.0.0/js/frame/live2dcubismcore.min.js"></script>
<!-- Include Pixi. -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.6.1/pixi.min.js"></script>
<!-- Include Cubism Components. -->
<script src="https://cdn.jsdelivr.net/gh/ZhuangRenyang/live2d-moc3@1.0.0/js/live2dcubismframework.js"></script>
<script src="https://cdn.jsdelivr.net/gh/ZhuangRenyang/live2d-moc3@1.0.0/js/live2dcubismpixi.js"></script>
<!-- User's Script -->
<script src="https://cdn.jsdelivr.net/gh/ZhuangRenyang/live2d-moc3@1.0.0/js/l2d.js"></script>
<script src="https://cdn.jsdelivr.net/gh/ZhuangRenyang/live2d-moc3@1.0.0/js/main.js"></script>
<style>
</style>
</head>
<body>
<!-- Canvas -->
<div class="Canvas" id="L2dCanvas"></div>
<script>
var config = {
width: window.innerWidth,
height: window.innerHeight,
left: '0px',
bottom: '0px',
basePath: 'https://cdn.jsdelivr.net/gh/alg-wiki/AzurLaneL2DViewer@gh-pages/assets',
role: 'bisimai_2',
background: 'https://cdn.jsdelivr.net/gh/alg-wiki/AzurLaneL2DViewer@gh-pages/assets/bg/bg_church_jp.png',
opacity: 1,
mobile: false
}
var v = new Viewer(config);
</script>
</body>
</html>
示例截图
By the way, 如果你喜欢本项目,就点个珍贵的star吧!