Cesium：入门教程（五）之 3D Tiles

3D Tiles

    Cesium 与开源社区合作开发了3D Tiles，用于传输海量的异构三维地理空间数据集。使用概念上类似于Cesium的terrain和imagery的流技术，3D Tiles 使得可以查看原本不能交互式查看的巨大的模型，包括建筑物数据集、CAD（或BIM）模型、点云和摄影测量模型。

格式	用途
异构3D模型（b3dm）	大型异构3D模型，包括三维建筑物、地形等
实例3D模型（i3dm）	3D模型实例，如树、风力发电机等
点云（pnts）	点云
组合数据（cmpt）	以上不同格式的切片组合到一个切片中

  📍 上述的异构3D模型（b3dm）和实例3D模型（i3dm）是基于glTF构建的，点云格式不嵌入glTF中。 

    加载数据（需要到 Cesium ion 添加该数据

var city = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({ url: Cesium.IonResource.fromAssetId(75343) }));

    注：官方给的例子中 AssetId 为3839 ，但我在 Asset Depot 没找到该数据，所以使用 New York City 3D Buildings（75343）

    注：可以上传自己的数据到Cesium ion，并将其瓦片化为3D Tiles [链接]

Cesium ion 支持转换的数据格式：glTF (.gltf, .glb)、CityGML (.citygml, .xml, .gml)、 KML(.kml, .kmz)、LASer (.las,.laz)、COLLADA(.dae)、wavefront OBJ(.obj)

    你可能注意到建筑物没有正确地定位在地平面上。幸运的是，它很容易修复。我们可以通过修改模型矩阵modelMatrix来调整tileset的位置。我们可以通过将tileset的边界球转换成地图Cartographic，然后添加期望的偏移量并重置模型矩阵，从地面找到模型modelMatrix的当前偏移量。

var heightOffset = -32;
city.readyPromise.then(function(tileset) {
    // Position tileset
    var boundingSphere = tileset.boundingSphere;
    var cartographic = Cesium.Cartographic.fromCartesian(boundingSphere.center);
    var surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, 0.0);
    var offset = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, heightOffset);
    var translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3());
    tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
});

    漫游到 New York 

    3D Tiles 还允许我们使用 3D Tiles styling 语言 来调整我们的样式

var defaultStyle = new Cesium.Cesium3DTileStyle({
     color :  "color('gray', 0.5)", // 让建筑变透明
     show : true
});

city.style = defaultStyle;

     我们还可以使用特定于每个特征的属性来确定造型。下面是一个基于建筑物高度的建筑物颜色的例子：

var heightStyle = new Cesium.Cesium3DTileStyle({
    color : {
        conditions : [
            ["${Height} >= 300", "rgba(45, 0, 75, 0.5)"],
            ["${Height} >= 200", "rgb(102, 71, 151)"],
            ["${Height} >= 100", "rgb(170, 162, 204)"],
            ["${Height} >= 50", "rgb(224, 226, 238)"],
            ["${Height} >= 25", "rgb(252, 230, 200)"],
            ["${Height} >= 10", "rgb(248, 176, 87)"],
            ["${Height} >= 5", "rgb(198, 106, 11)"],
            ["true", "rgb(127, 59, 8)"]
        ]
    }
});

city.style = heightStyle;

    交互式修改样式

3D Tile Styling
<select id='tileStyle'>
   <option value ="transparent">Transparent</option>
   <option value ="height">Height</option>
</select>

var tileStyle = document.getElementById('tileStyle');
    function set3DTileStyle() {
        var selectedStyle = tileStyle.options[tileStyle.selectedIndex].value;
        if (selectedStyle === 'transparent') {
            city.style = defaultStyle;
        } else if (selectedStyle === 'height') {
            city.style = heightStyle;
        }
    }

tileStyle.addEventListener('change', set3DTileStyle);

    多数情况下3D Tiles数据都是成片区的数据，数据量比较大，所以为了保证性能，使用Primitive方式加载。

系列

    Cesium：入门教程（一）之 Hello World

    Cesium：入门教程（二）之数据源加载

    Cesium：入门教程（三）之视窗配置

    Cesium：入门教程（四）之 Entities

    Cesium：入门教程（五）之 3D Tiles

    Cesium：入门教程（六）之 交互性（Interactivity）

参考

   3d-tiles/specification at main · CesiumGS/3d-tiles · GitHub

   Introducing 3D Tiles – Cesium