Cesium入門10 - 3D Tiles

Cesium中文網：http://cesiumcn.org/ | 國內快速訪問：http://cesium.coinidea.com/

我們團隊有時把Cesium描述成一個真實世界資料的3D遊戲引擎。然而，使用真實世界的資料比使用典型的視訊遊戲資料資料要困難得多，因為真實資料可能是難以置信的高解析度，並且需要精確的視覺化。幸運的是，Cesium 與開源社群合作開發了3D Tiles，這是一個開放的規範，用於傳輸海量的異構三維地理空間資料集。

使用概念上類似於Cesium的terrain和imagery的流技術，3D Tiles 使得可以檢視原本不能互動式檢視的巨大的模型，包括建築物資料集、CAD（或BIM）模型、點雲和攝影測量模型。

• The 3D Tiles Inspector 是一種在遮罩hood下提供檢視能力的除錯工具。

下面是一些展示不同格式的3D Tiles演示：

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

在我們的應用中，我們將使用Cesium3DTileset通過展示紐約所有建築物的全3D模型來為我們的視覺化新增現實主義！這種紐約 tilese託管在Cesium Ion中，我們可以使用IonResource.fromAssetId新增它：

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

你可能注意到建築物沒有正確地定位在地平面上。幸運的是，它很容易修復。我們可以通過修改模型矩陣modelMatrix來調整tileset的位置。

我們可以通過將tileset的邊界球轉換成地圖Cartographic，然後新增期望的偏移量並重置模型矩陣，從地面找到模型modelMatrix的當前偏移量。

// 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);
});
 

現在在我們的場景中有110萬個建築模型流。

3D Tiles 還允許我們使用3D Tiles styling語言 來調整我們的樣式。3D Tiles 樣式定義了用於評估顏色（RGB和透明度）的表示式，並顯示了Cesium3DTileFeature特徵的屬性，這是tileset的一部分，例如城市中的單個建築物。樣式通常基於儲存在瓦片的批處理表中的特徵屬性。特徵屬性可以是高度、名稱、座標、構造日期等任何東西，但被構建到tileset asset 中。樣式是用JSON定義的，而表示式是在JavaScript的小子集中編寫的，用於樣式化。此外，樣式語言提供了一組內建函式來支援常見的數學運算。

一個Cesium3DTilesetStyle的例子如下：

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

上述程式碼使我們NYC的tileset是白色並且總是可見的。為了實際設定tileset的樣式，我們設定city.style:

city.style = defaultStyle;

我們還可以定義許多我們喜歡的樣式。比如，讓建築變透明：

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

在我們的tileset中使用相同的樣式來達到每一個特徵只是皮毛工作。我們還可以使用特定於每個特徵的屬性來確定造型。下面是一個基於建築物高度的建築物顏色的例子：

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

為了在樣式間交換，我們可以新增更多的程式碼來偵聽HTML輸入：

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);

更多關於3D Tiles的例子、如何使用及調整樣式，請檢視the 3D Tiles sandcastle demos。

3D Tiles例子：

• Formats
• Photogrammetry Model
• Feature Styling

如果你有資料，需要幫助將其轉換為3D瓦片，請繼續關注關於Cesium Ion平臺的更新！在這裡訂閱更新。

Cesium中文網交流QQ群：807482793

Cesium中文網：http://cesiumcn.org/ | 國內快速訪問：http://cesium.coinidea.com/