CGA.js IDE 简介

IDE 是本站的在线 CGA 规则开发环境，基于 CodeMirror 5 编辑器与 Three.js 3D 渲染引擎。

界面布局

• 左侧边栏：文件浏览器、Inspector、AI 生成面板、近期修复记录
• 中间编辑器：CodeMirror 代码编辑器，支持语法高亮与自动补全
• 右侧预览：Three.js 实时 3D 预览，支持线框/实体切换

快捷键

代码补全

输入函数名前缀时按 Ctrl + Space 或等待自动弹出，会显示所有匹配的 CGA 操作与函数。点击条目后自动插入参数模板并选中第一个参数。

3D 预览操作

• 左键拖拽：旋转视角
• 右键拖拽：平移视角
• 滚轮：缩放
• 点击右下角 🔲 Solid 按钮切换线框/实体模式

方案 A：侧边栏聊天面板

推荐测试 IDEA.html

在 IDE 右侧新增固定宽度的 AI 聊天侧边栏，类似 VSCode Copilot Chat 的体验。

访问入口

使用步骤

1. 打开 IDEA.html 进入测试环境
2. 在 main.cga 编辑器中编写或粘贴你的 CGA 代码
3. 在右侧 AI 面板底部的输入框中描述问题，例如：

   roofHip 函数报错，帮我检查参数

4. 点击发送，系统自动将「完整代码 + 解析器错误 + 你的问题」格式化为标准 Prompt
5. 点击 📋 复制完整上下文发给 Kimi，将 Prompt 复制到剪贴板
6. 将复制的内容粘贴给 Kimi（微信 / 网页 / App）
7. Kimi 回复后，将完整回复粘贴回 AI 面板的文本框
8. 点击 🔍 解析修改建议，系统自动提取 diff
9. 对每处修改点击 应用 或 忽略

自动修复按钮

点击面板底部的 🔧 自动修复 按钮，系统会自动捕获当前解析器错误并生成修复请求，无需手动描述问题。

收起面板

点击面板标题栏的 × 可收起侧边栏，释放编辑器空间。再次点击可展开。

方案 B：代码内联 AI 助手

沉浸式体验 IDEB.html

不占用侧边栏空间，AI 功能直接锚定在代码行上，按需弹出浮动对话框。

访问入口

使用方式一：错误行修复

1. 打开 IDEB.html 进入测试环境
2. 当 CGA 解析器报出错误时，对应行号旁会出现 💡 图标
3. 点击 💡 图标，弹出浮动对话框，已自动填入该行错误信息
4. 可补充描述后点击 询问，系统格式化 Prompt 并复制到剪贴板
5. 将 Prompt 发给 Kimi，收到回复后粘贴回对话框
6. 点击 应用修改 即可写入编辑器

使用方式二：选中文本提问

1. 在编辑器中用鼠标选中任意代码片段（5~500 字符）
2. 松开鼠标后，光标附近会出现 🤖 问 Kimi 浮动按钮
3. 点击按钮，系统自动复制「完整代码 + 选中代码」上下文
4. 粘贴给 Kimi 提问，收到回复后按方式一的应用流程操作

关闭对话框

点击浮动框右上角的 × 或点击对话框外的区域即可关闭。

方案 C：零复制 AI 对话（IDEC）

正式版 IDEC.html SSE 流式

通过后端 SSE 转发接口，实现前端与 Kimi AI 的真正零复制自动对话。无需手动复制粘贴，代码和对话全部在浏览器内完成。

访问入口

使用步骤

1. 打开 IDEC.html，输入开发者访问密码进入（密码请向管理员索取）
2. 在左侧 main.cga 编辑器中编写或粘贴你的 CGA 代码
3. 在右侧 🤖 Kimi AI 对话面板中直接输入问题，按 Enter 发送
4. AI 回复以流式 SSE实时显示，无需等待完整响应
5. 点击 📋 发送当前代码 一键将编辑器完整代码发给 AI
6. 点击 ⚠️ 发送代码+错误 自动编译并附带错误信息一起发送
7. 点击回复中的 复制 按钮可复制单条回复内容
8. 点击 🗑️ 清空对话 可重置对话历史

技术架构

IDEC 前端  --fetch(SSE)-->  /api/v1/ai-chat  --API-->  Kimi / DeepSeek / Qwen
                                    ↑
                              AutoSwitchLlmClient
                          自动故障转移 + 流式转发

与 A/B 方案的区别

AI 工作流说明

本站提供三种 AI 辅助方案，满足不同使用习惯：

