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/distthree.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. 场景图通知右侧面板更新