前端裝扮系列-為部落格新增二次元
阿新 • • 發佈:2021-10-09
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 學長