这个网站首页的封面视频、以及作品页里那个可以拖拽旋转的数字人，背后是同一套流水线：从一张照片出发，做出一个能实时交互的网页数字分身。这篇复盘完整讲一遍。

整体流程：五步

  1. 形象设计：基于照片用 AI 生成形象设定，统一发型、服装与气质，确定”数字分身”的视觉方向。
  2. 3D 化：把形象转成 VRM 格式的 3D 模型——这是专门为实时渲染设计的开放格式，自带标准人形骨骼。
  3. 离线渲染出片：在 Blender 里搭转台场景（三点布光 + 相机环绕动画），EEVEE 渲染 1080×1080、30fps、300 帧，合成网站用的转台视频。
  4. 实时交互：网页端用 three.js + three-vrm 直接加载 VRM，支持拖拽旋转、滚轮缩放。
  5. 注入生命感：给模型加了一套待机动画引擎——呼吸、重心转移、环顾四周，动作之间平滑交叉过渡，不再是僵硬的立正。

踩过的坑

  • VRM”打不开”：在 Blender 里装好 VRM 插件后，要用 File → Import → VRM 导入，而不是 File → Open——听起来很傻，但真的卡过不少人（包括我）。
  • 贴图压缩毁模型：给 GLB 压缩贴图时如果重排了 bufferView 索引，accessors 的引用会全部失效，模型直接渲染不出来。后来改成原地替换、索引不动，17MB 压到 11MB，画质无损。
  • 骨骼方向相反：VRM 0.x 和 1.0 的骨骼旋转符号是反的，同一组参数在两代模型上一个自然一个”骨折”。兼容方案是根据 metaVersion 取符号。
  • 浏览器缓存钉死旧代码：静态资源开启了 immutable 缓存后，改了 JS 用户也拿不到新的。所有脚本引用必须带上主题版本号做 query。

一些思考

数字分身其实是个人品牌的最小载体：它比头像有温度，比视频更可控，比直播成本低。待机动画上线后，页面平均停留时长明显变长了——”活的东西”天然吸引注意力。

下一步我打算给它加上口型驱动的自我介绍，让它真的能”接待”访客。