A few lines of code a cat, and I feel much better instantly

Or boring or interesting technological learning, not prevent a naive Meng cat lying on your web page

View blog often see when a second element of the little sister or gently shook his head or blink eyes like interacting with you is very cute, like this below

Wanted to know is how to achieve, it is regrettable themselves do not understand the front, and on the second element is not cold, put down, until it encounters a cat, could not resist the temptation, determined to hold her into his blog, can every day to see her, will have a good mood, I think there may be readers like me now, to have such a pet Meng enough to stay here added a lot of fun

This effect is more Live2D use of technology, applied Live2D is a video game graphics rendering technology, developed by the Japanese company Cybernoids to generate a similar two-dimensional image through a series of successive images and characters modeling three-dimensional model, in other words, 2D material to achieve a certain degree of 3D effects

Live2D can appear on many platforms, such as browsers, Android, IOS, Unity and so on, there are a lot Live2D projects have been implemented on GitHub, I raised the cat also comes from live2DModelthis warehouse, this warehouse also collected a number of other Live2D model

Cats on their website is very simple, just the following two steps, in fact, live2DModelwarehouse inside a demo, but for people who know nothing of the front still looks a bit strenuous, I'm here just to organize into a more easy to understand and use version, a tribute to the original author:

Download the code repository to lower their own projects, the warehouse at the following address:

https://github.com/ops-coffee/demo/tree/master/live2d

Wherein index.hmtl Example code, the whole project can be viewed directly on the effect nginx

live2d in folders cat models as well as the need to use two js files

You just need to file with index.html live2d layer sandwiched copy to your project, and then add js follow the steps below you can keep your cat a site

Add the following JS code to be displayed on the cat's page

<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： 控制显示的透明度

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

扫码关注公众号查看更多实用文章

A few lines of code a cat, and I feel much better instantly

Guess you like