前端装扮系列-为博客添加二次元

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 学长

标签：widget,装扮,name,博客,二次元,live2d,model,js,加载
来源： https://www.cnblogs.com/aifengqi/p/15386551.html