--mapbox-gl是一個開源、基于webgl技術的前端地圖類庫--

開發(fā)教程篇十五：加載三維模型mapbox-gl加載三維模型，是通過集成three.js，實現(xiàn)支持格式的模型加載，官網(wǎng)提供了一個加載gltf格式模型。

mapbox-gl集成three.js是通過自定義圖層的形式，關鍵代碼如下：

//引用three.js庫，根據(jù)開發(fā)的實際，需要引用不同的插件

script?src="https://unpkg.com/three@0.106.2/build/three.min.js"

script?src="https://unpkg.com/three@0.106.2/examples/js/loaders/GLTFLoader.js"

//設置地圖上一點的坐標為three.js的基點坐標，建立轉(zhuǎn)換坐標系
var?modelOrigin?=?[148.9819,?-35.39847];

var?modelAltitude?=?0;

//three.js默認是Y軸向上（Y-up），需要進行一個角度轉(zhuǎn)換
var?modelRotate?=?[Math.PI?/?2,?0,?0];

var?modelAsMercatorCoordinate?=?mapboxgl.MercatorCoordinate.fromLngLat(modelOrigin,modelAltitude);

//?three.js對象轉(zhuǎn)換成地圖位置的轉(zhuǎn)換參數(shù)設置（平移、旋轉(zhuǎn)、縮放）

var?modelTransform?=?{

translateX:?modelAsMercatorCoordinate.x,

translateY:?modelAsMercatorCoordinate.y,

translateZ:?modelAsMercatorCoordinate.z,

rotateX:?modelRotate[0],

rotateY:?modelRotate[1],

rotateZ:?modelRotate[2],

scale:?modelAsMercatorCoordinate.meterInMercatorCoordinateUnits()};

自定義圖層的onAdd方法中，新建一個three.js的場景，設置燈光、添加模型等場景對象，具體參見示例代碼；

render方法，根據(jù)平移、旋轉(zhuǎn)、縮放，生成變換矩陣，對three.js場景中的對象進行實時轉(zhuǎn)換，達到和底圖場景保持一致。

render:?function?(gl,?matrix)?{var?rotationX?=...;

var?rotationY?=?...;

var?rotationZ?=?...;

var?m?=?new?THREE.Matrix4().fromArray(matrix);

var?l?=?new?THREE.Matrix4().makeTranslation(...

).scale(new?THREE.Vector3(...)).multiply(rotationX).multiply(rotationY).multiply(rotationZ);

this.camera.projectionMatrix?=?m.multiply(l);

this.renderer.state.reset();

this.renderer.render(this.scene,?this.camera);

this.map.triggerRepaint();

如果需要同時加載多個模型，參見公眾號文章：mapbox-gl中three.js對象的位置，計算距離，在three.js場景中，添加多個模型隊形
參考頁：https://docs.mapbox.com/mapbox-gl-js/example/add-3d-model/