前言：AI 编程的时代来了

准备工作

2.1 工具选择

关键决策：单文件 HTML，不引入 webpack/vite。这是 AI 编程的一个重要策略——减少技术栈复杂度，让 AI 聚焦在业务逻辑上。

2.2 核心策略：分步迭代，一次只做一件事

我最核心的经验就一条：不要试图用一段 Prompt 描述整个项目。AI 不是魔法棒，你给它一个 "做一个很酷的校园大屏" 的 Prompt，它大概率给你一坨能跑但粗糙的代码，然后你再想改就难了。

正确姿势是分步迭代：

第1轮 → 基础场景骨架
第2轮 → 加交互（相机切换 + 昼夜模式）
第3轮 → 修 Bug + 优化参数
第4轮 → 扩展场景规模（道路 + 车辆 + 喷泉）
第5轮 → 加数据看板（Chart.js 图表）
第6轮 → 细节打磨（hover tooltip + 灯光联动）

每一轮只做一件事，每次改完都能跑、能看、能验证。这样 AI 的上下文始终清晰，你也始终有个可交付的中间产物。

三、6 轮 Prompt 实战全流程

下面我按照实际的 commit 记录，逐一还原每一轮的 Prompt 和结果。

第 1 轮：创建基础 3D 校园场景

🎯 目标：跑通最基本的 3D 场景 —— 地面、建筑、运动场、树木。

📝 我的 Prompt：

创建一个校园3D可视化场景的HTML文件，使用Three.js的ES Module导入方式。

要求：
1. 等距视角（OrthographicCamera，类似策略游戏视角），带OrbitControls可拖拽旋转缩放
2. 场景居中是一个标准运动场——蓝色圆角矩形跑道，内部是绿色足球场（Canvas纹理画白线）
3. 8栋不同尺寸的现代建筑分布在运动场周围，每栋有：
- 白色BoxGeometry主体 + 屋顶女儿墙 + 入口雨棚
- 四面均匀排布的蓝色玻璃窗户（PlaneGeometry）
- 底层装饰带
4. 不同高度和半径的树木散布在场景中（分层锥体树冠 + 圆柱树干）
5. 浅色路径连接各建筑
6. 渐变草皮贴片点缀地面增加自然感
7. 使用DirectionalLight+AmbientLight+HemisphereLight实现自然光照
8. 开启阴影（PCFSoftShadowMap）+ ACES色调映射

✅ AI 输出结果：

生成了一个约 700 行的 campus.html，包含：

• 正交相机 + OrbitControls，等距视角
• 蓝色圆角矩形跑道 + 带白线标记的足球场（Canvas 纹理）
• 8 栋建筑，每栋有白色主体、蓝色物理材质玻璃窗、屋顶结构和入口雨棚
• 约 30 棵树（三层锥体树冠 + 圆柱树干）
• 路径网络、地面草皮贴片
• 完整光照和阴影系统

🔍 这一步的要点：

• Prompt 中给出了具体的技术约束（ES Module、OrthographicCamera、PCFSoftShadowMap），避免了 AI 默认使用 CDN script 标签或传统相机
• 建筑、树木的描述给了尺寸范围和视觉特征，而不是抽象说 "创建一些建筑"
• 第一次跑出来的效果就已经"能看"了——这是建立信心的关键

第 2 轮：添加相机切换和昼夜模式

🎯 目标：增加用户可操作的交互功能。

📝 我的 Prompt：

在上一个版本基础上做以下修改：

1. 添加右上角两个按钮：
- "切换透视/正交"按钮 — 同时创建PerspectiveCamera(40°FOV)，
点击时在正交和透视相机之间切换，切换时保持当前视角位置不变
- "切换夜景/白天"按钮 — 点击时调整：
* 背景色和雾色（夜景深蓝 #162030）
* 环境光/半球光/方向光的强度和色温降低
* 建筑窗户的emissive自发光变暖黄色（模拟室内灯光透出）
* 降低toneMappingExposure
* 路灯灯泡emissiveIntensity增高

2. 修复建筑位置：building.position.y 应该设为 h/2，让建筑底部对齐地面

3. 优化窗户排布：窗户高度改为动态计算，上下留10%边距，避免窗户贴到屋顶和地面边缘

4. 确保resize事件同时处理两种相机类型的投影矩阵更新

✅ AI 输出结果：

• 添加了两个毛玻璃风格按钮（CSSbackdrop-filter: blur()）
• 实现了双相机系统，camera.position.copy()确保切换无缝
• 昼夜切换调整了 10+ 个参数（ambient、hemi、sun、fillLight、matWindow.emissive、toneMappingExposure、lampBulbs）
• 建筑 Y 轴位置修复
• 窗户排布更合理，上下各留 10% 边距

🔍 这一步的要点：

• Prompt 中问题描述精确到具体数值（#162030、h/2、10%），减少 AI 猜测
• 功能点用编号列表明确区分，AI 不容易遗漏
• 技术细节直接给（如camera.position.copy()），告诉 AI 你期望的实现方式，而不是让它瞎想

