Live2D Model Collection API

Make your waifu come alive!

📢 Demo: Demo Website

📖 Preview: Models Preview

Description

This is a repository containing 2D anime character models that can be used on a website using JavaScript. The author has utilized several packages and libraries to facilitate the development process, ensuring that the models can be effectively used and function well on the website.

  • Supports all versions of the live2d web rendering library
  • Supports mouse interaction
  • Added support for multiple models asynchronous loading + daily constant random model (changes to a random model from a custom list each day, does not refresh during the day)
  • Support for out-of-range model detection and automatic resizing within the given range
  • Mouse penetration/anti-blocking + eye-tracking support + model scaling API
  • Dragging feature

What is Live2D?

Live2D is a technology that allows the creation of 2D models that can be animated interactively. This technology is commonly used in games, applications, and digital media to create lively characters.

Structure of a Live2D Model

A Live2D model consists of several main components:

  1. Model File (.moc3): Contains data for the model and animations.
  2. Texture (.png): The 2D image of the character to be animated.
  3. Parameter File (.json): Stores information about how the model interacts and animates.

How to use this?

Required Packages & Libraries:

1
2
<script src="https://cubism.live2d.com/sdk-web/cubismcore/live2dcubismcore.min.js"></script>
<script src="https://cdn.jsdelivr.net/combine/gh/dylanNew/live2d/webgl/Live2D/lib/live2d.min.js,npm/[email protected]/dist/browser/pixi.min.js,npm/pixi-live2d-display/dist/index.min.js,gh/Weidows-projects/Live2dLoader/dist/Live2dLoader.min.js"></script>

And you can custom your model and positioning the model with native JavaScript:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script>
    addEventListener("DOMContentLoaded",function(){
        new Live2dLoader([
            {
                width: 350,
                height: 475,
                left: "-75px",
                bottom: "0px",
                role: "https://model.zulma.id/assets/models/[Anime Title/Game Title]/[Character Name]/[model name].json", //Model API URL
                opacity: 1,
                scale: 0.2,
                draggable: false,
            },
        ]);
    });
</script>

Note: You can get the model API URL at this Preview Demo Website: Models Preview

Example

This is example of using Live2D Model:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<script src="https://cubism.live2d.com/sdk-web/cubismcore/live2dcubismcore.min.js"></script>
<script src="https://cdn.jsdelivr.net/combine/gh/dylanNew/live2d/webgl/Live2D/lib/live2d.min.js,npm/[email protected]/dist/browser/pixi.min.js,npm/pixi-live2d-display/dist/index.min.js,gh/Weidows-projects/Live2dLoader/dist/Live2dLoader.min.js"></script>
<script>
    addEventListener("DOMContentLoaded",function(){
        new Live2dLoader([
            {
                width: 350,
                height: 475,
                left: "-75px",
                bottom: "0px",
                role: "https://model.zulma.id/assets/models/Saekano/kato/01.json",
                opacity: 1,
                scale: 0.2,
                draggable: false,
            }, {
                width: 500,
                height: 600,
                left: "-75px",
                bottom: "0px",
                role: "https://model.zulma.id/assets/models/SAO/asuna/asuna_01/asuna_01.model.json",
                opacity: 1,
                scale: 0.2,
                draggable: false,
            },
        ]);
    });
</script>

Parameter Type Default Description
width Optional[Number] 800 Width, in px
height Optional[Number] 600 Height, in px
top, right, bottom, left Optional[String] bottom: '0px' Distance of the model from browser edges. Use two to position (e.g., left: '0px', bottom: '0px' to position in the bottom left corner)
role Reuired[String] "" Character model xxx.model.json file URL
[model.zulma.id](https://github.com/AzharRizky/Live2D-Model)
background Optional[String] "" Background image, can provide an external image link
opacity Optional[Number] 1 Model opacity, value between (0,1)
mobile Optional[Boolean] false Whether to display on mobile devices
scale Optional[Number] 0.1 Model scale, value between (0,1)
draggable Optional[Boolean] false Whether the model can be dragged
pierceThrough Optional[Boolean] true Enable mouse penetration

Structure Call

1
2
3
4
5
6
Live2dLoader(config)  
  -> Live2dLoader.min.js  
    -> PIXI.min.js                (canvas-app)  
    -> index.min.js               (live2d-model, cubism2 + cubism3/4)  
      -> live2dcubismcore.min.js  (cubism3/4)  
      -> live2d.min.js            (cubism2, needed for older models)

Contribution

Want to make this project better? You can contribute this project, I am very open if there are contributions to this project. You can fork this repository and add your models to this directories /assets/models/[anime title/game title]/[here].

Library & Packages