前言
最近在探索用 AI 辅助前端开发，尝试了一个有意思的实验：完全通过自然语言描述，让 AI 生成一个科幻电影风格的智慧城市 3D 数据大屏。效果出乎意料——不仅有完整的 Three.js 3D 城市场景，还有数据面板、交互控制、动画效果，而且代码质量远超预期。
先看最终效果：
济南市智慧城市大脑大屏，包含 3D 建筑群、实时数据面板、鼠标交互、视角飞行等
下面我会完整复盘整个过程，包括每一个 Prompt、AI 的思考路径，以及如何一步步迭代优化。
一、为什么用 AI 生成 3D 大屏？
传统开发一个 3D 数据可视化大屏，通常需要：
- 前端框架搭建：Vue/React + 路由 + 状态管理
- 3D 引擎集成：Three.js/Babylon.js 场景搭建、光照、材质
- 3D 建模：建筑群、地标、粒子效果
- UI 面板：数据卡片、图表、动画
- 交互逻辑：鼠标拖拽、Raycaster 拾取、相机动画
一个熟练的前端工程师完成上述工作，少则 3-5 天，多则 1-2 周。
而使用 AI 代码生成工具，整个过程缩短到 10-20 分钟，且代码质量达到了可直接交付的水平。
二、工具和环境
| 工具 | 用途 |
|---|---|
| Claude Code | AI 代码生成工具，理解自然语言并直接生成完整项目代码 |
| DeepSeek API | 国产大模型 API，提供 deepseek-v4-pro 等模型，支持长上下文（100万 token），适合复杂代码生成场景 |
| Vue 2.7 | 前端框架 |
| Three.js 0.160 | 3D 渲染引擎 |
| Element UI | UI 组件库（仅少量使用） |
| Node.js 20 | 运行环境 |
三、完整开发过程
第一步：一句话启动项目
我的 Prompt：
生成一个科幻风的3D大屏页面，大屏内容为智慧城市，中间展示城市建筑，两侧展示统计数据。以济南市为例。
就这么一句话。AI 的响应过程非常有意思——它先分析了需求，规划了项目结构，然后一次性生成了全部代码：
CityScene.vue—— Three.js 3D 城市场景（核心组件，300+ 行）TitleBar.vue—— 顶部科幻风标题栏 + 实时时钟CityOverview.vue—— 左侧城市概况面板（人口、GDP、面积）TrafficEnv.vue—— 左侧交通与环境数据SmartMetrics.vue—— 右侧智慧城市指标DistrictData.vue—— 右侧区县发展指数BottomTicker.vue—— 底部实时数据滚动条App.vue—— 主布局编排
关键发现：Prompt 不需要写得多详细。AI 会自动推断你需要什么——比如我说"以济南市为例"，它就自动查了济南的人口（941万）、GDP（1.28万亿）、区县分布等真实数据。
第二步：3D 城市场景的生成
AI 生成的 3D 场景包含以下要素：
1. 建筑群
AI 自动规划了 5 个片区（CBD、历下、高新、天桥、槐荫），生成了 100+ 栋建筑，每栋有随机高度（1-12 层）、窗户发光效果、边缘线框。
// AI 自动生成的建筑创建函数（CityScene.vue）
createBuilding(x, z, w, d, h, color, isLandmark) {
const group = new THREE.Group()
// 主体
const body = new THREE.Mesh(new THREE.BoxGeometry(w, h, d), bodyMat)
body.castShadow = true
// 发光边缘线
const edgeLine = new THREE.LineSegments(edgeGeo,
new THREE.LineBasicMaterial({ color: 0x00ccff, transparent: true }))
// 窗户发光（每层随机亮灯）
for (let f = 0; f < floors; f++) {
const winMat = new THREE.MeshBasicMaterial({
color: randomHSL(), transparent: true, opacity: 0.7
})
// ...
}
}
2. 科幻风地面
AI 自动添加了 Tron 风格的网格地面 + 双同心光环：
createGround() {
// 网格线
for (let i = -15; i <= 15; i += 2) {
// 横竖交叉线
}
// 双光环
const ring1 = new THREE.Mesh(new THREE.TorusGeometry(6, 0.05, 16, 100), glowMat)
const ring2 = new THREE.Mesh(new THREE.TorusGeometry(3.5, 0.03, 16, 80), glowMat)
}
3. 粒子系统和光照
500 个蓝色浮游粒子环绕城市，8 个底部点光源模拟城市辉光：
createParticles() {
const count = 500
for (let i = 0; i < count; i++) {
pos[i*3] = randomPos(); pos[i*3+1] = randomHeight()
colors[i*3] = randomBlueHue()
}
}
第三步：添加交互
我的第二个 Prompt：
添加交互
AI 理解了"交互"的上下文，给这个纯展示大屏加上了完整的交互能力：
| 交互能力 | 技术实现 |
|---|---|
| 鼠标拖拽旋转 | OrbitControls |
| 滚轮缩放 | OrbitControls |
| 右键平移 | OrbitControls |
| 建筑悬停高亮 | Raycaster + mousemove 事件 |
| 建筑点击弹窗 | Raycaster + click 事件 + 数据匹配 |
| 视角一键切换 | 5 个预设视角 + easeInOutCubic 飞行动画 |
| 区县点击聚焦 | 右侧面板点击 → $emit → 场景 setView() |
| 数字滚动动画 | requestAnimationFrame + easeOutCubic 插值 |
| 进度条动画 | CSS transition + 延迟触发 |
| 操作提示自动隐藏 | CSS @keyframes fadeOut 8 秒 |
关键 Prompt 技巧：不需要详细描述要什么交互，AI 会根据场景上下文自动判断最合适的交互方式。如果你对某个交互不满意，可以继续细化，比如"让建筑点击后弹出详细信息卡片"。
第四步：添加数字滚动动画
AI 自动创建了一个 AniNum.vue 组件，实现了从 0 到目标值的平滑滚动：
// AniNum.vue - 数字滚动动画核心
animate() {
const start = parseFloat(this.display) || 0
const end = this.to
const duration = 1500 // 1.5秒
const step = (now) => {
const t = Math.min(elapsed / duration, 1.0)
const ease = 1 - Math.pow(1 - t, 3) // easeOutCubic
const current = start + (end - start) * ease
this.display = current.toFixed(this.dec)
if (t < 1) requestAnimationFrame(step)
}
}
四、完整项目结构
claudeThree/
├── public/index.html
├── package.json
├── vue.config.js
└── src/
├── main.js # 入口
├── styles.css # 全局科幻风 CSS（面板、字体、装饰）
├── App.vue # 主布局编排
└── components/
├── CityScene.vue # ★ Three.js 3D 场景 + OrbitControls + Raycaster
├── TitleBar.vue # 顶部标题栏 + 数字时钟
├── CityOverview.vue # 左侧：城市概况（人口/GDP/面积）
├── TrafficEnv.vue # 左侧：交通与环保数据
├── SmartMetrics.vue # 右侧：智慧城市指标
├── DistrictData.vue # 右侧：区县发展指数（可点击聚焦）
├── BottomTicker.vue # 底部：实时数据滚动
└── AniNum.vue # 数字滚动动画组件
总代码量：约 800 行（含 CSS），AI 生成耗时约 10 分钟。
五、如何用 AI 高效生成 3D 大屏：Prompt 模板
基于这次实践，我总结了一套 Prompt 模板：
基础版（快速原型）
生成一个[风格]的3D大屏页面，大屏内容为[主题]，
中间展示[3D场景描述]，两侧展示统计数据。
以[具体城市/数据]为例。
示例：
生成一个赛博朋克风的3D大屏页面，内容为城市交通监控，
中间展示3D道路和车辆，两侧展示实时交通数据。以北京为例。
进阶版（精细化控制）
生成一个[风格]的3D大屏页面：
1. 3D场景：[具体描述——什么模型、什么效果、什么氛围]
2. 左侧面板：[数据项1、数据项2...]
3. 右侧面板：[数据项1、数据项2...]
4. 交互需求：[拖拽/点击/悬停/动画...]
技术栈：Vue2 + Three.js
迭代优化 Prompt
1. 添加交互
2. 把XX数据的动画改成逐位滚动效果
3. 增加建筑点击后的详情弹窗
4. 视角切换时加缓动动画
5. 优化手机端的响应式布局
六、AI 生成代码的质量评估
| 维度 | 评分 | 说明 |
|---|---|---|
| 功能完整性 | ★★★★★ | 3D场景 + 数据面板 + 交互控制，一套完整大屏 |
| 代码可读性 | ★★★★☆ | 结构清晰，组件拆分合理，注释偏少但变量命名好 |
| 可维护性 | ★★★★☆ | 组件化设计，新增面板只需加一个 .vue 文件 |
| 性能 | ★★★★☆ | PCFSoftShadowMap + 像素比限制，渲染性能良好 |
| UI 美观度 | ★★★★☆ | 科幻风到位，细节可进一步调优 |
七、实战建议
-
Prompt 从简单开始，逐步迭代。第一版只描述"做什么"，第二版再加"怎么交互"，第三版细化"动画效果"。
-
相信 AI 的审美。AI 对色彩搭配、布局、科幻风格的把握往往比开发者的直觉更准确。如果它选了某个颜色方案，先试试看再改。
-
让 AI 处理真实数据。指定具体城市/行业后，AI 会自动填充合理的数据（人口、GDP 等），省去大量调研时间。
-
交互描述要抽象。"添加交互"比"添加 OrbitControls + Raycaster + hover 高亮"效果更好——AI 会自己判断最合适的交互方案，而不是被动执行。
-
遇到 bug 直接告诉 AI。把报错信息贴给它，它自己会分析、定位、修复，整个 debug 过程完全不用你写一行代码。
八、总结
通过这次实验，我最大的感受是：AI 让"想法→产品"的路径缩短了一个数量级。
以前做一个 3D 大屏需要搭框架、写 Three.js、调光照材质、加交互，整个流程走下来没几天搞不完。现在只需要用自然语言描述你想要什么，10 分钟后就能看到效果。
这不是替代开发者，而是让开发者的生产力提升 10 倍——你把精力花在"想清楚要做什么"上，而不是"怎么写每一行代码"上。
完整源码：gitee地址
关键词：AI 编程、Three.js、3D 数据可视化、智慧城市大屏、Claude Code、DeepSeek API、Vue2
相关推荐：