Live2d vue 插件 將live2d引入vue工程 在網(wǎng)頁(yè)上添加live2d模型

前面的廢話：

Live2d火過(guò)一陣，因?yàn)楫?dāng)我搜索“l(fā)ive2d 添加到網(wǎng)頁(yè)上“的時(shí)候可以看到很多宅友已經(jīng)給自己的博客首頁(yè)加上了live2d看板娘并且發(fā)了博客跟大家分享了添加方法。

Live2d官方已經(jīng)開源了網(wǎng)頁(yè)上用的WebGL SDK，還提供了若干示例代碼，鼓勵(lì)開發(fā)者在更多場(chǎng)景下使用live2d。不過(guò)感覺(jué)最近十幾個(gè)月感覺(jué)已經(jīng)聽說(shuō)不到關(guān)于live2d的消息了，有一種逐漸變涼的氣息啊。確實(shí)，目前l(fā)ive2d主流的應(yīng)用場(chǎng)景似乎不是太多（？），手機(jī)端大多是二次元手游里的角色在使用，而網(wǎng)頁(yè)上就是。。。看板娘，比如一些博客首頁(yè)的，比如b站網(wǎng)頁(yè)直播間的。

看板娘教程看多了以后就會(huì)發(fā)現(xiàn)，大家?guī)缀醵际菍⒛硞€(gè)大神寫好的一個(gè)什么，直接添加到自己博客的html代碼中，用script一引入就完成了（有時(shí)甚至模型文件都是一樣的，更不用說(shuō)人物的動(dòng)作、對(duì)話形式）。想來(lái)大家都是一時(shí)新鮮，體驗(yàn)一番即可，并不想費(fèi)麻煩事去自己改寫什么（好看又能調(diào)戲不就夠了嗎？？！！）。

本人因?yàn)槿缦略?#xff1a;

• 并不是想添加看板娘
• 不想要批量生產(chǎn)的感覺(jué)
• 在vue工程中引入并自定義動(dòng)作似乎不是很方便？

而決定自己包裝一個(gè)vue插件，用于將live2d模型引入前端工程，展示在網(wǎng)頁(yè)上并可以實(shí)現(xiàn)交互。我基于官方提供的WebGL SDK和示例代碼制作了插件，目前已經(jīng)實(shí)現(xiàn)了必要功能并發(fā)布啦，希望這個(gè)插件帶來(lái)的便利性可以讓更多人有機(jī)會(huì)發(fā)掘出live2d更多的玩法，給大家?guī)?lái)快樂(lè)～

正文：

插件名字叫作 live2d4vue （live2d for vue），可以使用npm很方便地安裝在你的vue工程中，每一個(gè)<Live2d />組件就是一個(gè)模型，有可配置的props來(lái)修改畫布大小、模型文件以及模型動(dòng)作。

也就是說(shuō)，對(duì)于一個(gè)vue工程，你可以很整潔地引入live2d模型，并且使用這個(gè)模型實(shí)現(xiàn)比看板娘更多更豐富的功能。

關(guān)于插件的具體安裝使用方法和參數(shù)api請(qǐng)查看github倉(cāng)庫(kù)，插件倉(cāng)庫(kù)地址：https://github.com/wseven7677/live2d4vue，歡迎大家使用、交流～

201909更新：

在這一年多時(shí)間非常感謝大家使用我的插件，從收到的反饋來(lái)看，插件還是有很多需要完善的地方，包括提供一個(gè)可運(yùn)行的官方demo等等
主要是2019年我玩別的去了，沒(méi)怎么玩live2d了，導(dǎo)致遲遲沒(méi)有時(shí)間更新插件。。
（我剛才甚至搜到一位朋友在他的文章中提到live2d4vue的作者“杳無(wú)音信”了，嚇得我趕緊刷新一下存在感（不是））

也有看到其他關(guān)鍵詞是live2d、vue的插件，大家都很勤勞很厲害，不過(guò)我可能還是會(huì)按我的思路繼續(xù)做下去

總之再次感謝～2019年我還收獲好幾十個(gè)star，開心～至于插件更不更新還要看排期 。。
end

總結(jié)

以上是生活随笔為你收集整理的Live2d vue 插件 将live2d引入vue工程 在网页上添加live2d模型的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。