如何用 Mapbox 製做富有質感的城市 3D 肌理圖？

前一陣子，咱們爲你們推送了一篇用 Mapbox 製做 3D 地圖的綜合教程，發現有很多朋友都在問：下面這張圖到底是咋作的？

這張地圖來自 Mapbox 中國開發者社區志願者 @Leisure，下面就讓他來爲你們分享一下製做的過程，包括如何獲取數據，如何建模，若是將模型放置在地圖上等，點擊這裏便可查看做者的原文。

開始教程

一. 數據下載

上相關數據網站下載對應的地形 DEM 高程數據，以下圖，這是山西省的地形👇

二. 建模

根據 DEM 格式數據構建地形模型，這裏咱們使用的是 cityEngine。

1. 首先，打開 cityEngine，新建一個cityEngine Project，將上面下載的tif格式數據拷貝到項目目錄下。

2. import 一個 Terrain Import。

選擇對應的高程數據和紋理貼圖，若是報錯超過 4000 pixels,將下面的 X-Size 和 Z-Size 調小，而後能夠在 scene 中看到以下模型👇

顯然，模型是有問題的，能夠調節高度信息來改變模型。

此時，再看地形模型就好不少了。

3. 導出模型，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 調整光照參數：

調整模型參數：

調整模型材質：

最後，將調整的參數在代碼中修改便可。

若是您對這篇教程有任何問題，歡迎在文末留言回覆哦。

歡迎關注微信公衆號 Mapbox（Mapbox_China）回覆【技術】，加入 Mapbox 技術交流羣，認識更多厲害的朋友！