为什么用 AI 生成 3D 大屏？

传统开发一个 3D 数据可视化大屏，通常需要：

1. 前端框架搭建：Vue/React + 路由 + 状态管理
2. 3D 引擎集成：Three.js/Babylon.js 场景搭建、光照、材质
3. 3D 建模：建筑群、地标、粒子效果
4. UI 面板：数据卡片、图表、动画
5. 交互逻辑：鼠标拖拽、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