零基础也能做！用 AI 提示词一键生成 Three.js 3D 中国地图

前言

想做一个炫酷的 3D 中国地图，但觉得 Three.js 太难？WebGL 太复杂？GeoJSON 是什么鬼？

这篇文章教你用 AI 写提示词 ，零基础也能快速生成一个可交互的 3D 区划地图。不需要手写一行代码，只需要说人话。

最终效果：可拖拽旋转、缩放、鼠标悬停高亮的 3D 中国省份地图。

一、效果预览

先看看最终做出来的效果：

🌍 中国各省份以 3D 立体块呈现，带有挤出厚度
🖱️ 鼠标拖拽旋转/缩放视角（OrbitControls）
✨ 鼠标悬停时省份高亮，并显示省份名称
📱 自适应窗口大小

二、核心原理（30秒看懂）

其实 Three.js 生成 3D 地图的流程就四步：

复制代码

GeoJSON数据 → 地图投影(经纬度→平面坐标) → Shape描边 → ExtrudeGeometry挤出3D

GeoJSON：各省份边界的经纬度数据（全国、省、市、县都有免费数据源）
d3-geo 投影：把球面经纬度转成平面 x/y 坐标
THREE.Shape：用投影后的坐标画出省份轮廓
THREE.ExtrudeGeometry：把平面轮廓"挤出"一个厚度，变成 3D 立体块

就像把各省份轮廓画在纸上，然后把纸"拉高"变成积木块一样。

三、提示词怎么写（万能模板）

用 AI 写代码，提示词的关键是把需求讲清楚。这里分享一个万能模板：

复制代码

我要用 Three.js 做一个 科幻风格的 3D 地图，要求如下：

【数据源】
- 使用阿里云 DataV 的 GeoJSON 数据
- 全国数据地址：https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json

【功能需求】
- 省份用不同颜色显示（顶面颜色A、侧面颜色B）
- 省份有立体厚度（extrude depth）
- 省份之间有白色边界线
- 可以用鼠标拖拽旋转、滚轮缩放
- 鼠标悬停省份时高亮变黄，显示省份名称 tooltip
- 窗口大小变化时自适应

【技术要求】
- 使用 Three.js CDN 引入，不要用 npm
- 使用 d3-geo 的 geoMercator 投影
- 使用 OrbitControls 控制相机
- 使用 Raycaster 做鼠标拾取
- 兼容 Polygon 和 MultiPolygon 两种 GeoJSON 类型
- 不需要光照，使用 MeshBasicMaterial

请生成一个完整的单文件 index.html。

这个提示词直接丢给 Claude、ChatGPT 或其他 AI，就能生成一个可用的 3D 地图。

四、分步详解

下面按模块拆解每个部分的作用，方便你按需修改提示词。

4.1 引入依赖

html 复制代码

<script src="https://cdn.jsdelivr.net/npm/three@0.132.2/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.132.2/examples/js/controls/OrbitControls.js"></script>
<script src="https://d3js.org/d3-geo.v1.min.js"></script>

three.min.js：Three.js 核心库
OrbitControls.js：轨道控制器，提供鼠标拖拽/旋转/缩放
d3-geo：D3 的地图投影模块，负责经纬度→平面坐标转换

为什么用 CDN？ 因为零配置、直接粘贴就能跑，不需要装 Node、配 webpack。

4.2 加载 GeoJSON 数据

javascript 复制代码

fetch('https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json')
  .then((res) => res.json())
  .then((jsondata) => generateGeometry(jsondata))

阿里云 DataV 提供了免费的省市区县 GeoJSON 数据：

级别	URL 格式	示例（全国）
全国	`areas_v3/bound/100000_full.json`	全国省份
省份	`areas_v3/bound/330000_full.json`	浙江省
城市	`areas_v3/bound/330100_full.json`	杭州市

把 URL 里的数字换成对应行政区划代码即可。

4.3 地图投影（经纬度→平面坐标）

javascript 复制代码

const projection = d3.geoMercator()
  .center([104.0, 37.5])  // 地图中心点（中国中心约 104E, 37.5N）
  .translate([0, 0])

// 把 [经度, 纬度] 转成 [x, y]
const [x, y] = projection([120.2, 30.3])  // 例如杭州的经纬度

geoMercator 就是墨卡托投影 ，Google 地图、百度地图都在用。center 设置地图的中心点在画面正中。

4.4 生成 3D 几何体

这是最核心的一步，把 GeoJSON 的每个多边形"挤出"成立体块：

javascript 复制代码

