共计 1943 个字符,预计需要花费 5 分钟才能阅读完成。
前一阵子,我们为大家推送了一篇用 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 根据经纬度添加,可以先使用添加区域轮廓图的中心点位置。
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 调整光照参数:
调整模型参数:
调整模型材质:
最后,将调整的参数在代码中修改即可。
如果您对这篇教程有任何问题,欢迎在文末留言回复哦。
欢迎关注微信公众号 Mapbox(Mapbox_China)回复【技术】,加入 Mapbox 技术交流群,认识更多厉害的朋友!