ARTICLE DETAIL

建站实战干货

来自一线的建站与推广经验沉淀,每一条都经过真实交付验证。

three.js 编辑器的 AI 执行引擎

2026/8/3 11:09:28 拓冰建站 浏览量
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 首先需要理解意图:修改对象属性。然后它会调用getSceneStatsinspectScene获取上下文,确认场景中是否存在立方体。

动作编排

AI 执行引擎维护了一张动作表,对应EDITOR_ACTIONS中定义的能力,例如addCoreLightsetObjectParamsanimateMeshTransform等。每个动作都有参数说明和执行条件,AI 会根据需求选择合适动作。

安全护栏

为了防止 AI 误操作,引擎会对参数进行校验:数值范围、颜色格式、对象 ID 是否有效等。只有校验通过才会真正执行,失败时返回错误提示而不是破坏场景。

多轮上下文

历史会话会被保存,AI 能参考之前的对话继续修改。例如用户先让 AI 添加一个光柱,再说“把它变高一点”,AI 会知道“它”指的是刚才的光柱。

代码一瞥

await runEditorAction(editor, {

action: 'setProps', params: { id: meshId, color: '#ff0000', position: [2, 0, 0] } })