When using map.setTerrain in MapBox and adding a 3D model using Threebox 2.2.2 the 3D model changes altitude when zooming in and out.
Displaying a dae 3D model on the MapBox without map elevation works fine, but if (in the code below) the 'Add map elevation' block is uncommented the MapBox dem (digital elevation model) is added to the map using map.setTerrain. After that the altitude of the 3D model changes when zooming in and out and sometime it becomes invisible.
My code is below (in order for it to run you need a MapBox key).
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>example</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/jscastro76/[email protected]/dist/threebox.min.js" type="text/javascript"></script>
<link href="https://cdn.jsdelivr.net/gh/jscastro76/[email protected]/dist/threebox.css" rel="stylesheet">
<link href="https://api.mapbox.com/mapbox-gl-js/v2.13.0/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v2.13.0/mapbox-gl.js"></script>
</head>
<body>
<div id="map"></div>
<script>
// Make the base map
mapboxgl.accessToken = 'mapbox_key';
// Make the map
map = new mapboxgl.Map({
container: 'map',
projection: 'mercator',
zoom: 15,
center: [-4.254249, 42.908446],
pitch: 0,
bearing: 0,
style: 'mapbox://styles/mapbox/streets-v12',
maxZoom: 22,
antialias: true
});
// Add map elevation
/*
map.on('style.load', () => {
map.addSource('mapbox-dem', {
'type': 'raster-dem',
'url': 'mapbox://mapbox.mapbox-terrain-dem-v1',
'tileSize': 512,
maxZoom: 22
});
// add the DEM source as a terrain layer with exaggerated height
map.setTerrain({ 'source': 'mapbox-dem', 'exaggeration': 1 });
});
*/
// define tb object
const tb = (window.tb = new Threebox(
map,
map.getCanvas().getContext('webgl'),
{defaultLights: true}
));
// Load layer with 3d object
map.on('load', () => {
// Add 3d model
map.addLayer({
id: 'custom-threebox-model',
type: 'custom',
renderingMode: '3d',
onAdd: function () {
const scale = 0.025;
const options = {
obj: 'https://webdemo.gisonline.es/SSEE_PICAL.dae',
type: 'dae',
scale: { x: scale, y: scale, z: scale },
units: 'meters',
rotation: { x: 0, y: 0, z: 0 }
};
tb.loadObj(options, (model) => {
model.setCoords([-4.260950, 42.906500, -4]);
model.setRotation({ x: 0, y: 0, z: 180 });
tb.add(model);
});
},
render: function () {
tb.update();
}
});
});
</script>
</body>
I think in the line ' model.setCoords([-4.260950, 42.906500, -4]);' you have the altitude set at minus 4 metres. I have the same issue you are experiencing when I have elevation enabled, so my work around is to have my objects at least 220 metres for elevation.
Near the bottom of this page is some reference regarding elevation. https://github.com/peterqliu/threebox/blob/master/docs/Threebox.md
I'll need to dig more, but I seem to remember there may be a formula to use based off the amount of terrain exaggeration applied.