My goal is to integrate a 3D model as a custom layer on Mapbox using Three.js, alongside adding a 3D terrain on the map. I have followed the documented examples for incorporating a 3D model and 3D terrain from Mapbox.
The issue I'm encountering is that the 3D model briefly appears until the terrain finishes loading, at which point it disappears. However, if I only load the model without the terrain, everything displays correctly.
The sequence of function calls involves loadTerrain() being called upon map load, which then triggers the loadModel() function:
async function loadTerrain() {
mapRef.current?.getMap().addSource("mapbox-dem", {
type: "raster-dem",
url: "mapbox://mapbox.mapbox-terrain-dem-v1",
tileSize: 512,
});
mapRef.current
?.getMap()
.setTerrain({ source: "mapbox-dem", exaggeration: 1.5 });
loadModel();
}
function loadModel(fragGroup: any) {
// Model configuration details here...
}
Incorporating react-map-gl within a Next.js application, my expectation was to seamlessly load both the model and terrain simultaneously. Unfortunately, the model vanishes once the terrain starts loading.