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

轉載于:https://www.cnblogs.com/yanan-boke/p/7422863.html

總結

以上是生活随笔為你收集整理的Cesium学习笔记（五）：3D 模型 （http://blog.csdn.net/umgsoil/article/details/74572877）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。