Mapbox加载3D模型

1. 背景

现在需要在Mapbox中加载obj文件和附属的材料库mtl文件，在地图上展示一个3D模型。

2. 依赖的文件

1.threebox.js
2.mapbox-gl.js
3.mapbox-gl.css
4.需要加载的3D模型文件

3. 初始化地图

var map = new mapboxgl.Map({
	container: 'map',
	style: 'mapbox://styles/mapbox/dark-v9',
	center: origin,
	zoom: 16,
	pitch:60,
	bearing:0
});

4. 添加模型

map.on('style.load', function() {
	map.addLayer({
		id: 'custom_layer',
		type: 'custom',
		renderingMode: '3d',
		onAdd: function(map, mbxContext){
			window.tb = new Threebox(
				map, 
				mbxContext,
				{defaultLights: true}
			);
			// 从外部导入obj文件，其大小扩大10倍
			var options = {
				obj: 'obj文件的路径',
				mtl: 'mtl文件的路径',
				scale: 10
			}
			tb.loadObj(options, function(model) {
				truck = model.setCoords(origin);
				tb.add(truck);                        
			})
		},
		render: function(gl, matrix){
			tb.update();
		}
	});
})

5. 效果

6. 参考

1. Threebox:A three.js plugin for Mapbox GL JS
2. Mapbox加载3D模型的实例
3. Mapbox:Add a 3D model