企业官网建设流程全解析

three.js 编辑器的整体架构精讲

本文围绕three.js 编辑器（一款基于 Three.js 的 AI 驱动可视化低代码编辑器）展开。

- 🌐 在线预览： https://z2586300277.github.io/threejs-editor/

- 📦 GitHub 开源仓库： https://github.com/z2586300277/three-editor

- 📚 文档地址： https://z2586300277.github.io/three-editor/docs/dist

three.js 编辑器不是简单地在 Three.js 外面包了一层 UI，而是把三维开发拆成了多个清晰的层次。理解它的整体架构，能帮你更快地上手二次开发，也能让你明白它为什么既能低代码又能深度扩展。

分层设计

从上到下，编辑器可以分成四层：

• 界面层：基于 Vue3 + Element Plus，负责面板、工具栏、菜单等交互；
• 能力编排层：AI 助手、事件系统、动画系统、模板系统等，把用户操作翻译成对内核的调用；
• 内核层：ThreeEditor类，封装场景、相机、渲染器、控制器、后期处理等；
• 组件层：80 多个内置组件，每个组件对应一类可复用的三维效果。

数据流动

用户在界面层点击“添加组件”，能力层会调用内核 API 创建对象，并把参数同步到场景图中。右侧面板监听到对象变化后，再刷新属性显示。这种单向数据流让状态管理清晰可控。

扩展接口

内核层暴露了大量 API，组件层只需要实现统一的create和update接口。AI 助手则通过runEditorAction调用能力层，避免直接操作 WebGL。

代码一瞥

// 典型调用链
editor.addComponent({ label: '光柱' }) // 1. UI 层触发 // 2. 能力层找到光柱组件定义 // 3. 内核层创建 Mesh 并加入 scene // 4. 场景图通知右侧面板更新