1. 数据准备与基础环境搭建
想要用Three.js打造一个3D中国地图，第一步就是获取准确的地理数据。我推荐使用阿里云DataV.GeoAtlas提供的地理小工具系列，这里可以下载到标准的GeoJSON格式行政区划数据。下载后重命名为china.json，放在项目的dist/assets目录下。
安装依赖只需要两行命令：
npm install three --save
npm install d3 --save
这里有个小技巧：Three.js负责3D渲染，而D3.js的geoMercator投影转换功能能把经纬度坐标转为平面坐标，两者配合使用效果最佳。我在实际项目中发现，直接使用D3的投影转换比手动计算坐标要精准得多，特别是处理复杂多边形时。
2. 场景初始化与基础配置
创建HTML文件时要注意设置viewport，这对移动端适配很重要：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D中国地图</title>
</head>
<body>
<script type="module" src="./main.js"></script>
</body>
</html>
在main.js中初始化场景时，有几个关键参数需要注意：
const camera = new THREE.PerspectiveCamera(
75, // 视野角度
window.innerWidth / window.
扫一扫
6430
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
