更简单更随心所欲地操控Live2D模型
npm install live2d-easy-controldefault.json文件内路径设置,当前项目测试模型来源于b站up主屋呜屋呜【Live2D免费模型展示】再也不会觉得寂寞_哔哩哔哩_bilibili,使用需自行下载,本项目不提供。
npm run dev运行
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恢复朝向。
setMessagehideMessageBox设置对话框显示和隐藏,setMessage参数:message消息内容,duration?持续时间
setLipSync设置嘴巴大小,参数:vlaue 大小 推荐值0.0-0.5,weight权重 默认0.8
stop关闭模型渲染