一、前言：AI 编程的时代来了
如果你是一名前端开发，你一定知道——做一块数据大屏要多久？
传统方式：设计稿 → 切图 → 搭场景 → 调材质灯光 → 写交互 → 接数据 → 反复修改 → 交付。3D 大屏更复杂，Three.js 的坐标系、材质、光照每一项都能让你 debug 一整天。一个熟练的 Three.js 开发，做出本文这个效果，保守估计 3~5 天。
而这次，我全程只用了 Claude Code（Anthropic 出品的命令行 AI 编程助手），通过 6 轮对话，总共不到 2 小时，零手写代码，做出了这个效果：
🏫 智慧校园 3D 数据看板 —— 包含等距视角校园场景、建筑群、运动场、移动车辆、粒子喷泉、Chart.js 数据图表、白天/夜景切换、建筑悬停提示。
这篇文章不会逐行给你讲代码（那种教程网上太多了），而是带你看看 AI 编程的真实工作流——每一轮我发了什么 Prompt，AI 输出了什么，出了什么问题，我怎么让它改的。
二、准备工作
2.1 工具选择
| 工具 | 用途 |
|---|---|
| Claude Code | AI 编程助手（CLI 形式，终端里直接用） |
| Three.js 0.160 | 3D 渲染引擎（ES Module，CDN 加载） |
| Chart.js 4.4 | 2D 图表库（UMD，CDN 加载） |
| 浏览器 | 运行环境，零构建工具 |
关键决策：单文件 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 输出结果：
- 添加了两个毛玻璃风格按钮（CSS
backdrop-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)
- 折线图悬停显示所有数据集(interaction.mode: 'index')
- 配色与顶部指标点颜色呼应(蓝/绿/橙)
4. UI样式：
- 卡片使用backdrop-filter: blur(10px)毛玻璃效果
- 圆角14px，半透明白底
- 图表面板可滚动(max-height限制)
✅ AI 输出结果：
- 顶部导航栏（flex 布局，毛玻璃）
- 3 张 Chart.js 图表（折线图、柱状图、环形图）
- 数据模拟了学期波动（9 月开学高峰→2 月寒假低谷→6 月期末高峰→8 月暑假低谷）
- 图表配色与顶部指标色点呼应
🔍 这一步的要点：
- 给了具体的假数据，包括数值和趋势逻辑——AI 不用猜你要什么数据
- 样式细节给到具体 CSS 数值（blur(10px)、14px、9-10px）
- Chart.js 的配置项（interaction.mode、borderRadius）直接写在 Prompt 里，避免 AI 用默认值
- UI 和 3D 场景分属不同层（CSS fixed + z-index），互不干扰
第 6 轮：细节打磨
🎯 目标：最后 10% 的打磨，提升精致度。
📝 我的 Prompt：
最后打磨细节：
1. 建筑悬停提示：
- 监听mousemove，用Raycaster检测鼠标下的建筑
- 建筑创建时通过userData保存label信息
- 跟随鼠标显示半透明tooltip，展示建筑名称
- 鼠标变为pointer样式
2. 昼夜模式细节补充：
- 夜景模式下，车辆大灯(vehicleSpotLights)和路灯(lampSpotLights)的SpotLight点亮
- 车灯发光材质(emissive)的Intensity随昼夜切换
- 白天模式下关闭所有SpotLight
- 调整夜景ambient强度不要太暗（0.12→0.24），保留一定可见度
3. 优化：
- 昼夜切换时同步调整车辆和路灯的所有光源
- tooltip添加transition过渡动画
✅ AI 输出结果：
- Raycaster 悬停检测 + 跟随鼠标 tooltip
- 车灯和路灯 SpotLight 随昼夜联动（共 16+16 个光源统一控制）
- 夜景参数微调（ambient 0.12→0.24，不过暗）
- tooltip 的 CSS transition
🔍 这一步的要点：
- 这是典型的 "收尾轮"——不添加大的新功能，专注于完善和打磨
- Raycaster 的实现细节（NDC 坐标转换、intersectObjects、userData）全部交给 AI
- 昼夜联动涉及多个数组（vehicleSpotLights、lampSpotLights），Prompt 中明确了数据结构关系
四、AI 编程的核心方法论
回顾这 6 轮交互，我总结了 5 条核心原则：
原则 1：一小步 > 一大步
❌ 错误：做一个很酷的校园3D数据大屏，要有建筑、树木、车辆、图表...
✅ 正确：先做一个基础3D校园场景，等距视角，有运动场和8栋建筑
AI 的注意力是有限的。一个超大 Prompt 会得到"什么都有但什么都不好"的结果。分步迭代 = 每一步都可验证、可修正。
原则 2：具体 > 抽象
❌ "创建一些树"
✅ "创建约30棵树，每棵由圆柱树干(0.14倍半径)和3层锥体树冠组成，高度2-3米随机，分散在运动场四周和建筑附近"
❌ "建筑要有窗户"
✅ "建筑四面各有4行3列蓝色玻璃窗户，使用MeshPhysicalMaterial，clearcoat=0.4，窗户宽为列间距的50%，高为行间距的50%，上下各留10%边距"
AI 不会嫌弃你啰嗦。相反，越具体的描述，AI 的代码越符合预期。具体到颜色值、尺寸倍数、位置坐标。
原则 3：先跑起来，再优化
第1轮 → 能跑的基础场景（接受粗糙）
第2轮 → 加功能
第3轮 → 修 bug + 调参数
第4轮 → 扩展规模
第5轮 → 加数据面板
第6轮 → 细节打磨
不要在 V1 就追求完美。第一版的唯一目标就是"能跑"。之后的每一轮，代码都在变得更好。这个节奏也符合敏捷开发的原则。
原则 4：Bug 修复单独一轮
❌ "添加相机切换功能，顺便修一下之前的建筑位置问题"
✅ 第2轮：加相机切换 + 昼夜模式
第3轮：单独修相机切换bug和材质参数优化
新功能和 Bug 修复混在一起，AI 容易顾此失彼。单独的 Bug 修复轮可以让 AI 聚焦在问题本身上，效果远超"顺便修一下"。
原则 5：给 AI 定好技术约束
❌ "用 Three.js 做一个场景"
✅ "使用 Three.js 0.160 ES Module 导入（import map），单文件 HTML，
OrthographicCamera，PCFSoftShadowMap，ACESFilmicToneMapping，
不引入构建工具"
技术栈的选择权在你手上。如果你不指定，AI 可能用老版本的 CDN Script 标签、或者引入一堆你不需要的依赖。在第一个 Prompt 里就把技术决策定死。
五、关键技术点解读
虽然本文重点是 AI 编程方法论，但还是有必要挑几个技术亮点讲一下，方便你理解 AI 生成的代码逻辑。
5.1 等距视角的数学原理
const isoAngle = Math.PI / 4; // 水平旋转 45°
const isoTilt = Math.atan(1 / Math.sqrt(2)); // 俯仰角 ≈ 35.26°
camera.position.set(
isoDist * Math.cos(isoTilt) * Math.sin(isoAngle), // X
isoDist * Math.sin(isoTilt), // Y
isoDist * Math.cos(isoTilt) * Math.cos(isoAngle) // Z
);
等距投影要求三个轴的缩放比例相等。通过球坐标公式推导，相机方向的 x:y:z 需满足 1:1:1 的比例，得出俯仰角为 atan(1/√2)。这不是随便凑的数字，而是有数学依据的。
5.2 ShapeGeometry Holes 实现环形跑道
Three.js 的 ShapeGeometry 支持 holes 参数，无需手动拼接：
const trackOuter = createRoundedRectShape(14, 20, 2.2); // 外轮廓 Shape
const fieldHole = new THREE.Path();
fieldHole.moveTo(-4.5, -7.5); // 内孔 Path
// ... 画矩形路径
trackOuter.holes.push(fieldHole); // 把内孔添加到外轮廓上即可
const trackGeom = new THREE.ShapeGeometry(trackOuter); // 自动挖洞
比手动创建 8 个梯形拼接强太多了。AI 在生成这段代码时，自动选择了最优雅的实现方式。
5.3 粒子喷泉的物理系统
每个粒子有独立的位置和速度向量，每帧更新：
// 速度更新（重力加速度）
fountainVelArr[i * 3 + 1] -= GRAVITY * delta; // 只有Y轴受重力
// 位置更新
fountainPosArr[i * 3] += fountainVelArr[i * 3] * delta; // X
fountainPosArr[i * 3 + 1] += fountainVelArr[i * 3 + 1] * delta; // Y
fountainPosArr[i * 3 + 2] += fountainVelArr[i * 3 + 2] * delta; // Z
// 落到水面 → 重置
if (fountainPosArr[i * 3 + 1] < BASIN_Y) resetFountainParticle(i);
// 通知GPU更新
fountainGeom.attributes.position.needsUpdate = true;
350 个粒子分 3 层速度（高速水柱 3.8-5.3m/s、中速水帘 2.2-3.7m/s、外层散开 1.5-2.5m/s），配合 AdditiveBlending 叠加混合，实现真实的水雾效果。
5.4 昼夜切换的灯光策略
夜景不是简单地把所有灯调暗，而是有选择地调整：
| 参数 | 白天 | 夜晚 | 说明 |
|---|---|---|---|
| ambient.intensity | 0.55 | 0.24 | 整体变暗但不过黑 |
| sun.intensity | 3.2 | 0.55 | 方向光大幅减弱 |
| matWindow.emissive | #000 | #ffcc77 | 窗户从反射变为发光 |
| 路灯 emissiveIntensity | 0.4 | 2.2 | 灯泡亮度提升 5 倍 |
| toneMappingExposure | 1.15 | 0.85 | 整体曝光降低 |
| SpotLights (车灯+路灯) | 0 | 3.5/2.5 | 夜景下打开实际光源 |
关键技巧是用 emissive（自发光）而非直接调 light 来实现窗户灯光——窗户本身不产生光照，但看起来像亮着。真正的照明交给 SpotLight。
六、总结：人 + AI 协作的正确姿势
做完这个项目，我最深的感受是：
AI 编程不是在"写代码"，而是在"写需求"。
你的角色从"码农"变成了"产品经理 + 架构师 + 代码审查员"。你需要的能力排序变了：
| 传统开发 | AI 辅助开发 |
|---|---|
| 1. 写代码能力 | 1. 拆解需求的能力 |
| 2. 调试能力 | 2. 写清楚 Prompt 的能力 |
| 3. 框架熟练度 | 3. 审查 AI 代码的能力 |
| 4. 搜索 StackOverflow | 4. 理解核心原理即可 |
具体到开发流程：
- 规划阶段（人来）：拆解需求 → 分步规划 → 确定技术约束
- 生成阶段（AI 来）：每一小步给清晰的 Prompt → AI 生成代码
- 验证阶段（人来）：打开浏览器看效果 → 发现问题 → 针对性反馈
- 迭代阶段（循环）：修 Bug 单开一轮 → 加功能单开一轮 → 打磨单开一轮
2 小时完成传统需要 3-5 天的 3D 大屏开发，不是神话。
七、扩展思考
这个项目还可以继续用 AI 迭代：
- 📡 接入真实 API — "把 Chart.js 的静态数据换成 fetch 请求"
- 🚶 第一人称漫游 — "添加 PointerLockControls 实现 WASD 漫游模式"
- 🌧️ 天气系统 — "复用喷泉粒子架构，添加雨滴和雪花效果"
- 📱 响应式 — "让图表在小屏幕上折叠到底部"
每一句话都可以是一轮新的 Prompt，继续让 AI 帮你写。