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 } }