返回造梦档案
DREAM 0093D 交互已经实现

网页数字人

让一个 VRM 角色真正站进网页里。

换一个角色,不应该重做整张网页。

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

一个想法,最终需要落进具体体验。

这里只列会改变体验的能力。鼠标经过卡片时,光跟着视线移动一点,用来提示焦点。

01

模型可替换

内置样例与自定义 VRM 走同一条加载路径,替换角色不需要重做页面。

VRM 0.x / 1.0
02

导入先体检

加载本地文件后检查格式签名、作者与许可、标准骨骼、嘴型、眨眼、视线、弹性骨骼、体积和三角面。

问题先被看见
03

状态可控制

待机、倾听、思考与说话可以由宿主页面调用,语音播放时口型随音量变化。

页面负责业务,角色负责回应
04

一键接入宿主

Manifest 保留模型、菜单和能力配置,开源 Skill 负责识别宿主框架、安装组件并完成浏览器自检。

默认放在左下角

ONE MODEL / ONE MANIFEST / ONE SKILL

从一份 VRM,
到网页左下角的数字人。

工作台负责导入、体检与发布;开源 Skill 负责识别目标网站框架、安装运行组件并完成浏览器自检。

  1. 01IMPORT

    选择你的 .vrm

    在工作台中选择本地 VRM,检查版本、骨骼、表情、视线、体积与首帧方向。

  2. 02CONFIGURE

    确认权利与能力

    确认作者和再发布许可,再选择动作、表情、视线、坐姿、启动状态与菜单项。

  3. 03PUBLISH

    发布 Manifest

    发布后复制 latest.json 地址。它会让已接入的网站自动跟随工作台更新和回滚。

  4. 04INSTALL

    把任务交给 Codex

    在目标网站项目中粘贴下方提示词。Skill 会选择正确入口,默认安装到左下角并验证实际效果。

CODEX / READY TO COPY

用发布后的 Manifest URL 替换占位文字即可。

01 / 持续更新

推荐 latest.json工作台重新发布或回滚后,已接入网站会自动跟随。

02 / 锁定版本

选择 versions/.../manifest.json网站只在下次代码发布时更换数字人版本。

FROM IDEA TO EXPERIENCE

从一份 VRM 文件,到一个能被页面调用的角色。

每一步都在真实浏览器里检查,不把“文件能下载”当成“角色能使用”。

  1. 01

    筛选模型

    先确认来源、许可、文件大小与 VRM 版本,再进入浏览器。

  2. 02

    校准首帧

    检查朝向、T-Pose、比例、镜头与自然站姿,避免模型加载了却无法展示。

  3. 03

    补齐生命感

    加入眨眼、呼吸、视线、表情与弹性骨骼更新。

  4. 04

    拆出组件

    用属性、方法与事件连接宿主页面,并让内部样式保持隔离。

  5. 05

    验证替换路径

    用 VRM 0.x、VRM 1.0、无效文件和移动端视口分别测试。

GROWTH LOG

这个梦,是怎样长大的。

  1. 三种开放样例进入试镜台

    先验证模型许可、VRM 版本、姿态、镜头与真实首帧效果。

  2. 自定义模型导入器完成

    本地文件可以检查骨骼、表情、视线、弹性骨骼、体积与三角面。

  3. 成为可嵌入组件

    用 Shadow DOM、iframe 和状态事件把数字人与宿主页面隔离。

  4. 进入 ZAOMENG.ING

    修复子路径资源,完整试镜台和嵌入示例成为可直接访问的线上页面。

  5. 安装 Skill 开源

    工作台发布 Manifest,Skill 负责识别宿主框架、安装到左下角并完成桌面与 390px 自检。

DESIGN PRINCIPLES

可替换,才算真正进入产品。

角色、页面与业务状态彼此解耦,未来换成自己的模型时,只改必要的资源与校准参数。

模型不写死

组件接受内置名称或自定义 URL,本地试镜台也支持直接选择文件。

失败要可恢复

无效模型显示明确错误,并保留上一个有效角色和体检报告。

许可先于展示

每个公开样例保留来源与使用条件;自己的模型也应确认作者授权与再发布边界。

移动端也能站住

嵌入高度、镜头余量与控件布局在 390 像素视口继续成立。

BRING YOUR OWN AVATAR

下一位站进来的,可以是你自己的角色。

打开工作台导入 `.vrm` 文件,确认授权与真实渲染后发布 Manifest,再把接入交给开源 Skill。

NEXT DREAM / 继续漫游
橘子

接住一句话。

搜索文章与手记

开始输入,寻找一段文字。