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/threebox@v.2.2.2/dist/threebox.min.js" type="text/javascript"></script>
<link href="https://cdn.jsdelivr.net/gh/jscastro76/threebox@v.2.2.2/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>
