Mapbox-gl-js: rendering multiple gltf 3D model in a single layer on map using mapbox gl and three js

[gongyucheng]

Question

I used adding gltf 3D Model on map using mapbox gl with three.js

but adding single 3D gltf model in single separate layer and adding them to map is working fine,but is there any way to add mulitple 3D gltf model in a single layer on the map.

[peterqliu]

@gongyucheng yes, you can add multiple gltf models to a single GL context within a single custom layer. there's no special method to do this as far as I'm aware

[bardiaheshmati]

@mourner can you explain a bit more, when I try adding multiple gltf files to a single layer, all the object origins goes crazy, and all end up overlapping on top of each other, if it's possible to have an example if multiple gltf loading on a single layer. thanks

[danvk]

@gongyucheng @bardiaheshmati take a look at this gist: https://gist.github.com/danvk/f8b55af3c1ed2cfafa51ea3385f9933f

The add-3d-model demo positions the camera in a way that makes it a bit tricky to extend to 2+ objects at different locations.

The gist uses react-mapbox-gl but you should be able to use SpriteCustomLayer directly if you're using Mapbox GL JS directly.