# live2d-js

**Repository Path**: ironV/live2d-js

## Basic Information

- **Project Name**: live2d-js
- **Description**: 方便的引入live2d，不需要安装第三方库，支持cdn

- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2025-07-29
- **Last Updated**: 2025-07-30

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# live2d-js
方便的引入live2d，不需要安装第三方库，支持cdn

# 1.导入

有两种引入方式：文件导入、cdn导入


文件导入：下载 [live2d.zip](live2d.zip)，解压 把lib、models目录放到你的项目中

```
<script src="lib/L2Dwidget.min.js"></script>
```

cdn导入：
建议使用https://registry.npmmirror.com

不要用unpkg.com，国内不稳定

```
<script src="https://registry.npmmirror.com/live2d-widget/3.1.4/files/lib/L2Dwidget.min.js"></script>
```


# 2.选择模型

https://blog.csdn.net/wang_123_zy/article/details/87181892

选好后去models目录，找xxx.model.json路径，例如我选择live2d-widget-model-shizuku，路径就是

`models/live2d-widget-model-shizuku/assets/shizuku.model.json`

如果cdn引入，需要带上`版本号/files/`（版本号在package.json里面），例如


`https://registry.npmmirror.com/live2d-widget-model-shizuku/1.0.5/files/assets/shizuku.model.json`


# 3.初始化
```
 L2Dwidget.init({
        "model": {
            jsonPath: "...",		//model json的路径
            "scale": 1
        },
        "display": {
            "position": "right",  //模型的表现位置
            "width": 150,         //模型的宽度
            "height": 300,        //模型的高度
            "hOffset": 0,
            "vOffset": -20
        },
        "mobile": {
            "show": true,            //是否在移动端显示
            "scale": 0.5
        },
        "react": {
            "opacityDefault": 0.7,     //模型默认透明度
            "opacityOnHover": 0.2
        }
    });
```	
	
	
具体参数参考L2Dwidget框架文档：
https://l2dwidget.js.org/dev.html

https://l2dwidget.js.org/docs/class/src/index.js~L2Dwidget.html

# 4.备注

如果不需要的模型，可以删除models中的目录，减少项目大小