效果预览先看看最终做出来的效果 中国各省份以 3D 立体块呈现带有挤出厚度️ 鼠标拖拽旋转/缩放视角OrbitControls✨ 鼠标悬停时省份高亮并显示省份名称 自适应窗口大小二、核心原理30秒看懂其实 Three.js 生成 3D 地图的流程就四步GeoJSON数据 → 地图投影(经纬度→平面坐标) → Shape描边 → ExtrudeGeometry挤出3DGeoJSON各省份边界的经纬度数据全国、省、市、县都有免费数据源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 引入依赖script srchttps://cdn.jsdelivr.net/npm/three0.132.2/build/three.min.js/script script srchttps://cdn.jsdelivr.net/npm/three0.132.2/examples/js/controls/OrbitControls.js/script script srchttps://d3js.org/d3-geo.v1.min.js/scriptthree.min.jsThree.js 核心库OrbitControls.js轨道控制器提供鼠标拖拽/旋转/缩放d3-geoD3 的地图投影模块负责经纬度→平面坐标转换为什么用 CDN因为零配置、直接粘贴就能跑不需要装 Node、配 webpack。4.2 加载 GeoJSON 数据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 地图投影经纬度→平面坐标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 的每个多边形挤出成立体块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 添加边界线在立体块顶部描一圈白线让省份边界更清楚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-fighting4.6 鼠标交互Raycaster 射线拾取// 把屏幕鼠标坐标转成 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.json5.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 挤出depth10 5. 顶面颜色 #0a2a3a侧面颜色 #0d3b4f边界线白色 6. 支持鼠标拖拽旋转、滚轮缩放OrbitControls 7. 鼠标悬停时省份变黄高亮并显示省份名称Raycaster div tooltip 8. 自适应窗口大小 9. 兼容 Polygon 和 MultiPolygon 10. 使用 MeshBasicMaterial不需要光照七、总结你只需要AI 帮你做描述想要的效果生成完整代码了解 GeoJSON 数据源选择合适的技术方案知道投影中心经纬度写 Three.js 样板代码懂基础 HTML/CSS 布局处理边界情况MultiPolygon、异常坐标等