输入关键词,开始搜索

↑↓ 选择 打开 esc 关闭
沉浸

虚拟角色

虚拟角色

虚拟角色是显示在页面右下角的交互式角色,支持 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'
    }
}

字段说明

字段必填说明
enabledtrue 启用,false 关闭
providerrivelive2d
name角色名称,显示在对话气泡中
rive.src.riv 文件路径(provider 为 rive 时生效)
live2d.modelPathLive2D 模型入口 JSON 路径(provider 为 live2d 时生效)

文件准备

Rive

  1. Rive 平台创建或下载动画角色
  2. 导出为 .riv 文件
  3. 将文件放入 public/ 目录(如 public/model.riv
  4. 在配置中引用 src: '/model.riv'

Live2D

  1. 准备 Live2D 模型文件(.model3.json 及配套资源)
  2. 将模型目录放入 public/ 目录
  3. 在配置中引用入口 JSON 文件路径

关闭虚拟角色

agent: {
    enabled: false,
}
未知标题
00:00
00:00
播放列表