Recently, I encountered an issue with adding glTF 3D models to a map using Mapbox GL and Three.js. It seems that while I can successfully add a single glTF model in a separate layer on the map, I am facing difficulties when trying to add multiple glTF models within a single layer.
Map Code:
this.modelOrigin = [148.9819, -35.3981];
this.modelOrigin2 = [148.9819, -35.4981];
this.iconImage = "https://docs.mapbox.com/mapbox-gl-js/assets/34M_17/34M_17.gltf";
// Map initialization
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v9',
center: [148.9819, -35.3981],
zoom: 17.5,
hash: true,
minZoom: 0,
maxZoom: 22,
preserveDrawingBuffer: true,
pitch: 60
});
var self = this;
map.on('style.load', function () {
// Adding separate 3D models on the map
map.addLayer(new AddMapCustomLayer(self.modelOrigin, self.iconImage));
map.addLayer(new AddMapCustomLayer(self.modelOrigin2, self.iconImage));
});
Code for the Custom Layer:
class AddMapCustomLayer {
// Class properties
constructor(modelOrigin, iconImage) {
// Constructor logic
}
modelTransformation(modelOrigin,modelAltitude){
// Transformation logic
}
uuidv4() {
// UUID generator logic
};
onAdd(map, gl) {
// Initialization logic
}
render(gl, matrix) {
// Rendering logic
}
If you have any suggestions or solutions on how I could dynamically add the same model at different locations on the map using a single layer, I would greatly appreciate it.