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

Live2D简介

live2D是一种应用于电子游戏的绘图渲染技术，技术由日本Cybernoids公司开发，通过一系列的连续图像和人物建模来生成一种类似三维模型的二维图像。
live2d官方提供了很多平台的SDK），包括iOS，Android，Flash，Unity，openGL等，

可以参照官方网站：https://www.live2d.com/
各种模型地址：https://github.com/xiazeyu/live2d-widget-models
https://gitee.com/dht66/live2d-widget-models/tree/master/packages
https://unpkg.com/browse/live2d-widget-model-chitose@1.0.5/

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

配置文件解释

/**
 * The init function
 * @param {Object}   [userConfig] User's custom config 用户自定义设置
 * @param {String}   [userConfig.model.jsonPath = ''] Path to Live2D model's main json eg. `https://test.com/miku.model.json` model主文件路径
 * @param {Number}   [userConfig.model.scale = 1] Scale between the model and the canvas 模型与canvas的缩放
 * @param {Number}   [userConfig.display.superSample = 2] rate for super sampling rate 超采样等级
 * @param {Number}   [userConfig.display.width = 150] Width to the canvas which shows the model canvas的长度
 * @param {Number}   [userConfig.display.height = 300] Height to the canvas which shows the model canvas的高度
 * @param {String}   [userConfig.display.position = 'right'] Left of right side to show 显示位置：左或右
 * @param {Number}   [userConfig.display.hOffset = 0] Horizontal offset of the canvas canvas水平偏移
 * @param {Number}   [userConfig.display.vOffset = -20] Vertical offset of the canvas canvas垂直偏移
 * @param {Boolean}  [userConfig.mobile.show = true] Whether to show on mobile device 是否在移动设备上显示
 * @param {Number}   [userConfig.mobile.scale = 0.5] Scale on mobile device 移动设备上的缩放
 * @param {String}   [userConfig.name.canvas = 'live2dcanvas'] ID name of the canvas canvas元素的ID
 * @param {String}   [userConfig.name.div = 'live2d-widget'] ID name of the div div元素的ID
 * @param {Number}   [userConfig.react.opacity = 0.7] opacity 透明度
 * @param {Boolean}  [userConfig.dev.border = false] Whether to show border around the canvas 在canvas周围显示边界
 * @param {Boolean}  [userConfig.dialog.enable = false] Display dialog 显示人物对话框
 * @param {Boolean}  [userConfig.dialog.hitokoto = false] Enable hitokoto 使用一言API
 * @return {null}
 */

配置展示

const defaultConfig = {
  model: {
    jsonPath: 'https://unpkg.com/live2d-widget-model-shizuku@latest/assets/shizuku.model.json',
    scale: 1,
  },
  display: {
    superSample: 2,
    width: 200,
    height: 400,
    position: 'right',
    hOffset: 0,
    vOffset: -20,
  },
  mobile: {
    show: true,
    scale: 0.8,
    motion: true,
  },
  name: {
    canvas: 'live2dcanvas',
    div: 'live2d-widget',
  },
  react: {
    opacity: 1,
  },
  dev: {
    border: false
  },
  dialog: {
    enable: false,
    script: null
  }
}