Cesium學習筆記（五）：3D 模型

Cesium支持3D模型，包括關鍵幀動畫，皮膚的改變還有單個節點的選擇等，Cesium還提供了了一個基於網絡的工具，將COLLADA模型轉換爲glTF，方便和優化模型添加

還記得我們在實體添加的時候添加過一個3D模型麼，具體是這樣的

var viewer = new Cesium.Viewer('cesiumContainer');
var entity = viewer.entities.add({
    position : Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706),
    model : {
        uri : '../../SampleData/models/CesiumGround/Cesium_Ground.gltf'
    }
});
viewer.trackedEntity = entity;

我們將3D模型直接以實體的形式添加進去，效果很不錯，這次我們換種形式

var viewer = new Cesium.Viewer('cesiumContainer');
var scene = viewer.scene;
var modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(
    Cesium.Cartesian3.fromDegrees(-75.62898254394531, 40.02804946899414, 0.0));
var model = scene.primitives.add(Cesium.Model.fromGltf({
    url : '../Apps/SampleData/models/CesiumGround/Cesium_Ground.gltf',
    modelMatrix : modelMatrix,
    minimumPixelSize : 512,
    maximumScale : 200000
}));

你會發現這個模型卻沒有自帶動畫效果，讓我們來給他加上動畫

Cesium.when(model.readyPromise).then(function(model) {
    model.activeAnimations.addAll({
        //永久重複
        loop : Cesium.ModelAnimationLoop.REPEAT
    });
});

這時候就有動畫效果了，這個動畫效果我們也是可以控制的，比如讓它慢一點或者回放一遍

model.activeAnimations.addAll({
    loop : Cesium.ModelAnimationLoop.REPEAT,
    //這個半速是相對於Cesium的clock來說的
    speedup : 0.5,
    reverse : true
});

那麼這兩種方法有什麼區別呢？

追溯一下源碼可以發現，其實用實體(entities)創建的3D模型最終通過GeometryInstance轉化成了primitives，也就是說兩者根本上是一樣的，不過用實體方式創建會更簡單一點。

順帶稍微查了下，用實體方式創建因爲在用GeometryInstance會進行一個分類處理，能夠充分利用GPU性能，所以在性能上還會更優化一些

我們還可以精準的選擇3D模型上的一個個小的部件

//獲得當前鼠標在模型上觸碰位置的名字
var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
handler.setInputAction(
    function (movement) {
        //當鼠標移動時獲取移動的末位置
        var pick = scene.pick(movement.endPosition);
        //簡單來說就是這個點上有東西，那就打log
        if (Cesium.defined(pick) && Cesium.defined(pick.node) && Cesium.defined(pick.mesh)) {
            console.log('node: ' + pick.node.name + '. mesh: ' + pick.mesh.name);
        }
    },
    Cesium.ScreenSpaceEventType.MOUSE_MOVE
);

可以看到控制檯把每個部件的名字都打印出來了

Cesium還爲我們提供了一個檢查器，我們可以通過這個檢查器來查看我們模型的邊界、軸座標等，當前這個檢查器的功能不止在3D模型上，還有拾取當前點的經緯度等其他功能

viewer.extend(Cesium.viewerCesiumInspectorMixin);

只需要一行就可以開啓

點開primitives，pick我們這個模型就可以了

我們還可以給模型改變一下屬性

var viewer = new Cesium.Viewer('cesiumContainer')
var entity = viewer.entities.add({
    position : Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706),
    model : {
        uri : '../../SampleData/models/CesiumGround/Cesium_Ground.gltf',
        //模型顏色，透明度
        color : Cesium.Color.fromAlpha(Cesium.Color.RED, parseFloat(0.5)),
        //輪廓線
        silhouetteColor : Cesium.Color.fromAlpha(Cesium.Color.GREEN, parseFloat(0.5)),
        //模型樣式['Highlight', 'Replace', 'Mix']
        colorBlendMode : Cesium.ColorBlendMode.MIX,
        //colorBlendAmount需要選擇mix後將colorBlendAmountEnabled設置爲true才能使用
        colorBlendAmountEnabled : true,
        colorBlendAmount : parseFloat(0.8)
    }
});
viewer.trackedEntity = entity;

如果你想導入自定義的3D模型, 可以使用obj轉gltf工具或者dae轉gltf工具進行轉化, 要記得帶貼圖哦, 不然轉出來就是白的了,詳細見第九節導入3D模型. 官網上也是有提供的, 戳這裏, 不過網頁版的只能轉10m以下的, 而且速度也不行,還是考慮github上的工具吧

參考資料：官方文檔