Have 3D model in mapbox/threebox to sit on top of DEM layer

186 Views Asked by At

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

enter image description here

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

0

There are 0 best solutions below