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上的工具吧

参考资料：官方文档