前端 3D 工业大屏的工程化落地：从分层架构到性能优化

Smart AI Code2026-09-27阅读约 5 分钟

本文基于开源项目 MF-TurbineMonitor（作者 fengtianxi001）的拆解。完整代码与在线体验：GitHub | 在线演示

MF-TurbineMonitor 是一个风力发电机数据大屏案例，采用 Vue3 + TS + Vite + Three.js + ECharts + TWEEN + mockjs + autofit.js 技术栈，无后端、数据全部为 mock。它把 3D 设备、实时数据面板和拆解动画整合到同一个大屏里，且代码可维护、可复用、性能可控。本文适合正在做或即将做 3D 可视化大屏的前端开发，以及想了解 Three.js 在工业场景下如何落地的读者。

一、整体架构：三个 hooks 分层解耦

项目把 Three.js 场景、设备业务与图表封装拆成三个 hooks，用 provide/inject 串事件：

  • useThree.ts —— Three.js 场景、渲染器、模型加载与渲染循环
  • useTurbine.ts —— 风机设备的业务逻辑（交互、动画、状态管理）
  • useEcharts.ts —— ECharts 图表的按需引入与数据驱动

改造成其他设备时只需改动 useTurbine，useThree 不用碰。这种分层思路是整个项目最值得借鉴的地方，而不是某个炫酷效果本身。

二、3D 场景的渲染器配置

渲染器需要开启 alpha 与 localClippingEnabled，这是后续削切动画的前提条件。很多做"切开外壳"效果失败的案例，往往就是漏掉了这一行配置。

模型方面，项目使用 3 个 Draco 压缩的 GLB 文件：

  • equipment（9 个零件）
  • skeleton（拆出颜色/线框两个外壳）
  • plane（地面）

通过 getObjectByName 按建模命名取对象，避免硬编码对象引用。渲染循环使用 renderMixins Map 挂载自定义函数，实现可插拔的渲染扩展。

三、交互实现：双层高亮与状态机收敛

交互上分为点击与悬浮两种场景，技术路线不同但对外暴露统一接口：

点击交互：通过 Raycaster 拾取目标对象，再用 OutlinePass 描边高亮。

悬浮交互：使用自定义 hexPass 修改 material.emissive 实现自发光效果。

两种技术路线对外统一为 selectedObjects 接口。作者认为，把状态切换收敛为 selectedObjects 的 setter（即状态机）是组件化交互最优雅的写法——调用方无需关心内部实现，只需设置选中对象即可。

四、动画编排：TWEEN chain 串序列

平面削切动画：给 THREE.Plane 挂载 clippingPlanes，通过 TWEEN 动画化 constant 实现"切开外壳"的效果。

拆解动画：零件坐标集中配置，从 COMPOSE 状态插值到 DECOMPOSE 状态，使用 TWEEN 的 chain() 方法串联序列，而不是用 setTimeout。这样做可控、可取消，便于在组件卸载时清理动画。

五、3D 标签：Vue 组件渲染为 3D 对象

3D 标签通过 loadCSS2DByVue 把 Vue 组件渲染成 DOM，再包装成 CSS2DObject 挂载到场景中。这样可以复用 Vue 模板、样式与事件处理，避免在 Three.js 里手写 DOM 操作。

六、数据与图表

  • 动态数据用 mockjs 生成，静态统计硬编码
  • ECharts 按需引入并封装 useEcharts，7 个面板不重复造轮子
  • 详情面板用 computed(() => CONFIG[props.name]) 实现数据驱动切换

七、性能与部署

  • 使用 autofit.js 做 1920×1080 等比缩放
  • 字体分包、imagemin 压缩、manualChunks 依赖分包，全指向首屏速度
  • 产物输出到 docs/ 目录，通过 base:'./' 配置实现 GitHub Pages 零成本托管

八、三个关键的工程细节

  1. 动画用 chain 不用 setTimeout：可控、可取消，避免动画堆积与内存泄漏
  2. 组件卸载时调用 geometry/material.dispose()：不释放 GPU 内存会越跑越卡
  3. selectedObjects setter 即状态机：调用方不用管内部实现，降低组件间耦合

九、验证与二次开发

如果你想基于这个项目做二次开发，建议按以下顺序验证：

  1. 先跑通 GitHub Pages 在线体验，确认整体视觉效果与交互流畅度
  2. 本地克隆项目，确认开发环境（Vue3 + TS + Vite + Three.js）能正常构建
  3. 按 useThree → useTurbine → useEcharts 的顺序阅读源码，理解分层边界
  4. 尝试把 useTurbine 替换为其他设备的业务逻辑，验证架构的可复用性
  5. 在生产构建前检查 manualChunks 配置，确保依赖分包策略合理

注意事项：

  • 项目数据全部为 mock，接入真实数据时需要自行替换 mockjs 部分
  • 模型文件使用 Draco 压缩，需确保 Three.js 的 DRACOLoader 配置正确
  • GitHub Pages 托管受限于仓库公开性，生产环境部署需额外配置
← 返回