An easy-to-go live2d 4.0 render.

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:

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

export default {
    name: 'App',
    components: {
        HelloWorld
    },
    setup() {
        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
                },
                
                // 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');
        });
    }
}

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.