第 3 轮：修 Bug + 优化参数

🎯 目标：第二阶段引入了一些小问题，需要针对性修复。

📝 我的 Prompt：

修复以下问题并优化：

1. 相机切换逻辑有问题 — 切换时target没有正确保持，导致画面跳动。
应该在controls.object切换前后保持controls.target不变

2. 材质和灯光优化：
- 建筑主体颜色太深，改为更亮的 #f9f9f9
- 玻璃窗户增加clearcoat效果(0.4)，让反光更真实
- 跑道颜色调整，蓝色饱和度降低
- 雾的距离参数调整，避免远处建筑完全消失

3. 统一使用MeshStandardMaterial而不是MeshPhongMaterial，
确保PBR渲染的一致性

✅ AI 输出结果：

• 修复了相机切换时 controls.target 的保持逻辑
• 材质参数微调（颜色、clearcoat、roughness）
• 雾距离优化
• 全局统一 Standard 材质

🔍 这一步的要点：

• Bug 修复单独一轮，不要跟新功能混在一起——这是 AI 编程的重要原则
• 改动很小，但效果提升明显——参数调整是 AI 的强项
• "不要怕让 AI 改细节"，改参数它比你快得多

第 4 轮：扩展场景规模 + 道路车辆 + 喷泉

🎯 目标：这一步是整个项目中最大的一轮，把校园从"几栋楼"扩展为"城市级"场景。

📝 我的 Prompt：

大幅扩展校园场景，添加以下内容：

1. 周边道路系统：
- 在场景四边(X=±22, Z=±22)各创建一条道路，路面深灰色
- 道路两侧有白色虚线边缘标记，中间有黄色虚中心线
- 道路延伸到场景边缘（长度90，宽度3.2）

2. 外层建筑群：
- 创建createOuterBuilding工厂函数，生成更简洁的低多边形建筑
- 在道路外侧分3个环层排列约60栋建筑：
* 近环(距中心33-40)：高度3.5-5
* 中环(距中心44-55)：高度2-3.5
* 远环(距中心58-72)：高度1.8-3
- 建筑颜色使用浅灰色调，与内部白色建筑形成层次

3. 移动车辆：
- 创建createVehicle工厂函数，包含车身、驾驶舱、保险杠、轮子
- 在四条道路上各放置2-3辆车，有不同的颜色和速度
- 车辆沿道路方向移动，到达尽头后循环到另一端
- 每辆车配备前大灯(BoxGeometry+SpotLight)和尾灯

4. 喷泉系统：
- 在学生中心前面(X=0, Z=11.8)创建一个三层喷泉模型
- 使用粒子系统(PointsMaterial+AdditiveBlending)模拟水花
- 350个粒子，分3层速度：中心高速水柱、中速水帘、外层散开
- 粒子受重力影响下落，到达水面后重置
- Canvas径向渐变纹理做柔光粒子贴图

5. 其他点缀：
- 路灯沿主要路径排布（带发光灯泡）
- 长椅散布在运动场周围
- 旗杆+旗帜在场景中轴

✅ AI 输出结果：

这是代码增长最多的一轮（+350 行），包含：

• 完整的道路系统（路面 + 虚线 + 中心线）
• 60+ 栋外层建筑分 3 环排列
• 8 辆车在 4 条路上对向行驶，带车灯 SpotLight
• 3 层喷泉粒子系统（350 粒子，重力 + 重置逻辑）
• 12 盏路灯 + 8 张长椅 + 旗杆

🔍 这一步的要点：

• 这是最长的一个 Prompt，但仍然聚焦在一个主题上："扩展场景"
• 每个子系统给了具体的数量（60 栋、3 环、350 粒子），AI 不会放飞自我也不会偷懒
• 给了工厂函数的命名建议（createOuterBuilding、createVehicle），让 AI 写出可维护的代码
• 车辆循环逻辑用自然语言描述（"到达尽头后循环到另一端"），AI 能正确翻译成if (pos > ROAD_HALF) pos = -ROAD_HALF

第 5 轮：添加数据看板

🎯 目标：在 3D 场景之上叠加 2D 数据面板，实现"大屏"的完整效果。

📝 我的 Prompt：

在3D场景上叠加数据看板UI，使用Chart.js：

1. 顶部导航栏：
- 标题"智慧校园数据看板"+ 英文副标题
- 右侧三个统计指标：在校人数(12860)、教职工(1240)、建筑面积(28.6万㎡)
- 毛玻璃半透明背景，与3D场景融合

2. 左侧图表面板（三张卡片）：
- 📈 月度校园活跃度趋势 —— 折线图，3条线：
* 图书馆入馆(千次)、体育活动(千人次)、社团活动(场)
* 12个月数据(9月-8月)，体现学期内高峰、寒暑假低谷
- 📊 各学院人数统计 —— 柱状图，7个学院，七彩配色，圆角柱
- 🥧 校园设施使用占比 —— 环形图，6类设施，图例右侧

3. Chart.js配置要求：
- responsive: true
- 小字体(9-10px)适配数据看板
- 圆角柱(borderRadius: 6)