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 编辑器在多个层面预留了扩展点让开发者和企业可以按需定制。组件扩展最核心的扩展点是组件。按照label、initParameters、create的规范任何人都可以新增组件。组件之间低耦合便于沉淀行业资产。内核 API 扩展内核层通过editor.panelApi、editor.shaderCores、editor.modelCores等模块暴露能力。开发者可以直接调用这些 API也可以在外部系统中复用three-editor-cores包。面板扩展Vue 界面层可以新增面板、工具栏按钮和菜单项。只要接入内核的响应式状态新面板就能与画布实时联动。AI 动作扩展EDITOR_ACTIONS定义了 AI 可调用的能力集。未来可以向其中注册新动作让 AI 助手掌握更多高级技能例如批量生成组件、自动优化场景等。主题与品牌扩展界面层的 Element Plus 主题、logo、品牌色都可以替换方便企业做私有化部署和品牌定制。代码一瞥// 注册自定义 AI 动作EDITOR_ACTIONS.myAction { desc: 我的自定义动作, params: { name: string } } HANDLERS.myAction (editor, params) { // 实现逻辑 return { ok: true } }
