### 使用  https://www.live2d.com/download/cubism-sdk/#sdk3
### 使用许可协议及SDK下载 https://www.live2d.com/zh-CHS/download/cubism-sdk/download-web/
### live2dcubismcore.min.js文件需要自己从官网下载，官方不允许分发

### 使用前注意
* 基于CubismSdkForWeb-4 版本进行的封装，需要moc3模型(包含的材质文件是Haru.2048(模型名.图片尺寸),而非textures的文件夹,motions下文件按数字递增)
* public/live2d/core/live2dcubismcore.min.js 根目录下需要存在该文件
* live2d/resources 下存在模型文件(moc3格式) 可导入官方SDK目录下Resources文件 或 下方地址
* CubismSdkForWeb修改后源码下载   [https://gitee.com/xyzgy/cubism-sdk-for-web](https://gitee.com/xyzgy/cubism-sdk-for-web)

### 安装
```
npm i x-live2d
```
### 使用
```
import live2d from "x-live2d/live2d.vue";
components: { live2d }

<live2d :show="true" >
//对话框，工具条使用slot允许自定义
<template v-slot:info></template>
<template v-slot:tool></template>
</live2d>
```

### 注意
* ~在app.vue文件中使用，暂时未解决单页面使用，切换页面之后全局变量Live2DCubismCore带来的各种问题~
* 1.0.3 版本解决上述问题

### 模型文件说明
* 模型数据（moc3）
* 动态数据（motion3.json）
* 模型设定文件（model3.json）
* 物理模拟设定文件（physics3.json）
* 表情数据（exp3.json）
* 姿势设定文件（pose3.json）
* 显示辅助文件（cdi3.json）
* 声音文件（wav）

### 模型地址 (不适用CubismSdkForWeb4版本)
* 需要moc3模型(包含的材质文件是Haru.2048(模型名.图片尺寸),而非textures的文件夹)，motions下文件按数字递增
* https://gitee.com/xyzgy/live2d-model
* https://gitee.com/xyzgy/live2d-model-2

### 参考文档
* https://blog.csdn.net/weixin_44128558/article/details/104792345
* https://blog.csdn.net/hb_zhouyj/article/details/108625888
* https://github.com/chendishen/react-live2d

## x-live2d使用说明
* 基于vue3开发，可根据需要配合bundle.js进行二次封装

### 参数
| 字段 | 说明 | 类型 | 默认值 | 备注 | 
|  ----  | ----  | ----  | ----  |----  |
| position | live2d位置 | String |  "bottom: 10px;right: 10px;" | 
| show | live2d显示与隐藏 | Boolean | true| 全局一次性引入，通过改变该字段值控制在页面的显示与隐藏
| live2dcubismcore  | live2dcubismcore 路径 | String | "live2d/core/live2dcubismcore.min.js" | public目录下
| resourcesPath | 模型根路径 | String | "live2d/resources/" | public目录下 
| modelDir		| 模型目录名| Array	| ["Haru", "Hiyori"]|
| backImageName| 背景图片	| String| ''								|
| gearImageName | 右上角齿轮 | String |  null
| debugLogEnable| 是否调试模式 | Boolean | false
| headMessage | 点击头部显示文案 | Array | [ "讨厌~不要掐人家的脸嘛~"]
| bodyMessage | 点击身体 | Array |["哼，坏人"]
| defaultMessage | 未监听指定区域时显示文案 | Array |["我是谁"]
| isGlobal | 模型是否跟随全局鼠标移动 | Boolean | true
| isAuto |  是否自动显示预设文案 | Boolean | true
| autoSpeakTime | 文案自动切换间隔 | Number | 5000

### 方法
| 字段 | 说明 | 备注 
|  ----  | ----  | ----  |
| initLive2d | 初始化模型
| nextScene | 切换下一个模型
| changeScene(index) | 切换指定模型 | 
| addEventListener |全局监听
| mousedown | 点击模型

## bundle.js 导出变量
* LAppDefine 初始化对应变量
* LAppDelegate 模型的初始化及销毁等
* LAppLive2DManager 模型的信息及相关交互