jsondata.features.forEach((elem) => {
  const coordinates = elem.geometry.coordinates
  const geomType = elem.geometry.type

  // 兼容 Polygon 和 MultiPolygon（比如内蒙古就是 MultiPolygon）
  const polygons = geomType === 'Polygon' ? [coordinates] : coordinates

  polygons.forEach((polygon) => {
    // 取外环（第一个 ring）
    const ring = polygon[0]

    // 1. 创建 Shape（省份轮廓）
    const shape = new THREE.Shape()
    ring.forEach((coord, i) => {
      const [x, y] = projection(coord)
      if (i === 0) shape.moveTo(x, -y)  // 注意：y取反，因为屏幕坐标y轴向下
      else shape.lineTo(x, -y)
    })

    // 2. 挤出成 3D 几何体
    const extrudeSettings = { depth: 10, bevelEnabled: false }
    const geom = new THREE.ExtrudeGeometry(shape, extrudeSettings)

    // 3. 创建 Mesh（网格）
    const mesh = new THREE.Mesh(geom, [
      new THREE.MeshBasicMaterial({ color: '#2defff', transparent: true, opacity: 0.6 }), // 顶面
      new THREE.MeshBasicMaterial({ color: '#3480C4', transparent: true, opacity: 0.5 }), // 侧面
    ])
  })
})

关键细节：

y 取反：GeoJSON 里 y 轴向上，屏幕坐标 y 轴向下
ExtrudeGeometry 接受两个材质：索引0=顶面，索引1=侧面
depth: 10 是挤出厚度，越大省份越"高"

4.5 添加边界线

在立体块顶部描一圈白线，让省份边界更清楚：

javascript 复制代码

const lineGeom = new THREE.BufferGeometry().setFromPoints(points)
const line = new THREE.Line(lineGeom, new THREE.LineBasicMaterial({ color: 'white' }))
line.position.z = 5.1  // 放在 mesh 上方，避免 z-fighting

4.6 鼠标交互（Raycaster 射线拾取）

javascript 复制代码

// 把屏幕鼠标坐标转成 3D 射线
const mouse = new THREE.Vector2()
mouse.x = (event.clientX / window.innerWidth) * 2 - 1  // 转成 -1 到 1
mouse.y = -(event.clientY / window.innerHeight) * 2 + 1

raycaster.setFromCamera(mouse, camera)

// 检测射线穿过了哪些 3D 物体
const intersects = raycaster.intersectObjects(map.children, true)

if (intersects.length > 0) {
  // 高亮变红
  intersects[0].object.material[0].color.set(0xff0000)
  // 显示 tooltip
  tooltip.textContent = intersects[0].object.parent.properties.name
}

五、进阶玩法（改改提示词就行）

5.1 换成省/市/区地图

只改数据源 URL：

复制代码

换成浙江省地图：https://geo.datav.aliyun.com/areas_v3/bound/330000_full.json
换成杭州市地图：https://geo.datav.aliyun.com/areas_v3/bound/330100_full.json

5.2 加数据可视化（柱状图）

提示词追加：

复制代码

每个省份根据 dataValue 字段显示不同的挤出高度（高的省份更高）
同时颜色也根据数值从绿色渐变到红色

5.3 添加标注文字

提示词追加：

复制代码

使用 CSS2DRenderer 在每个省份中心显示省份名称

5.4 加发光/粒子特效

提示词追加：

复制代码

在省份边界线上添加流动的粒子光点，做成科技感效果
使用 PointsMaterial 和 BufferGeometry 实现

六、完整提示词（直接复制用）

复制代码

我要用 Three.js 做一个3D中国地图，请帮我生成一个完整的 index.html 单文件。

要求：
1. 使用 CDN 引入 Three.js 0.132、OrbitControls、d3-geo
2. 数据源：https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json
3. 使用 d3.geoMercator() 投影，center 设为 [104, 37.5]
4. 每个省份用 THREE.ExtrudeGeometry 挤出，depth=10
5. 顶面颜色 #0a2a3a，侧面颜色 #0d3b4f，边界线白色
6. 支持鼠标拖拽旋转、滚轮缩放（OrbitControls）
7. 鼠标悬停时省份变黄高亮，并显示省份名称（Raycaster + div tooltip）
8. 自适应窗口大小
9. 兼容 Polygon 和 MultiPolygon
10. 使用 MeshBasicMaterial（不需要光照）

七、总结

你只需要	AI 帮你做
描述想要的效果	生成完整代码
了解 GeoJSON 数据源	选择合适的技术方案
知道投影中心经纬度	写 Three.js 样板代码
懂基础 HTML/CSS 布局	处理边界情况（MultiPolygon、异常坐标等）

一句话：把需求说清楚，AI 帮你写代码，复制粘贴就能跑。

如果这篇文章对你有帮助，点个赞 👍、收藏 ⭐，让更多人看到！