最近在探索用 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万、GDP1.28万亿、区县分布等真实数据。第二步3D 城市场景的生成AI 生成的 3D 场景包含以下要素建筑群AI 自动规划了 5 个片区CBD、历下、高新、天桥、槐荫生成了 100 栋建筑每栋有随机高度1-12 层、窗户发光效果、边缘线框。// AI 自动生成的建筑创建函数CityScene.vuecreateBuilding(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 500for (let i 0; i count; i) {pos[i3] randomPos(); pos[i31] 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) || 0const end this.toconst duration 1500 // 1.5秒const step (now) {const t Math.min(elapsed / duration, 1.0)const ease 1 - Math.pow(1 - t, 3) // easeOutCubicconst current start (end - start) * easethis.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 行含 CSSAI 生成耗时约 10 分钟。五、如何用 AI 高效生成 3D 大屏Prompt 模板基于这次实践我总结了一套 Prompt 模板基础版快速原型生成一个[风格]的3D大屏页面大屏内容为[主题]中间展示[3D场景描述]两侧展示统计数据。以[具体城市/数据]为例。示例生成一个赛博朋克风的3D大屏页面内容为城市交通监控中间展示3D道路和车辆两侧展示实时交通数据。以北京为例。进阶版精细化控制生成一个[风格]的3D大屏页面3D场景[具体描述——什么模型、什么效果、什么氛围]左侧面板[数据项1、数据项2…]右侧面板[数据项1、数据项2…]交互需求[拖拽/点击/悬停/动画…]技术栈Vue2 Three.js迭代优化 Prompt添加交互把XX数据的动画改成逐位滚动效果增加建筑点击后的详情弹窗视角切换时加缓动动画优化手机端的响应式布局六、AI 生成代码的质量评估维度 评分 说明功能完整性 ★★★★★ 3D场景 数据面板 交互控制一套完整大屏代码可读性 ★★★★☆ 结构清晰组件拆分合理注释偏少但变量命名好可维护性 ★★★★☆ 组件化设计新增面板只需加一个 .vue 文件性能 ★★★★☆ PCFSoftShadowMap 像素比限制渲染性能良好UI 美观度 ★★★★☆ 科幻风到位细节可进一步调优七、实战建议Prompt 从简单开始逐步迭代。第一版只描述做什么第二版再加怎么交互第三版细化动画效果。相信 AI 的审美。AI 对色彩搭配、布局、科幻风格的把握往往比开发者的直觉更准确。如果它选了某个颜色方案先试试看再改。让 AI 处理真实数据。指定具体城市/行业后AI 会自动填充合理的数据人口、GDP 等省去大量调研时间。交互描述要抽象。添加交互比添加 OrbitControls Raycaster hover 高亮效果更好——AI 会自己判断最合适的交互方案而不是被动执行。遇到 bug 直接告诉 AI。把报错信息贴给它它自己会分析、定位、修复整个 debug 过程完全不用你写一行代码。