雪莉 (Sherry) 3D 虚拟形象集成方案

1. 核心目标

为“雪莉”打造一个基于 Web 的轻量级 3D 虚拟形象，使其能够作为个人助理在桌面或网页端与用户进行自然交互。

2. 技术架构 (Technical Architecture)

本方案采用 Web 标准技术栈，确保跨平台兼容性与低资源占用。

核心组件

  • 模型格式: VRM (Virtual Reality Model)
    • 优势: 专为人形角色设计，标准化了骨骼、表情 (BlendShapes) 和视线控制，文件体积小，适合 Web 加载。
    • 工具: 使用 VRoid Studio 生成基础模型，通过 Blender 进行精细化修饰（如配饰、发型微调）。
  • 渲染引擎: Three.js + @pixiv/three-vrm
    • Three.js: WebGL 的标准封装库，生态丰富。
    • @pixiv/three-vrm: 官方提供的 VRM 加载与解析库，能够自动处理 VRM 的骨骼映射和表情控制器。
  • 运行环境: Electron (桌面端) 或 Modern Web Browser (网页端)
    • 利用 Electron 的透明窗口特性，可实现“桌面精灵”效果，让雪莉悬浮在其他窗口之上。

架构图示

graph TD
    A[用户输入 (语音/文本)] --> B(OpenClaw Agent Core);
    B --> C{决策逻辑};
    C -->|回复文本| D[TTS 引擎];
    C -->|动作指令| E[3D 渲染端 (Three.js)];
    D -->|音频流| F[AudioContext];
    F --> G[LipSync 分析器];
    G --> H[VRM 表情控制器];
    E --> H;
    H --> I[最终画面渲染];

3. 交互风格设计 (Interaction Style)

为了符合“雪莉”作为贴心助理的设定，交互设计注重亲和力与灵动感。

  • 待机状态 (Idle):
    • 微动作: 呼吸起伏、自然的眨眼（随机间隔）、头部跟随鼠标微动（LookAt 机制）。
    • 随机事件: 偶尔整理头发、伸懒腰或推眼镜，打破僵硬感。
  • 对话状态 (Active):
    • 倾听: 身体前倾，眼神专注，偶尔点头。
    • 思考: 手指轻抵下巴或视线向上偏移。
    • 回答: 配合语音节奏进行手势表达（如摊手、挥手），表情随情感分析结果变化（开心、困惑、严肃）。
  • 情感反馈:
    • 基于 NLP 分析的情感标签（Happy, Sad, Angry, Neutral）实时驱动 VRM 的 BlendShapes（如 Fun, Sorrow, Angry）。

4. 口型同步方案 (Lip Sync)

口型同步是虚拟形象“活”起来的关键。采用 基于音频频谱的实时驱动 方案。

方案细节

  1. 音频源: 获取 TTS 生成的音频流或实时语音流。
  2. 频域分析: 使用 Web Audio API 的 AnalyserNode 获取音频的 FFT 数据。
  3. 元音映射:
    • 分析特定频段的能量值，映射到日语元音口型 (A, I, U, E, O)。
    • 简化算法: 仅检测音量大小 (RMS) 来驱动嘴部开合 (aa BlendShape)，配合少量的随机嘴型变化，在计算资源有限时也能获得不错的效果。
  4. 平滑处理: 对计算出的口型权重进行插值 (Lerp)，避免嘴部动作抖动过快。

5. 分阶段实施建议 (Phased Implementation)

第一阶段：静态展示与基础渲染 (MVP)

  • 目标: 成功加载 VRM 模型并在网页中显示。
  • 任务:
    • 搭建 Three.js 基础场景（相机、光照）。
    • 加载雪莉的 VRM 模型。
    • 实现基础的轨道控制器 (OrbitControls) 以便查看模型。

第二阶段：动态交互与眨眼呼吸

  • 目标: 让模型“动”起来，不再是雕像。
  • 任务:
    • 引入 VRMAnimation 或手动更新骨骼实现呼吸动画。
    • 编写自动眨眼逻辑 (AutoBlink)。
    • 实现鼠标视线跟随 (LookAt Mouse)。

第三阶段：语音对接与口型同步

  • 目标: 让雪莉能够“开口说话”。
  • 任务:
    • 集成 TTS 引擎。
    • 实现 AudioAnalyser 到 BlendShapeProxy 的映射逻辑。
    • 测试不同语速下的口型匹配度。

第四阶段：桌面精灵化 (Desktop Pet)

  • 目标: 将 Web 页面打包为桌面应用。
  • 任务:
    • 使用 Electron 封装项目。
    • 配置窗口透明与穿透属性。
    • 实现系统托盘控制与快捷键唤醒。