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