企业官网建设流程全解析

如果你是一名前端开发，你一定知道——做一块数据大屏要多久？

传统方式：设计稿 → 切图 → 搭场景 → 调材质灯光 → 写交互 → 接数据 → 反复修改 → 交付。3D 大屏更复杂，Three.js 的坐标系、材质、光照每一项都能让你 debug 一整天。一个熟练的 Three.js 开发，做出本文这个效果，保守估计 3~5 天。

而这次，我全程只用了 Claude Code（Anthropic 出品的命令行 AI 编程助手），通过 6 轮对话，总共不到 2 小时，零手写代码，做出了这个效果：
微信图片_20260602123635

🏫 智慧校园 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% 边距
微信图片_20260602140432
🔍 这一步的要点：

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 修复单独一轮