在 MapBox 中使用 map.setTerrain 并使用 Threebox 2.2.2 添加 3D 模型时，3D 模型在放大和缩小时会改变高度。
在没有地图高程的 MapBox 上显示 dae 3D 模型效果很好，但如果（在下面的代码中）取消注释“添加地图高程”块，则 MapBox dem（数字高程模型）将使用 map.setTerrain 添加到地图中。之后3D模型的高度在放大和缩小时会发生变化，有时会变得不可见。
我的代码如下（为了让它运行，你需要一个 MapBox 密钥）。
<!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>
我认为在“ model.setCoords([-4.260950, 42.906500, -4]);”行中您将海拔高度设置为负 4 米。当我启用海拔时，我遇到了与您相同的问题，所以我的解决方法是让我的对象的海拔至少为 220 米。
本页底部附近有一些有关海拔的参考信息。
https://github.com/peterqliu/ Threebox/blob/master/docs/Threebox.md
我需要挖掘更多，但我似乎记得可能有一个公式可以根据应用的地形夸大量来使用。