07.Cesium快速上手-3dtiles加载

什么是3D Tiles

3D Tiles是一种开放的三维空间数据标准，其设计目的主要是为了提升大的三维场景中模型的加载和渲染速度。假如要在Web客户端渲染一个非常大的三维模型（如一个大城市的建筑模型），如果把模型全部下载到客户端并且进行渲染，这个过程所消耗的时间对于使用普通电脑的用户来说是不能接受的。然而，在绝大多数的用户交互式的三维场景中，都只需要渲染模型的一小部分，将三维模型全部加载并渲染是一种极大的资源浪费，3D Tiles为这个问题提供了一个很好的解决方案。将三维空间数据组织为3D Tiles格式，可以实现模型的按需加载和渲染，从而实现流畅的三维模型浏览体验。

3D Tiles的加载

const tileset = new Cesium.Cesium3DTileset({
  url: "../../SampleData/Cesium3DTiles/Tilesets/Tileset/tileset.json",
});

tileset.readyPromise
  .then(function (tileset) {
    viewer.scene.primitives.add(tileset);
    viewer.zoomTo(
      tileset,
      new Cesium.HeadingPitchRange(
        0.0,
        -0.5,
        tileset.boundingSphere.radius * 2.0
      )
    );
  })
  .catch(function (error) {
    console.log(error);
  });

摄影测量加载例子
加载两个Cesium3DTileset，用来贴图

// An example of using a b3dm tileset to classify another b3dm tileset.
const viewer = new Cesium.Viewer("cesiumContainer", {
  terrain: Cesium.Terrain.fromWorldTerrain(),
});

try {
  // A normal b3dm tileset containing photogrammetry
  const tileset = await Cesium.Cesium3DTileset.fromIonAssetId(40866);
  viewer.scene.primitives.add(tileset);
  viewer.zoomTo(tileset);

  const classificationTilesetUrl =
    "../SampleData/Cesium3DTiles/Classification/Photogrammetry/tileset.json";
  // A b3dm tileset used to classify the photogrammetry tileset
  const classificationTileset = await Cesium.Cesium3DTileset.fromUrl(
    classificationTilesetUrl,
    {
      classificationType: Cesium.ClassificationType.CESIUM_3D_TILE,
    }
  );
  classificationTileset.style = new Cesium.Cesium3DTileStyle({
    color: "rgba(255, 0, 0, 0.5)",
  });
  viewer.scene.primitives.add(classificationTileset);

  // The same b3dm tileset used for classification, but rendered normally for comparison.
  const nonClassificationTileset = await Cesium.Cesium3DTileset.fromUrl(
    classificationTilesetUrl,
    {
      show: false,
    }
  );
  nonClassificationTileset.style = new Cesium.Cesium3DTileStyle({
    color: "rgba(255, 0, 0, 0.5)",
  });
  viewer.scene.primitives.add(nonClassificationTileset);

  Sandcastle.addToggleButton("Show classification", true, function (
    checked
  ) {
    classificationTileset.show = checked;
    nonClassificationTileset.show = !checked;
  });
} catch (error) {
  console.log(`Error loading tileset: ${error}`);
}