A VRM AVATAR FOR THE WEB
先让角色稳定站进网页,再谈它要说什么。
这个工作台把模型导入、版本适配、姿态、动作、表情与发布放在同一条路径上,再用一份 Manifest 和开源 Skill 把数字人安装到其他网站。
关于这个梦
网页数字人先解决一件具体的事:让 VRM 角色在真实浏览器里稳定出现。工作台可以检查 VRM 0.x 与 1.0 的兼容性,也能导入自己的 .vrm 文件,查看骨骼、表情、视线、弹性骨骼和模型体积等体检结果。
为什么做成可嵌入组件
工作台适合选角色、校准、编辑动作与表情,并发布一份可版本化的 Manifest。真正接入网站时使用 <digital-human-assistant> 组件;开源的 install-digital-human Skill 会将它安装到静态 HTML、Astro、React、Next.js 或 Vue 网站,并验证桌面端与移动端的真实效果。




WHAT IT HOLDS
一个想法,最终需要落进具体体验。
这里只列会改变体验的能力。鼠标经过卡片时,光跟着视线移动一点,用来提示焦点。
模型可替换
内置样例与自定义 VRM 走同一条加载路径,替换角色不需要重做页面。
VRM 0.x / 1.0导入先体检
加载本地文件后检查格式签名、作者与许可、标准骨骼、嘴型、眨眼、视线、弹性骨骼、体积和三角面。
问题先被看见状态可控制
待机、倾听、思考与说话可以由宿主页面调用,语音播放时口型随音量变化。
页面负责业务,角色负责回应一键接入宿主
Manifest 保留模型、菜单和能力配置,开源 Skill 负责识别宿主框架、安装组件并完成浏览器自检。
默认放在左下角ONE MODEL / ONE MANIFEST / ONE SKILL
从一份 VRM,
到网页左下角的数字人。
工作台负责导入、体检与发布;开源 Skill 负责识别目标网站框架、安装运行组件并完成浏览器自检。
- 01IMPORT
选择你的 .vrm
在工作台中选择本地 VRM,检查版本、骨骼、表情、视线、体积与首帧方向。
- 02CONFIGURE
确认权利与能力
确认作者和再发布许可,再选择动作、表情、视线、坐姿、启动状态与菜单项。
- 03PUBLISH
发布 Manifest
发布后复制
latest.json地址。它会让已接入的网站自动跟随工作台更新和回滚。 - 04INSTALL
把任务交给 Codex
在目标网站项目中粘贴下方提示词。Skill 会选择正确入口,默认安装到左下角并验证实际效果。
用发布后的 Manifest URL 替换占位文字即可。
推荐 latest.json工作台重新发布或回滚后,已接入网站会自动跟随。
02 / 锁定版本选择 versions/.../manifest.json网站只在下次代码发布时更换数字人版本。
FROM IDEA TO EXPERIENCE
从一份 VRM 文件,到一个能被页面调用的角色。
每一步都在真实浏览器里检查,不把“文件能下载”当成“角色能使用”。
- 01
筛选模型
先确认来源、许可、文件大小与 VRM 版本,再进入浏览器。
- 02
校准首帧
检查朝向、T-Pose、比例、镜头与自然站姿,避免模型加载了却无法展示。
- 03
补齐生命感
加入眨眼、呼吸、视线、表情与弹性骨骼更新。
- 04
拆出组件
用属性、方法与事件连接宿主页面,并让内部样式保持隔离。
- 05
验证替换路径
用 VRM 0.x、VRM 1.0、无效文件和移动端视口分别测试。
GROWTH LOG
这个梦,是怎样长大的。
三种开放样例进入试镜台
先验证模型许可、VRM 版本、姿态、镜头与真实首帧效果。
自定义模型导入器完成
本地文件可以检查骨骼、表情、视线、弹性骨骼、体积与三角面。
成为可嵌入组件
用 Shadow DOM、iframe 和状态事件把数字人与宿主页面隔离。
进入 ZAOMENG.ING
修复子路径资源,完整试镜台和嵌入示例成为可直接访问的线上页面。
安装 Skill 开源
工作台发布 Manifest,Skill 负责识别宿主框架、安装到左下角并完成桌面与 390px 自检。
DESIGN PRINCIPLES
可替换,才算真正进入产品。
角色、页面与业务状态彼此解耦,未来换成自己的模型时,只改必要的资源与校准参数。
模型不写死
组件接受内置名称或自定义 URL,本地试镜台也支持直接选择文件。
失败要可恢复
无效模型显示明确错误,并保留上一个有效角色和体检报告。
许可先于展示
每个公开样例保留来源与使用条件;自己的模型也应确认作者授权与再发布边界。
移动端也能站住
嵌入高度、镜头余量与控件布局在 390 像素视口继续成立。