或枯燥或有趣的技術學習，都不妨礙一只憨態可掬的萌貓卧在你的網頁上
瀏覽博客的時候經常會看到一個二次元的小姐姐或輕輕搖頭或眨巴眼睛似在與你互動甚是可愛，就像下邊這樣
曾想了解是如何實現的，奈何本身不懂前端，且對二次元並不感冒，就放下了，直到遇到了這只貓，再也無法抵擋誘惑，決心將她抱進自己的博客，每天能看到她，就會有個好心情，我想也許會有讀者跟我一樣吧，能有這么一只萌寵呆在這里足以平添很多的樂趣了
以上這種效果都是使用Live2D技術實現的，Live2D是一種應用於電子游戲的繪圖渲染技術，由日本Cybernoids公司開發，通過一系列的連續圖像和人物建模來生成一種類似二維圖像的三維模型，換句話說就是2D的素材實現一定程度的3D效果
Live2D可以展示在很多平台上，例如瀏覽器，Android，IOS，Unity等，GitHub上有很多已經實現的Live2D項目，我所養的這只貓也來自於live2DModel這個倉庫，這個倉庫下還收集了其他一些Live2D模型
在自己的網站上養貓非常的簡單，只需要以下兩步即可，其實live2DModel倉庫里邊有demo的，但是對於完全不懂前端的人來說看起來還是有點費勁，我這里僅僅是給整理成更容易理解和使用的版本，向原作者致敬：
- 下載代碼倉庫到自己的項目下，倉庫地址如下：
https://github.com/ops-coffee/demo/tree/master/live2d
其中index.hmtl為示例代碼，將整個項目放在nginx下可以直接查看效果
live2d文件夾存放了貓的模型以及需要用到的兩個js文件
你只需要把index.html同層的live2d文件夾拷貝到你的項目下，然后按照下邊步驟添加js就可以將貓養在你的站點了
- 添加如下JS代碼到需要顯示貓的頁面上
<script src="/live2d/L2Dwidget.min.js"></script>
<script type="text/javascript">
L2Dwidget.init({
model: {
jsonPath: '/live2d/tororo/assets/tororo.model.json',
},
display: {
superSample: 2,
width: 150,
height: 150,
position: 'right',
hOffset: 0,
vOffset: 0,
},
mobile: {
show: true,
scale: 1,
motion: true,
},
react: {
opacityDefault: 0.8,
opacityOnHover: 0.2,
}
})
</script>
model： 指定model.json位置，如果你不喜歡貓也可以在live2DModel這個倉庫下查找自己喜歡的模型，然后將模型目錄拷貝到live2d文件夾下，然后修改model路徑參數以及display顯示參數即可
display： 控制live2d模型在頁面上顯示的位置
mobile： 控制手機上是否顯示
react： 控制顯示的透明度
至此完成，再訪問網頁就會發現一只貓靜靜的卧在那里，看風雲變幻，自雲淡風輕~
最后附上逗貓地址，在線體驗：https://ops-coffee.cn
相關文章推薦閱讀：