mapbox-gl开发教程（十五）：加载三维模型

--mapbox-gl是一个开源、基于webgl技术的前端地图类库--

开发教程篇十五：加载三维模型mapbox-gl加载三维模型，是通过集成three.js，实现支持格式的模型加载，官网提供了一个加载gltf格式模型。

mapbox-gl集成three.js是通过自定义图层的形式，关键代码如下：

//引用three.js库，根据开发的实际，需要引用不同的插件

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的基点坐标，建立转换坐标系
var modelOrigin = [148.9819, -35.39847];

var modelAltitude = 0;

//three.js默认是Y轴向上（Y-up），需要进行一个角度转换
var modelRotate = [Math.PI / 2, 0, 0];

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

// three.js对象转换成地图位置的转换参数设置（平移、旋转、缩放）

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方法，根据平移、旋转、缩放，生成变换矩阵，对three.js场景中的对象进行实时转换，达到和底图场景保持一致。

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/