Blender+Vue 复刻《明日方舟》官网 3D 交互 UI

浏览明日方舟官网时，冷峻的工业风、科技感极强的 3D 悬浮交互 UI 总能让人眼前一亮。鼠标划过时模型局部泛起全息蓝光，并伴随着精准的 UI 边框锁定。
一开始以为这需要引入 Three.js 并在前端实时渲染 3D 模型。但深入剖析后发现：这是一场极致的视觉欺骗。 业界最成熟、性能最好的方案，是将 3D 渲染与 2D 前端解耦的 “三渲二”。
这篇博客将完整记录如何利用开源 3D 模型，结合 Blender 和 Vue 3，从零搭建出这个硬核交互页面的全过程，以及期间踩过的性能与渲染大坑。

第一阶段：Blender 里的伪 3D造景术

UI再炫酷，也需要资产基底。这一步的核心目的只有两个：强制统一画风与分离交互图层。

1.使用正交摄像机

使用开源素材搭好场景后，遇到的第一个反直觉设定是摄像机。

原理：人类肉眼习惯透视产生的近大远小，但在科技风UI中，则需要的是像精密工业图纸一样的绝对平行。
操作：必须将摄像机切换为 正交 (Orthographic) 模式。此时，物理空间的前后推拉失效，只能通过调整 Orthographic Scale 来缩放画面。固定视角后，必须全方位锁定摄像机参数，哪怕偏移 1 个像素，后续的前端图层叠加都会彻底错位。

2. 剥离贴图，建立“高级灰”

开源模型自带的木纹、粉色霓虹灯在同一个画面里会引发严重的“画风割裂”。

操作：剥离所有原生材质，统一赋予自调的 M_Base_Grey（低金属度 0.3，高粗糙度 0.7）。
避坑警告：绝对不能把粗糙度降到 0 变成完美镜面。在纯黑的环境光下，完美反射会导致模型在一片死黑中彻底隐身，丧失所有三维体积感。

3.Holdout与透明分离

整个项目最重要的 3D 原理就在于此。为了实现点击交互，需要输出两张图：

纯灰底图
只有高亮物体（带有蓝色发光和桌面反光）的透明图
如果在渲染高亮层时直接隐藏桌子，光晕就没有了载体；如果强行把桌子变成完全透明，原本埋在桌面以下的残缺模型就会暴露，导致前端叠加时深度关系彻底崩溃。

解法：在 View Layers 中，将桌子所在的集合设置为 Holdout。
原理：桌子不仅变得完全透明并保留了反光，还化身成一个“像素黑洞”，精准地把被它遮挡的徽章下半部分给“挖空”了。真实的 3D 遮挡关系，就这样完美降维成了 2D 图层关系。
[ 插入图片：展示大纲视图中的 Holdout 图标，以及渲染出的一半被切掉的透明 PNG 发光图]

第二阶段：Vue 3 前端重构与事件流陷阱

拿到美术资产后，切回 VS Code。核心思路是用 CSS 的 position: absolute 像三明治一样把图层叠起来。

1. The Z-Index Sandwich

底层：全灰的底图 (z-index: 1)。
中层：带有 Alpha 通道的高亮特效 PNG (z-index: 10)。
顶层：用纯 HTML/CSS 写的白色精准定位框和蓝色色块 (z-index: 20)。
将 UI 装饰（白框/文字）交给 DOM 渲染，不仅保证了无极缩放时的矢量清晰度，还能轻松加上 CSS 过渡动画（Transition）。

2. 物理穿透：`pointer-events: none`

由于顶层的白色 UI 边框盖在了高亮图层上面，在测试点击切换时，遇到了经典的 DOM 事件流遮挡问题：鼠标点到了白框上，底下的交互逻辑根本触发不了。

原理解析：event.target 判定被最上层元素拦截。
一行代码的救赎：给 UI 框加上 pointer-events: none;。

第三阶段：动态计算 vs 预编译

在实现UI 边框精准套住高亮发光模型，发现有两种解法

方案一：Canvas Alpha 像素扫描

起初用了一套纯 JS 算法：在图片 @load 时用离屏 <canvas> 获取 getImageData，遍历所有的 rgba 数组。通过设置 Alpha 阈值（Alpha > 30 过滤掉微弱泛光），动态计算出模型的最小包围盒（Bounding Box），并转化为百分比赋给白框。

痛点：这套方案极度消耗主线程。实测在切换侧边栏时，由于要瞬间遍历几百万个像素，出现了大约 3 秒的严重卡顿和延迟。

方案二：设计软件测量法

与其让成千上万的客户端去重复计算一个永远不会变的静态坐标，不如把计算前置。

最终方案：直接在 Figma/Photoshop 里量出百分比位置，硬编码写死在 JSON 数据里。
工程学：这就是奥卡姆剃刀原理在前端性能优化上的终极体现。零 JS 计算开销、零内存占用，换来的是所有低端设备的极致丝滑。能用预处理解决的物理状态，绝不用客户端 CPU 去实时运算。

优秀的前端交互不仅仅是死磕 CSS 动画或 JS 框架，更是对图形学底层逻辑的降维应用。通过 Blender 自动化管线处理光影遮挡，再用 DOM 处理事件交互，关注点分离的思想贯穿始终。

代码不仅要优雅，更要敬畏性能。