Rendering multiple gltf 3D model in a single layer on map using mapbox gl and three js

Questions
1

I used adding 3D Model on map using mapbox gl with three.js, is there any way to add mulitple 3D gltf model in a single layer on the map?

1 Like
2

I don’t think very many people on this forum are using Mapbox GL. You may need to share code showing how you’re loading one model, and maybe we can tell you if this is a three.js question or a Mapbox GL question? Or perhaps try using tags for both libraries on Stack Overflow.

3

Hi @nima_shahin
You could achieve this easily with the latest version of Threebox, a Three.js plugin for Mapbox, that avoids you to deal with the complexity of both.
You have several examples here here, and all the documentation here
With only a few lines of code, you’ll be able to add a model or many in the same layer

			map.addLayer({
			id: 'custom_layer',
			type: 'custom',
			renderingMode: '3d',
			onAdd: function (map, mbxContext) {

				window.tb = new Threebox(
					map,
					mbxContext,
					{ defaultLights: true }
				);

				var options = {
					obj: '/3D/soldier/soldier.glb',
					type: 'gltf',
					scale: 1,
					units: 'meters',
					rotation: { x: 90, y: 0, z: 0 } //default rotation
				}

				tb.loadObj(options, function (model) {
					soldier = model.setCoords(origin);
					tb.add(soldier);
				})

			},
			render: function (gl, matrix) {
				tb.update();
			}
		});