3D Models in Mapbox GL

Andrew Harvey has created an impressive demonstration overlaying a 3D model on top of a Mapbox GL map. His Add a 3D Model to a Mapbox GL JS Map places a 3D model of a radio telescope on top of an interactive map.

Adding a 3D model to a Mapbox GL map allows the user to view the model from lots of different angles. If you right-click on the map you can rotate around the model and adjust the angle of view. While Andrew hasn't done it with his demo, you could also use the Flyto method in Mapbox GL to animate around or zoom in and out on the model on the map.

The 3D model in Andrew's map uses the glTF file format for 3D scenes and models. This is a well used format and there are plenty of freely available glTF files of 3D models on the internet. If you want to experiment with adding other 3D models to Mapbox GL then you are spoiled for choice of ready made 3D objects (for example try Sketchfab).


You can also use glTF 3D models with the Cesium WebGL 3d globe engine. To get started you should check out the Cesium 3D Models tutorial. Or, if you want to jump straight to a working 3D globe with 3D model, have a look at the 3D models sandcastle.

For the 3D models tutorial Cesium created a number of 3D models, including a plane, a milktruck and a hot-air balloon. If you wanted you could try overlaying these on a Mapbox GL interactive map.