添加 GLTF 模型

loading

本节与 9. 添加简单模型 方法完全一样，只不过模型换成了 GLTF 模型。

1. 加载 gltf 模型

使用 GLTFLoader 加载模型，模型加载后，将模型放置在指定经纬度高度，与 threejs 加载模型方法无异。

// 地图中心经纬度高度
const centerGeo = new THREE.Vector3(108.9507, 34.1915, 500);
// 地图中心经纬度高度（m）转为世界坐标
const centerPosition = map.geo2world(centerGeo);

// 模型底面高度
let modelMiny = 0;

// 配置模型加载器
const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath("../lib/draco/gltf/");
const loader = new GLTFLoader();
loader.setDRACOLoader(dracoLoader);
let model;
// 加载模型
loader.load("../model/LittlestTokyo.glb", function (gltf) {
  model = gltf.scene;
  // 模型动画
  const mixer = new THREE.AnimationMixer(model);
  mixer.clipAction(gltf.animations[0]).play();
  map.addEventListener("update", (evt) => mixer.update(evt.delta));

  // 计算模型位置
  modelMiny = new THREE.Box3().setFromObject(model).min.y;
  model.position.set(centerPosition.x, centerPosition.y - modelMiny, centerPosition.z);
  viewer.scene.add(model);
});

2. 添加灯光

正常情况，gltf 模型已经可以显示在地图上了，但为了取得更好效果，最好是添加灯光和阴影

添加灯光和阴影，见第 11 节。

3. 将模型贴地

由于地图不同缩放级别时地形几何误差不同，地面的高度不同，所以在瓦片加载完成后，需要重新计算模型高度。

见第 9 节