几行代码养只猫，心情瞬间好多了

或枯燥或有趣的技术学习，都不妨碍一只憨态可掬的萌猫卧在你的网页上

浏览博客的时候常常会看到一个二次元的小姐姐或轻轻摇头或眨巴眼睛似在与你互动甚是可爱，就像下边这样

曾想了解是如何实现的，奈何自己不懂前端，且对二次元并不感冒，就放下了，直到遇到了这只猫，再也没法抵挡诱惑，决心将她抱进本身的博客，天天能看到她，就会有个好心情，我想也许会有读者跟我同样吧，能有这么一只萌宠呆在这里足以平添不少的乐趣了

以上这种效果都是使用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： 控制显示的透明度

至此完成，再访问网页就会发现一只猫静静的卧在那里，看风云变幻，自云淡风轻~

---

最后附上逗猫地址，在线体验：https://ops-coffee.cn

相关文章推荐阅读：

• 没有基础也能写个小程序
• 利用Django徒手写个静态页面生成工具