幾行程式碼養只貓，心情瞬間好多了

運維咖啡吧發表於2019-06-21
行程

或枯燥或有趣的技術學習，都不妨礙一隻憨態可掬的萌貓臥在你的網頁上

瀏覽部落格的時候經常會看到一個二次元的小姐姐或輕輕搖頭或眨巴眼睛似在與你互動甚是可愛，就像下邊這樣

幾行程式碼養只貓，心情瞬間好多了

曾想了解是如何實現的，奈何本身不懂前端，且對二次元並不感冒，就放下了，直到遇到了這隻貓，再也無法抵擋誘惑，決心將她抱進自己的部落格，每天能看到她，就會有個好心情，我想也許會有讀者跟我一樣吧，能有這麼一隻萌寵呆在這裡足以平添很多的樂趣了

幾行程式碼養只貓，心情瞬間好多了

以上這種效果都是使用Live2D技術實現的，Live2D是一種應用於電子遊戲的繪圖渲染技術，由日本Cybernoids公司開發，通過一系列的連續影象和人物建模來生成一種類似二維影象的三維模型，換句話說就是2D的素材實現一定程度的3D效果

Live2D可以展示在很多平臺上，例如瀏覽器，Android，IOS，Unity等，GitHub上有很多已經實現的Live2D專案，我所養的這隻貓也來自於live2DModel這個倉庫，這個倉庫下還收集了其他一些Live2D模型

在自己的網站上養貓非常的簡單，只需要以下兩步即可，其實live2DModel倉庫裡邊有demo的，但是對於完全不懂前端的人來說看起來還是有點費勁，我這裡僅僅是給整理成更容易理解和使用的版本，向原作者致敬：

  1. 下載程式碼倉庫到自己的專案下，倉庫地址如下：
https://github.com/ops-coffee/demo/tree/master/live2d

其中index.hmtl為示例程式碼，將整個專案放在nginx下可以直接檢視效果

live2d資料夾存放了貓的模型以及需要用到的兩個js檔案

你只需要把index.html同層的live2d資料夾拷貝到你的專案下，然後按照下邊步驟新增js就可以將貓養在你的站點了

  1. 新增如下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： 控制顯示的透明度

至此完成，再訪問網頁就會發現一隻貓靜靜的臥在那裡，看風雲變幻，自雲淡風輕~

掃碼關注公眾號檢視更多實用文章

相關文章推薦閱讀：

相關文章