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 學長