Cesium专栏-大量gltf三维模型加载我们知道，Cesium可以通过Entity来加载Gltf模型，但是一旦加载的模

我们知道，Cesium可以通过Entity来加载Gltf模型，但是一旦加载的模型数据量过大，就会造成浏览器卡顿，甚至崩溃。

有一种场景，比较特殊，例如，可视化一条马路两侧的树木在春夏秋冬四季的情况，每隔100米放置一个垃圾桶等等。这类场景加载的模型数量巨大，如果一个一个的加载，势必会导致网页卡顿，这时我们需要使用ModelInstanceCollection这个API了。

效果图

1. 定义模型所处位置集合

var treePositions = [
  [116.37937798457553, 39.90639040824304],
  [116.37926582917692, 39.90632075459136],
  [116.37902230222204, 39.90627035636522],
  [116.37874168213100, 39.90624505983880]
  ......
];

2. 构造instances

var instances = [];
for (var i = 0; i < treePositions.length; i++) {
  var position = Cesium.Cartesian3.fromDegrees(treePositions[i][0], treePositions[i][1], 0); // 定位
  var modelMatrix = Cesium.Transforms.headingPitchRollToFixedFrame(position, new Cesium.HeadingPitchRoll(0, 0, 0)); // 旋转
  Cesium.Matrix4.multiplyByUniformScale(modelMatrix, 0.2, modelMatrix); // 缩放
  instances.push({
    modelMatrix: modelMatrix
  });
}

3. 添加instances集合

var collection = viewer.scene.primitives.add(new Cesium.ModelInstanceCollection({
  url: "../../data/tree.gltf",
  instances: instances
}));

上图是笔者沿着湖边采集的68个点位，单个模型大小为42M，带模型加载完后，浏览拖动无卡顿。