• 方案 A (IDEA.html)：侧边栏聊天面板，半自动桥接模式
• 方案 B (IDEB.html)：代码内联助手，沉浸式体验
• 方案 C (IDEC.html)：零复制 SSE 流式对话，后端自动转发

Prompt 自动格式化

点击「复制」时，系统会自动生成如下格式的 Prompt，确保 Kimi 能准确理解上下文：

【CGA 代码】
```cga
version "2024.1"
Lot --> extrude(10) color(1,0,0)
...
```

【解析器错误】
Parse error at line 3: unknown operation 'roofHip'

【用户问题】
roofHip 函数报错，帮我检查参数

请直接给出修改建议，格式：
【修改】
旧代码 -> 新代码
或给出完整的替换代码块。

Diff 解析规则

粘贴 Kimi 回复后，前端会自动识别以下两种修改格式：

• 箭头格式：旧代码 -> 新代码 → 在编辑器中查找并替换
• 代码块格式：```cga ... ``` → 提供全文件替换选项

CGA 函数库

本站提供完整的 CGA.js 函数文档库，按 CityEngine 官方文档分类排列。

分类结构

函数库按以下 24 个官方分类组织：

1. 🏗️ Geometry Creation — 几何创建（extrude、primitiveCube、roofHip 等）
2. ✂️ Geometry Subdivision — 几何细分（split、comp、setback 等）
3. 🔧 Geometry Manipulation — 几何操作（mirror、center、rectify 等）
4. 🔗 Rule Inlining and Boolean — 规则内联与布尔（inline、union、subtract 等）
5. 🎨 3D Texturing — 3D 纹理（color、texture、setupProjection 等）
6. 🔃 Transformations — 变换（t、r、s、rotateScope 等）
7. 📐 Scope — 作用域（alignScopeToAxes、setPivot 等）
8. 📊 Shape Attributes — 形状属性（scope.sx、pivot.px、comp.index 等）
9. 🔢 Math Functions — 数学函数（abs、sin、max、sqrt 等）
10. 🎲 Probability Functions — 概率函数（p、rand 等）
11. 🔄 Conversion Functions — 转换函数（bool、float、int、str 等）
12. 🔤 String Functions — 字符串函数（len、find、replace 等）
13. 📋 Array Functions — 数组函数（size、sort、mean、median 等）
14. 📜 List Functions — 列表函数（listAdd、listSize 等）
15. 📐 Geometry Functions — 几何查询（geometry.area、geometry.nFaces 等）
16. 🎨 Material Functions — 材质函数（setMaterial、getMaterial 等）
17. 📁 File Functions — 文件函数（fileExists、readTextFile 等）
18. 🖼️ Asset and Image Functions — 资源函数（assetInfo、imageInfo 等）
19. 👁️ Occlusion Functions — 遮挡函数（inside、overlaps、touches 等）
20. 🌐 Context Functions — 上下文函数（contextCompare、contextCount 等）
21. 📏 Edge Attribute Functions — 边属性函数（edgeAttr.getBool 等）
22. 🔧 Miscellaneous Functions — 杂项（print、report、NIL 等）
23. 📝 CGA Language Keywords — 关键字（attr、const、func、import 等）
24. 🏷️ Annotations — 注解（@Range、@Enum、@Hidden 等）

使用方式

点击任意函数名称进入详情页，可查看：

• 官方语法与参数说明
• CGA 示例代码
• 3D 实时预览（由引擎解析示例并渲染）
• 实现状态标签（已实现 / 部分实现）

关键字与语法

规则定义

RuleName --> operation1 operation2 ...

属性声明

attr height = 10
attr width = 20

常量声明

const PI = 3.14159

函数声明

func add(a, b) {
  return a + b
}

条件分支

Building -->
  case scope.sy > 10: HighBuilding
  else: LowBuilding

概率分支

Tree -->
  50%: OakTree
  30%: PineTree
  else: Bush

组件分割

comp(f) { front: FrontFacade | side: SideFacade | top: Roof }

Split 分割

split(x) { 2 : A | 3 : B | ~1 : C }

开发路线图

查看 CGA.js 引擎与 NL2CGA 项目的完整开发计划与时间表。

路线图页面包含：

• 各阶段任务清单与完成状态
• CGA 文件库架构图
• 开发里程碑时间轴

NL2CGA 自然语言生成

用自然语言描述建筑，AI 自动生成对应的 CGA 规则代码。

使用示例

输入：

一座 10 层现代办公楼，玻璃幕墙，底部有 3 层裙楼，顶部是平屋顶

输出：对应的 CGA 规则代码，可直接复制到 IDE 中运行。