Our team sometimes describes Cesium as a 3D game engine with real world data. However, using real-world data is much more difficult than using typical video game data, because real data can be incredibly high resolution and require accurate visualization. Fortunately, Cesium worked with the open source community to develop it. 3D Tiles This is a Open norms It is used to transmit massive heterogeneous three-dimensional geospatial data sets.

Using streaming technologies conceptually similar to Cesium's terrain and imagery, 3D Tiles allows you to view huge models that could not otherwise be viewed interactively, including building data sets, CAD (or BIM) models, point clouds and photogrammetric models.

• The 3D Tiles Inspector It is a debugging tool that provides viewing capability under the hood.

Here are some 3D Tiles demos showing different formats:

• Photogrammetry Model
• Building Information Model
• Point Cloud Model
• All Formats

In our applications, we will use Cesium 3D Tileset to add realism to our visualization by displaying full-dimensional models of all buildings in New York! This New York tiles is hosted in Cesium Ion and can be added using IonResource.fromAssetId:

// Load the NYC buildings tileset
var city = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({ url: Cesium.IonResource.fromAssetId(3839) }));

You may notice that the building is not positioned correctly on the ground level. Fortunately, it's easy to fix. We can adjust tileset position by modifying the model matrix model Matrix.

We can find the current offset of model Matrix from the ground by converting the boundary sphere of tileset into a map Cartographic, adding the expected offset and resetting the model matrix.

// Adjust the tileset height so its not floating above terrain
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);
});

There are now 1.1 million building model streams in our scenario.

3D Tiles also allows us to use the 3D Tiles styling language to adjust our style. The 3D Tiles style defines the expressions used to evaluate color (RGB and transparency) and displays the properties of the Cesium 3D Tile Feature feature, which is part of the tileset, such as a single building in a city. Styles are usually based on feature attributes stored in tile batch tables. Feature attributes can be anything like height, name, coordinates, construction date, etc., but are built into tileset asset. Styles are defined in JSON, and expressions are written in a small set of JavaScript for styling. In addition, Style Language provides a set of built-in functions to support common mathematical operations.

An example of Cesium 3D Tileset Style is as follows:

var defaultStyle = new Cesium.Cesium3DTileStyle({
    color : "color('white')",
    show : true
});

The above code makes our NYC tileset white and always visible. To actually set the tileset style, we set city.style:

city.style = defaultStyle;

We can also define many styles that we like. For example, make buildings transparent:

var transparentStyle = new Cesium.Cesium3DTileStyle({
    color : "color('white', 0.3)",
    show : true
});

Using the same style to achieve each feature in our tileset is just fur work. We can also use attributes specific to each feature to determine the shape. Here is an example of building color based on building height:

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)"]
        ]
    }
});

To exchange between styles, we can add more code to listen for HTML input:

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

tileStyle.addEventListener('change', set3DTileStyle);

For more examples of 3D Tiles, how to use them and how to adjust styles, see the 3D Tiles sandcastle demos.

3D Tiles example:

• Formats
• Photogrammetry Model
• Feature Styling

If you have data and need help converting it to 3D tiles, please continue to pay attention to the update of the Cesium Ion platform! Subscribe here for updates.

Cesium Chinese Communication QQ Group: 807482793

This article is based on admin Creation, adoption Knowledge Sharing Signature 3.0 Mainland China Licensing Agreement License.
It can be reproduced and quoted freely, but the author should be signed and the source of the article should be indicated.