Cesium学习笔记（五）：3D 模型 （http://blog.csdn.net/umgsoil/article/details/74572877）

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;

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

我们将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
}));

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

你会发现这个模型却没有自带动画效果，让我们来给他加上动画

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

• 1
• 2
• 3
• 4
• 5
• 6

• 1
• 2
• 3
• 4
• 5
• 6

这时候就有动画效果了，这个动画效果我们也是可以控制的，比如让它慢一点或者回放一遍

model.activeAnimations.addAll({
    loop : Cesium.ModelAnimationLoop.REPEAT,
    //这个半速是相对于Cesium的clock来说的
    speedup : 0.5,
    reverse : true
});

• 1
• 2
• 3
• 4
• 5
• 6

• 1
• 2
• 3
• 4
• 5
• 6

那么这两种方法有什么区别呢？

追溯一下源码可以发现，其实用实体(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
);

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13

可以看到控制台把每个部件的名字都打印出来了

Cesium还为我们提供了一个检查器，我们可以通过这个检查器来查看我们模型的边界、轴坐标等，当前这个检查器的功能不止在3D模型上，还有拾取当前点的经纬度等其他功能

viewer.extend(Cesium.viewerCesiumInspectorMixin);

• 1

• 1

只需要一行就可以开启

点开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;

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17