An easy-to-go live2d 4.0 render.

Live2dRender 中文文档

Usage

Take vue.js as an example, the project is like:

📁public
   ├─📄index.html
   ├─📁cat
      ├─🏷️sdwhite cat b.model3.json
      ├─🏷️SDwhite cat B.moc3
      ├─🏷️xxx.exp3.json
      ├─ ...
   ├─ ...
📁src
   ├─🌿App.vue
   └─🎗️main.js

You can deploy your live2d model in your App.vue or anywhere you like via live2d.initializeLive2D:

<script setup>
import HelloWorld from './components/HelloWorld.vue'
import { onMounted } from 'vue';
import * as live2d from 'live2d-render';

defineComponent({
    name: 'App'
});

onMounted(async () => {
    await live2d.initializeLive2D({
        // background color of your live2d canvas 
        BackgroundRGBA: [0.0, 0.0, 0.0, 0.0],

        // path relative to your index.html
        // must be a *.model3.json
        ResourcesPath: './cat/sdwhite cat b.model3.json',
        
        // height and width of the live2d model
        CanvasSize: {
            height: 500,
            width: 400
        },

        ShowToolBox: true,
        
        // If `LoadFromCache` is set as true, all the static resources
        // like texture and model3.json will be stored in indexDB
        // as a quick cache
        LoadFromCache: true
    });
    console.log('finish loading');
});

</script>

Screenshot:

Extra

live2d.initializeLive2D can only be invoked after the window is mounted.

live2d.initializeLive2D has another two arguments MinifiedJSUrl and Live2dCubismcoreUrl, which are the CDN url of the two dependence package.

• Default of MinifiedJSUrl: https://unpkg.com/[email protected]/minified.js
• Default of Live2dCubismcoreUrl: https://cubism.live2d.com/sdk-web/cubismcore/live2dcubismcore.min.js

If you want to make your service more stable, you can download the two packages to your server and set the new url as follows:

await live2d.initializeLive2D({
    MinifiedJSUrl: 'https://path/to/minified.js',
    Live2dCubismcoreUrl: 'https://path/to/live2dcubismcore.js'
});

Buy me a coffee

Sponsor me in my own website: https://kirigaya.cn/sponsor.