Boring or interesting technology learning, there is no way to prevent a cute cute cat lying on your website

When browsing blogs, you will often see a two-dimensional little sister or gently shake her head or blink her eyes as if interacting with you is very cute, like the following

Who want to know is how to implement, but does not understand the front end, and the secondary yuan is not a cold, went down, until met this cat, couldn’t resist the temptation, determined to hold her into his own blog, can see her every day, you will have a good mood, I think there may be readers like me, can have so a ‘pet to stay here to add a lot of fun

Live2D is a graphic rendering technology applied to video games developed by Japanese Cybernoids. Through a series of continuous images and character modeling, a 3D model similar to 2D images is generated. In other words, 2D materials are used to achieve a certain degree of 3D effect

Live2D can be displayed on many platforms, such as browser, Android, IOS, Unity, etc. There are many Live2D projects that have been implemented on GitHub. The cat I raised also comes from the live2DModel warehouse, which also collects some other Live2D models

In fact, there is a demo in live2DModel warehouse, but for those who do not understand the front end, it still looks a little laborious. Here I just organize it into a version that is easier to understand and use, and pay tribute to the original author:

  1. Download the repository to your own project, the repository address is as follows:
https://github.com/ops-coffee/demo/tree/master/live2d
Copy the code

Where index. HMTL is a sample code, the entire project can be directly viewed under nginx

The Live2D folder holds the cat model and the two JS files needed

All you need to do is copy the live2D folder from the index.html layer into your project and follow the steps below to add JS to your site

  1. Add the following JS code to the page where you want to display the cat
<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>Copy the code

Model: Specify the model.json location. If you don’t like cats, you can also find your favorite model in the live2DModel repository and copy the model directory to the Live2D folder

Display: Controls the display position of the Live2D model on the page

Mobile: Controls whether it is displayed on the mobile phone

React: Controls display transparency

When you visit the web page, you will find a cat lying there quietly, watching the changes in the wind and the clouds

Finally, attach the address of teasing cat, online experience:ops-coffee.cn

Related articles recommended reading:

  • You can write a small program without a foundation
  • Write a freehand static page generator using Django