Live2D简介
live2D是一种应用于电子游戏的绘图渲染技术,技术由日本Cybernoids公司开发,通过一系列的连续图像和人物建模来生成一种类似三维模型的二维图像。
live2d官方提供了很多平台的SDK),包括iOS,Android,Flash,Unity,openGL等,
可以参照官方网站:https://www.live2d.com/
live2D是通过canvas实时演算,把一个图片格式模型,变成一个动态的人物。
live2d不仅在移动端,同时也可以在网页中呈现.
二次元萌物的使用
js直接加载
首先网页要引入官方提供的webgl的js压缩包 L2Dwidget.0.min.js和L2Dwidget.min.js。
这两个js你可以从下面的代码拿走,或者网上找一下其他来源。
建议在页面底部延迟加载,因为其体积过于庞大,
如果不延迟加载,会严重影响你的网站的加载速度和性能.
代码实现
<!-- 二次元萌物插件配置内容 -->
<script type="text/javascript" charset="utf-8" src="https://blog-static.cnblogs.com/files/blogs/710653/L2Dwidget.0.min.js"></script>
<script type="text/javascript">
var model_arr = [
'chitose', // 学长
'hibiki', // 美少女
'hijiki', // 黑猫
'izumi', // 清纯少女
'miku', // 初音
'tororo', // 白猫
'tsumiki', // 学生服装
'unitychan', // 蜜蜂少女
'nico', // 狐狸萌妹子
'wanko', // 狗狗
'nipsilon', // 长发妹妹
'nito', // 短发萝莉
'ni-j', // 电音女
'haruto', // 呆萌短发小护士
'koharu', // 呆萌长发小护士
'shizuku', // ac娘
'z16' // 睡衣女
]
var index = Math.floor((Math.random()*model_arr.length));
var model_name = model_arr[index];
console.log('当前加载的萌物是'+model_name);
L2Dwidget.init({
"model": {
jsonPath: " https://unpkg.com/live2d-widget-model-"+model_name+"@1.0.5/assets/"+model_name+".model.json" ,
"scale": 1
},
"display": {
"superSample": 1, // 超采样等级
"position": "right", // 设置上下左右位置
"width": 100,
"height": 200,
"hOffset": -20,
"vOffset": -20
},
"mobile": {
"show": true, // 手机显示开关,建议关闭
"scale": 0.5, // 移动设备上的缩放
motion: true, // 移动设备是否开启重力感应
},
"react": {
"opacityDefault": 1, // 设置透明度
"opacityOnHover": 1 // 鼠标悬浮时设置透明度
}
});
</script>
npm 安装
npm install live2d-widget-model-tororo
其对应的模型也可以自己下载安装:
live2d-widget-model-chitose
live2d-widget-model-haru
live2d-widget-model-haruto
live2d-widget-model-hibiki
live2d-widget-model-hijiki 黑猫
live2d-widget-model-izumi
live2d-widget-model-koharu
live2d-widget-model-miku
live2d-widget-model-ni-j
live2d-widget-model-nico
live2d-widget-model-nietzsche
live2d-widget-model-nipsilon
live2d-widget-model-nito
live2d-widget-model-shizuku 萌娘
live2d-widget-model-tororo 白猫
live2d-widget-model-tsumiki
live2d-widget-model-unitychan
live2d-widget-model-wanko 狗狗
live2d-widget-model-z16
模型展示:
koharu:呆萌长发小护士
haruto: 呆萌短发小护士
miku: 初音
shizuku ac娘
chitose 学长