前一阵子，我们为大家推送了一篇用 Mapbox 制作 3D 地图的综合教程，发现有不少朋友都在问：下面这张图究竟是咋做的？

这张地图来自 Mapbox 中国开发者社区志愿者 @Leisure，下面就让他来为大家分享一下制作的过程，包括如何获取数据，如何建模，如果将模型放置在地图上等，点击这里即可查看作者的原文。

开始教程

一. 数据下载

上相关数据网站下载对应的地形 DEM 高程数据，如下图，这是山西省的地形👇

二. 建模

根据 DEM 格式数据构建地形模型，这里我们使用的是 cityEngine。

首先，打开 cityEngine，新建一个cityEngine Project，将上面下载的tif格式数据拷贝到项目目录下。
import 一个 Terrain Import。

选择对应的高程数据和纹理贴图，如果报错超过 4000 pixels,将下面的 X-Size 和 Z-Size 调小，然后可以在 scene 中看到如下模型👇

显然，模型是有问题的，可以调节高度信息来改变模型。

此时，再看地形模型就好很多了。

导出模型，file -> Export Models 选择导出 fbx 模型。

如果对 CityEngine 不太熟悉的同学也可以使用 QGis 的 Qgis2threejs 插件导出模型。

三.模型调整

使用 blender 打开导出的 fbx 模型文件，发现存在一些问题，如下图，模型的四周出现了莫名其妙的平面。

我们需要把四周的平面去掉，可以使用 blender 来进行调整，

最后可以得到下图最终的模型👇

最后，导出成 glb 格式的模型。

四.将模型添加到地图

使用 Mapbox 的 custom Layer（具体的使用方法可以参考这篇文章），其中涉及到坐标的转换，如果对坐标转换不太了解，可以直接使用 Threebox 根据经纬度添加，可以先使用添加区域轮廓图的中心点位置。

var loader = new THREE.GLTFLoader(); map.on('style.load', function () { map.addLayer({ id: 'custom_layer', type: 'custom', onAdd: function (map, mbxContext) { tb = new Threebox( map, mbxContext, { defaultLights: false } ); let lightGroup = new THREE.Group(); let sunlight = new THREE.DirectionalLight(0xffffff, 0.015); sunlight.position.set(0, 3000, 1200); sunlight.matrixWorldNeedsUpdate = true; sunlight.name = 'light'; lightGroup.add(sunlight); tb.world.add(lightGroup); loader.load( 'models/Terrain.glb', function (model) { let terrain = model.scene; let position = tb.projectToWorld([112.33593, 37.940017]); terrain.position.set(position.x, position.y, 10); //z要慢慢调整到一个合适的高度 terrain.scale.set(10, 10, 10); //根据地形调整 terrain.rotation.x = Math.PI / 2; //角度调整 terrain.rotation.y = Math.PI; terrain.children[0].children[0].material.color.setRGB(6, 16, 24); tb.add(terrain); //用于chrom扩展程序three.js inspector进行调试 window.scene = tb.scene; window.THREE = THREE; }, function (xhr) { console.log((xhr.loaded / xhr.total * 100) + '% loaded'); }, function (error) { console.log('An error happened'); } ); }, render: function (gl, matrix) { tb.update(); } }, 'water'); })

此时在浏览器显示肯定还是存在一些问题，主要是位置，缩放比例，角度等不一致，此时需要进行一些微调。

可以使用 three.js inspector 调整光照参数：