live2dEasyControl

更简单更随心所欲地在web中使用Live2D模型

参考代码CubismWebSamples

拉取

创建vite项目后拉取，通过npm初始化。

在下载Live2D Cubism SDK for Web | Live2D Cubism上下载SDK，将文件Framework和core文件放入项目目录。

将live2d模型文件放入public下，可以参考default.json文件内路径设置，当前项目测试模型来源于b站up主屋呜屋呜【Live2D免费模型展示】再也不会觉得寂寞_哔哩哔哩_bilibili，使用需自行下载，本项目不提供。

npm run dev运行

使用

以在vue项目使用为例

通过npm i live2d-easy-control安装工具包

mian内导入使用

``TypeScript
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import { load } from 'live2d-easy-control'

load({
"modelDir": "", // 模型文件名
"resourcesPath": "/Resources/"
})

createApp(App).mount('#app')
`

更多配置信息可以参考main/src/config/define.ts

可以自行配置json文件后使用load加载，参考配置文件example.json

!示例1

功能

1. load 加载，可以直接传入对象或是json配置文件目录

2. setPointMovedEvent 设置模型跟随鼠标晃动，仅在画布内生效（后续会优化）removePointMovedEvent 移除跟随移动事件

3. setPointClickEvent 设置模型点击随机切换表情或动作，可以在配置文件中设置点击区域，removePointClickEvent移除点击事件

4. getAllExpressionsInfo getDefine getMotion getExpression获取模型配置文件信息，部分信息可以直接在模型文件夹中的.model3.json查看

5. playMotion播放动作，参数：组名group,编号no,优先级priority，具体内容见自己下载的模型文件夹中的.model3.json查看

6. playExpression播放表情，与动作类似，参数更简单，只需要表情名，stopExpression停止表情播放（存在过渡不自然问题）

解决方案：设置默认表情替换原始状态，选定一个表情作为默认表情，当要结束某个表情时直接调用stopExpression进行切换。

项目内演示案例example.json:

`json
{
"modelDir": "冷冷小人",
"resourcesPath": "/Resources/",
"expressionNames": {
"default": "" // 默认表情名
"" : ""// 其他”表情名“：“原名”
},
"motionNames": {
"default": { "group": "", "no": -1 ,"priority": 0 } // 默认闲置动作
}
}
`

> motion用的较少，很多live2d模型没有该功能，可以选择忽略。

该文件可以对其他表情进行重命名，通过getExpression 来获取调用，避免直接修改.model3.json文件( ~~没什么用其实，直接改文件更方便~~)

7. setAngle`setAngleXYreSetAngle设置live2d模型朝向，setAngle通过光标位置，setAngleXY通过XY坐标，reSetAngle恢复朝向。

8. setMessagehideMessageBox设置对话框显示和隐藏，setMessage参数：message消息内容,duration?持续时间

9. setLipSync设置嘴巴大小，参数：vlaue 大小 推荐值0.0-0.5,weight权重 默认0.8

10. stop关闭模型渲染