I use mapbox 2.15.0 and threebox 2.2.7 in react 18.2.0
I succesfully insert a gltf model in mapbox using threebox.
map.current.addLayer({
id: 'custom-threebox-model',
type: 'custom',
renderingMode: '3d',
onAdd: () => {
const options = {
obj: 'https://docs.mapbox.com/mapbox-gl-js/assets/metlife-building.gltf',
type: 'gltf',
scale: { x: 0.2, y: 0.2, z: 0.2 },
units: 'meters',
rotation: { x: 90, y: -90, z: 0 }
};
threebox.current.loadObj(options, (model) => {
model.setCoords([23.72602949741895,37.972941447007116,116]);
threebox.current.add(model);
});
},
render: () => {
threebox.current.update();
}
});
threebox.current = (window.tb = new Threebox(
map.current,
map.current.getCanvas().getContext('webgl'),
{
defaultLights: true,
enableSelectingObjects:true,
enableTooltips:true,
realSunlight:true,
sky:true
}
));
In my mapbox map I have a mapbox DEM layer
map.current.addSource('mapbox-dem', {
'type': 'raster-dem',
'url': 'mapbox://mapbox.mapbox-terrain-dem-v1',
'tileSize': 512,
'maxzoom': 18
});
map.current.setTerrain({ 'source': 'mapbox-dem', 'exaggeration': 1 });
My issue is that the gltf model does not sit on top of the DEM layer correclty, there is a gap. See the image
I can adjust the z of the gltf position with setCoords([23.72602949741895,37.972941447007116,116]);
but I was wondering if there is an automatic way to adjust models to follow the height of DEM, so they can sit on DEM correctly
I could adjust by hand one model, but what if I have a lot of models or a car that has to follow a line on a DEM? Models automatically adjusting to DEM will be useful
Thanks