three.js 编辑器的 AI 执行引擎
three.js 编辑器的 AI 执行引擎
本文围绕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
AI 助手不是简单地把用户输入发给大模型,再把返回的文本显示出来。three.js 编辑器内部有一套 AI 执行引擎,负责把自然语言转化为对编辑器的安全调用。
意图识别
当用户说“把场景里的立方体变红”时,AI 首先需要理解意图:修改对象属性。然后它会调用getSceneStats或inspectScene获取上下文,确认场景中是否存在立方体。
动作编排
AI 执行引擎维护了一张动作表,对应EDITOR_ACTIONS中定义的能力,例如addCoreLight、setObjectParams、animateMeshTransform等。每个动作都有参数说明和执行条件,AI 会根据需求选择合适动作。
安全护栏
为了防止 AI 误操作,引擎会对参数进行校验:数值范围、颜色格式、对象 ID 是否有效等。只有校验通过才会真正执行,失败时返回错误提示而不是破坏场景。
多轮上下文
历史会话会被保存,AI 能参考之前的对话继续修改。例如用户先让 AI 添加一个光柱,再说“把它变高一点”,AI 会知道“它”指的是刚才的光柱。
代码一瞥
await runEditorAction(editor, {
action: 'setProps', params: { id: meshId, color: '#ff0000', position: [2, 0, 0] } })