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 开发者，而是把“写代码搭场景”变成“说话搭场景”。three.js 编辑器在界面右下角悬浮着一个 AI 助手入口，点击后弹出的聊天窗口背后，连接的是一套完整的 LLM 运行时与工具链。它不仅能聊天，还能真正理解当前场景、调用编辑器能力、增删改查对象。本文将厘清它的能力半径：哪些事 AI 可以一手包办，哪些事仍然需要人类做最后把关。
能做什么：从意图到执行
three.js 编辑器的 AI 层把大语言模型包装成“场景操作员”。用户输入自然语言后，runtime 会结合历史对话、当前场景状态与系统提示词，生成一系列工具调用。这些工具覆盖场景构建的方方面面：加载线上 GLB 模型、添加灯光、调整材质、切换天空盒、记录视角、控制动画时间线，乃至清理缓存和导出分享链接。
例如当你说“在场景中央加一个蓝色点光源，强度调高一点”，AI 会调用addCoreLight与setProps两个动作，自动完成对象创建、定位和参数修改。更复杂的指令如“给选中的模型添加水波纹 Shader”也会被拆解为applyBlendShader，并自动识别当前选中对象。
AI 还能读取场景上下文。getSceneStats可返回物体数、顶点数、三角面数；getSpatialContext能感知地面高度、网格间距；listBlendShaders与listResources让 AI 知道当前编辑器有哪些 Shader 和组件可用。这些信息被注入对话上下文，使 AI 不会盲目推荐不存在的能力。
不能做什么：边界与护栏
three.js 编辑器的 AI 并非万能。它运行在浏览器端，依赖外部 LLM API，因此网络中断或模型幻觉仍会导致失败。更重要的是，AI 不能替你做设计决策：构图、叙事节奏、品牌配色、性能预算，这些仍需人类审美与工程经验。
在实现层面，AI 被设置了多重护栏。validateEditInput会拦截对组件使用color/metalness等错误通道的修改，强制要求通过params/uniforms调整。危险操作如clearEditorCache需要显式传入confirm:true；删除场景槽、新建对话、删除对话等也需要用户二次确认。AI 还被限制不能修改受保护对象，例如相机、TransformControls、各类 Helper 与场景根节点。
能力检测与回退
为了让 AI 知道自己的边界，three.js 编辑器提供了listEditorActions。该函数会扫描当前编辑器实例，返回每个动作是否被支持以及缺失的能力路径。如果某个后期处理通道未就绪，AI 会收到supported:false与missing列表，从而选择替代方案或提示用户。这种“先探测再执行”的机制显著提升了复杂任务的成功率。
人机协作的最佳姿势
目前最推荐的工作流是：先让 AI 做“粗粒度的场景搭建”——加载模型、布光、加地面、设天空；再由人类在右侧面板和 GUI 控制板里微调材质、动画关键帧和相机视角；最后把高频修改沉淀成组件或场景模板。这样 AI 负责重复劳动，人类负责品味与决策，双方各取所长。
代码一瞥
以下是 AI 动作注册表的核心片段，展示了 three.js 编辑器如何把大模型输出映射为可执行动作：
export const EDITOR_ACTIONS = {
loadOnlineModel: { desc: 'modelCores.loadModel + attach_add（等同核心→模型管理）', params: { url: 'string', position: '[x,y,z] optional', flyTo: 'boolean optional' } }, addCoreLight: { desc: '添加光源并 attach_add（等同 lightCores）', params: { type: 'AmbientLight|DirectionalLight|...', position: '[x,y,z]', color: 'hex optional', intensity: 'number optional' } }, applyBlendShader: { desc: '混合着色器（等同对象→着色配置）', params: { id: 'number', shaderName: '如 水波纹', uvType: 'material|world optional' } }, setSceneSkybox: { desc: '六面 skybox（baseUrl/1.png..6.png）或 clear', params: { baseUrl: 'string optional', clear: 'boolean optional' } } };
通过runEditorAction(editor, { action, params })，AI 的每一次意图都被转换为对编辑器能力的确定性调用，而不是直接生成并执行不可控的 JavaScript 代码。这就是 three.js 编辑器 AI 能力的边界所在：它不是无所不能的“黑箱魔法师”，而是一个有工具、有护栏、有回退的智能协作者。
