添加模型

loading

1. 创建一个模型

// 创建一个2000m直径的球体
const sphereGeometry = new THREE.SphereGeometry(2000, 32, 32);
const sphereMaterial = new THREE.MeshStandardMaterial({
  color: 0x049ef4,
  roughness: 0.2,
  metalness: 0.8,
  flatShading: true,
});
const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
viewer.scene.add(sphere);

2. 将模型添加到指定海拔高度

可以将模型加入场景（全局坐标系），先将经纬海拔度高度转换为世界坐标，然后将模型的 position 设置为该坐标。

// 模型经纬度海拔高度(m)
const lonlat = new THREE.Vector3(86.93, 27.99, 8000);
// 经纬度高度转换为世界坐标
const centerPosition = map.geo2world(new THREE.Vector3(86.93, 27.99, 8000));
// 设置球体坐标
sphere.position.copy(centerPosition);
// 将模型添加到场景中

也可以将你的模型添加进地图 TileMesh 中（地图模型局地坐标系），则需要先将要添加的经纬度转换为地图模型坐标系，然后将模型的 position 设置为该坐标。

// 模型经纬度海拔高度(m)
const lonlat = new THREE.Vector3(86.93, 27.99, 8000);
// 经纬度高度转换地图模型坐标;
const centerPosition = map.geo2map(lonlat);
// 设置球体坐标
sphere.position.copy(centerPosition);
// 将模型添加到地图中
map.add(sphere);

3. 将模型添加到地面（贴地）

很多时候，我们希望模型自动贴地（只知道经纬度，海拔高度未知），需要先取得该经纬度处的地面高度，然后再添加。

但是，由于不同层级瓦片的几何误差不同，同一经纬度在不同缩放级别时取得的地面高度会不同，如示例中地图瓦片的加载过程中，地形高度是变化的，如果只是在开始时取一次高度，模型还不能准确贴地，所以需要在每次瓦片加载完成后重新计算地面高度：

• 模型加入场景中时：

// 瓦片下载完成后更新模型高度
map.addEventListener("loading-complete", () => {
  // 根据经纬度计算取得地面信息
  const info = map.getLocalInfoFromGeo(lonlat);
  if (info) {
    // 调整模型y坐标
    sphere.position.y = info.location.z;
  }
});

• 模型加入地图中时：

// 瓦片下载完成后更新模型高度
map.addEventListener("loading-complete", () => {
  // 根据经纬度计算取得地面信息
  const info = map.getLocalInfoFromGeo(lonlat);
  if (info) {
    // 调整模型z坐标
    sphere.position.z = info.location.z;
  }
});

两中方式唯一不同是：加入场景中时，模型高度在 y 轴，需要调整模型 y 坐标；加入地图中时，模型高度在 z 轴，需要调整模型 z 坐标，

TIP

模型加入场景和加入地图效果上没有本质区别，只是加入地图时，模型能跟随地图拉伸，如对地形进行夸张处理时，模型高度比例也随地形一起被拉伸，一般建议将模型加入地图。如果添加的模型较多，建议用将多个模型加入一个 Group，然后将 Group 加入地图，以方便管理。

TIP

同样方法，可以在地图上添加任意模型，如 threejs 提供的中几何体、sprite、gltf 模型，借助插件添加 3dTiles、点云等。