智慧校园数据大屏 —— Claude Code 实战全记录

二、准备工作2.1 工具选择工具 用途Claude Code AI 编程助手CLI 形式终端里直接用Three.js 0.160 3D 渲染引擎ES ModuleCDN 加载Chart.js 4.4 2D 图表库UMDCDN 加载浏览器 运行环境零构建工具关键决策单文件 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导入方式。要求等距视角OrthographicCamera类似策略游戏视角带OrbitControls可拖拽旋转缩放场景居中是一个标准运动场——蓝色圆角矩形跑道内部是绿色足球场Canvas纹理画白线8栋不同尺寸的现代建筑分布在运动场周围每栋有白色BoxGeometry主体 屋顶女儿墙 入口雨棚四面均匀排布的蓝色玻璃窗户PlaneGeometry底层装饰带不同高度和半径的树木散布在场景中分层锥体树冠 圆柱树干浅色路径连接各建筑渐变草皮贴片点缀地面增加自然感使用DirectionalLightAmbientLightHemisphereLight实现自然光照开启阴影PCFSoftShadowMap ACES色调映射✅ AI 输出结果生成了一个约 700 行的 campus.html包含正交相机 OrbitControls等距视角蓝色圆角矩形跑道 带白线标记的足球场Canvas 纹理8 栋建筑每栋有白色主体、蓝色物理材质玻璃窗、屋顶结构和入口雨棚约 30 棵树三层锥体树冠 圆柱树干路径网络、地面草皮贴片完整光照和阴影系统 这一步的要点Prompt 中给出了具体的技术约束ES Module、OrthographicCamera、PCFSoftShadowMap避免了 AI 默认使用 CDN script 标签或传统相机建筑、树木的描述给了尺寸范围和视觉特征而不是抽象说 “创建一些建筑”第一次跑出来的效果就已经能看了——这是建立信心的关键第 2 轮添加相机切换和昼夜模式 目标增加用户可操作的交互功能。 我的 Prompt在上一个版本基础上做以下修改添加右上角两个按钮切换透视/正交按钮 — 同时创建PerspectiveCamera(40°FOV)点击时在正交和透视相机之间切换切换时保持当前视角位置不变切换夜景/白天按钮 — 点击时调整背景色和雾色夜景深蓝 #162030环境光/半球光/方向光的强度和色温降低建筑窗户的emissive自发光变暖黄色模拟室内灯光透出降低toneMappingExposure路灯灯泡emissiveIntensity增高修复建筑位置building.position.y 应该设为 h/2让建筑底部对齐地面优化窗户排布窗户高度改为动态计算上下留10%边距避免窗户贴到屋顶和地面边缘确保resize事件同时处理两种相机类型的投影矩阵更新✅ AI 输出结果添加了两个毛玻璃风格按钮CSS backdrop-filter: blur()实现了双相机系统camera.position.copy() 确保切换无缝昼夜切换调整了 10 个参数ambient、hemi、sun、fillLight、matWindow.emissive、toneMappingExposure、lampBulbs建筑 Y 轴位置修复窗户排布更合理上下各留 10% 边距微信图片_20260602140432 这一步的要点Prompt 中问题描述精确到具体数值#162030、h/2、10%减少 AI 猜测功能点用编号列表明确区分AI 不容易遗漏技术细节直接给如 camera.position.copy()告诉 AI 你期望的实现方式而不是让它瞎想第 3 轮修 Bug 优化参数 目标第二阶段引入了一些小问题需要针对性修复。 我的 Prompt修复以下问题并优化相机切换逻辑有问题 — 切换时target没有正确保持导致画面跳动。应该在controls.object切换前后保持controls.target不变材质和灯光优化建筑主体颜色太深改为更亮的 #f9f9f9玻璃窗户增加clearcoat效果(0.4)让反光更真实跑道颜色调整蓝色饱和度降低雾的距离参数调整避免远处建筑完全消失统一使用MeshStandardMaterial而不是MeshPhongMaterial确保PBR渲染的一致性✅ AI 输出结果修复了相机切换时 controls.target 的保持逻辑材质参数微调颜色、clearcoat、roughness雾距离优化全局统一 Standard 材质 这一步的要点Bug 修复单独一轮不要跟新功能混在一起——这是 AI 编程的重要原则改动很小但效果提升明显——参数调整是 AI 的强项“不要怕让 AI 改细节”改参数它比你快得多第 4 轮扩展场景规模 道路车辆 喷泉 目标这一步是整个项目中最大的一轮把校园从几栋楼扩展为城市级场景。 我的 Prompt大幅扩展校园场景添加以下内容周边道路系统在场景四边(X±22, Z±22)各创建一条道路路面深灰色道路两侧有白色虚线边缘标记中间有黄色虚中心线道路延伸到场景边缘长度90宽度3.2外层建筑群创建createOuterBuilding工厂函数生成更简洁的低多边形建筑在道路外侧分3个环层排列约60栋建筑近环(距中心33-40)高度3.5-5中环(距中心44-55)高度2-3.5远环(距中心58-72)高度1.8-3建筑颜色使用浅灰色调与内部白色建筑形成层次移动车辆创建createVehicle工厂函数包含车身、驾驶舱、保险杠、轮子在四条道路上各放置2-3辆车有不同的颜色和速度车辆沿道路方向移动到达尽头后循环到另一端每辆车配备前大灯(BoxGeometrySpotLight)和尾灯喷泉系统在学生中心前面(X0, Z11.8)创建一个三层喷泉模型使用粒子系统(PointsMaterialAdditiveBlending)模拟水花350个粒子分3层速度中心高速水柱、中速水帘、外层散开粒子受重力影响下落到达水面后重置Canvas径向渐变纹理做柔光粒子贴图其他点缀路灯沿主要路径排布带发光灯泡长椅散布在运动场周围旗杆旗帜在场景中轴✅ AI 输出结果这是代码增长最多的一轮350 行包含完整的道路系统路面 虚线 中心线60 栋外层建筑分 3 环排列8 辆车在 4 条路上对向行驶带车灯 SpotLight3 层喷泉粒子系统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顶部导航栏标题智慧校园数据看板 英文副标题右侧三个统计指标在校人数(12860)、教职工(1240)、建筑面积(28.6万㎡)毛玻璃半透明背景与3D场景融合左侧图表面板三张卡片 月度校园活跃度趋势 —— 折线图3条线图书馆入馆(千次)、体育活动(千人次)、社团活动(场)12个月数据(9月-8月)体现学期内高峰、寒暑假低谷 各学院人数统计 —— 柱状图7个学院七彩配色圆角柱 校园设施使用占比 —— 环形图6类设施图例右侧Chart.js配置要求responsive: true小字体(9-10px)适配数据看板圆角柱(borderRadius: 6)折线图悬停显示所有数据集(interaction.mode: ‘index’)配色与顶部指标点颜色呼应(蓝/绿/橙)UI样式卡片使用backdrop-filter: blur(10px)毛玻璃效果圆角14px半透明白底图表面板可滚动(max-height限制)✅ AI 输出结果顶部导航栏flex 布局毛玻璃3 张 Chart.js 图表折线图、柱状图、环形图数据模拟了学期波动9 月开学高峰→2 月寒假低谷→6 月期末高峰→8 月暑假低谷图表配色与顶部指标色点呼应 这一步的要点给了具体的假数据包括数值和趋势逻辑——AI 不用猜你要什么数据样式细节给到具体 CSS 数值blur(10px)、14px、9-10pxChart.js 的配置项interaction.mode、borderRadius直接写在 Prompt 里避免 AI 用默认值UI 和 3D 场景分属不同层CSS fixed z-index互不干扰第 6 轮细节打磨 目标最后 10% 的打磨提升精致度。 我的 Prompt最后打磨细节建筑悬停提示监听mousemove用Raycaster检测鼠标下的建筑建筑创建时通过userData保存label信息跟随鼠标显示半透明tooltip展示建筑名称鼠标变为pointer样式昼夜模式细节补充夜景模式下车辆大灯(vehicleSpotLights)和路灯(lampSpotLights)的SpotLight点亮车灯发光材质(emissive)的Intensity随昼夜切换白天模式下关闭所有SpotLight调整夜景ambient强度不要太暗0.12→0.24保留一定可见度优化昼夜切换时同步调整车辆和路灯的所有光源tooltip添加transition过渡动画✅ AI 输出结果Raycaster 悬停检测 跟随鼠标 tooltip车灯和路灯 SpotLight 随昼夜联动共 1616 个光源统一控制夜景参数微调ambient 0.12→0.24不过暗tooltip 的 CSS transition 这一步的要点这是典型的 “收尾轮”——不添加大的新功能专注于完善和打磨Raycaster 的实现细节NDC 坐标转换、intersectObjects、userData全部交给 AI昼夜联动涉及多个数组vehicleSpotLights、lampSpotLightsPrompt 中明确了数据结构关系四、AI 编程的核心方法论回顾这 6 轮交互我总结了 5 条核心原则原则 1一小步 一大步❌ 错误做一个很酷的校园3D数据大屏要有建筑、树木、车辆、图表…✅ 正确先做一个基础3D校园场景等距视角有运动场和8栋建筑AI 的注意力是有限的。一个超大 Prompt 会得到什么都有但什么都不好的结果。分步迭代 每一步都可验证、可修正。原则 2具体 抽象❌ “创建一些树”✅ “创建约30棵树每棵由圆柱树干(0.14倍半径)和3层锥体树冠组成高度2-3米随机分散在运动场四周和建筑附近”❌ “建筑要有窗户”✅ “建筑四面各有4行3列蓝色玻璃窗户使用MeshPhysicalMaterialclearcoat0.4窗户宽为列间距的50%高为行间距的50%上下各留10%边距”AI 不会嫌弃你啰嗦。相反越具体的描述AI 的代码越符合预期。具体到颜色值、尺寸倍数、位置坐标。原则 3先跑起来再优化第1轮 → 能跑的基础场景接受粗糙第2轮 → 加功能第3轮 → 修 bug 调参数第4轮 → 扩展规模第5轮 → 加数据面板第6轮 → 细节打磨不要在 V1 就追求完美。第一版的唯一目标就是能跑。之后的每一轮代码都在变得更好。这个节奏也符合敏捷开发的原则。原则 4Bug 修复单独一轮❌ “添加相机切换功能顺便修一下之前的建筑位置问题”✅ 第2轮加相机切换 昼夜模式第3轮单独修相机切换bug和材质参数优化新功能和 Bug 修复混在一起AI 容易顾此失彼。单独的 Bug 修复轮可以让 AI 聚焦在问题本身上效果远超顺便修一下。原则 5给 AI 定好技术约束❌ “用 Three.js 做一个场景”✅ “使用 Three.js 0.160 ES Module 导入import map单文件 HTMLOrthographicCameraPCFSoftShadowMapACESFilmicToneMapping不引入构建工具”技术栈的选择权在你手上。如果你不指定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), // XisoDist * Math.sin(isoTilt), // YisoDist * 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); // 外轮廓 Shapeconst 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; // XfountainPosArr[i * 3 1] fountainVelArr[i * 3 1] * delta; // YfountainPosArr[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. 拆解需求的能力调试能力 2. 写清楚 Prompt 的能力框架熟练度 3. 审查 AI 代码的能力搜索 StackOverflow 4. 理解核心原理即可具体到开发流程规划阶段人来拆解需求 → 分步规划 → 确定技术约束生成阶段AI 来每一小步给清晰的 Prompt → AI 生成代码验证阶段人来打开浏览器看效果 → 发现问题 → 针对性反馈迭代阶段循环修 Bug 单开一轮 → 加功能单开一轮 → 打磨单开一轮