虚拟角色
虚拟角色
虚拟角色是显示在页面右下角的交互式角色,支持 Rive 动画和 Live2D 模型两种形式,可配置按页面路由定制对话台词。
两种形态
Rive
使用 .riv 文件格式的矢量动画角色,由 Rive 平台制作。支持状态机驱动,可以实现注视跟随鼠标、眨眼、说话等交互效果。
Live2D
使用 Live2D Cubism 技术制作的 2D 角色模型。支持鼠标追踪、表情切换等交互。
配置方法
在 src/data/config/features.ts 中修改 agent 字段:
agent: {
enabled: true,
provider: 'rive',
name: 'Miki',
rive: {
src: '/model.riv'
},
live2d: {
modelPath: '/model.json'
}
}
字段说明
| 字段 | 必填 | 说明 |
|---|---|---|
enabled | 是 | true 启用,false 关闭 |
provider | 是 | rive 或 live2d |
name | 否 | 角色名称,显示在对话气泡中 |
rive.src | 否 | .riv 文件路径(provider 为 rive 时生效) |
live2d.modelPath | 否 | Live2D 模型入口 JSON 路径(provider 为 live2d 时生效) |
文件准备
Rive
- 在 Rive 平台创建或下载动画角色
- 导出为
.riv文件 - 将文件放入
public/目录(如public/model.riv) - 在配置中引用
src: '/model.riv'
Live2D
- 准备 Live2D 模型文件(
.model3.json及配套资源) - 将模型目录放入
public/目录 - 在配置中引用入口 JSON 文件路径
关闭虚拟角色
agent: {
enabled: false,
}