Cesium中級教程6
Cesium中文網：http://cesiumcn.org/ | 國內快速訪問：http://cesium.coinidea.com/
3D Models 三維模型
本教程將教您如何通過Primitive API轉換、載入和使用Cesium中的三維模型。如果你是Cesium的新使用者，可能需要閱讀三維模型部分的(空間資料視覺化教程)[https://cesium.com/docs/tutorials/creating-entities#3d-models],本系列教程中叫：”空間資料視覺化“。
Cesium支援3D模型，包括關鍵幀動畫、skinning(貼皮？)和獨立節點選取，使用glTF，這是由Khronos Group（WebGL和COLLADA背後的聯合體）為網路上的3D模型開發的一種新興行業標準格式。Cesium還提供了一個基於網路的工具，將COLLADA模型轉換為glTF，以便與Cesium一起優化使用。
快速入門
Cesium包括一些現成的二進位制gLTF模型：
- 一個帶有動畫螺旋槳的飛機
- 帶有動畫車輪的地面車輛
- 帶有面板週期行走的角色
- 熱氣球
- 一輛牛奶車（還包括Draco-compressed格式的牛奶車）
這些模型在Apps/SampleData/models中都有自己的目錄。大多數將包括原始COLLADA檔案（.dae）、glTF檔案（.gltf）和/或 二進位制glTF檔案（.glb）。在Cesium應用程式中不需要使用原始的COLLADA檔案。
讓我們編寫程式碼來載入這些模型。開啟Sandcastle的Hello World示例。在第4行var viewer=...下，新增一個
var scene = viewer.scene;
接下來，通過新增以下程式碼，使用glTF中的cesium.model載入地面車輛模型。
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/GroundVehicle/GroundVehicle.glb', modelMatrix : modelMatrix, scale : 200.0 }));
單擊F8，然後使用右上角的geocoder工具縮放到Enxon，PA。
我們現在直視地面車輛。我們可以用滑鼠右鍵拖動放大，用滑鼠中鍵拖動傾斜檢視。
cesium.Model.fromGltf非同步載入glTF模型，包括任何外部檔案，並在完全載入後渲染該模型一次，從而解析readyPromise。只需要.gltf檔案的URL，在本例中為*../../../Apps/SampleData/models/GroundVehicle/Groundvehicle.glb*。
scale作為可選引數提供給fromGltf用於放大模型。許多真實大小的模型也可以變小。所以使用一個較大的scale數值來第一次測試模型是有益的，比如200000.0，示例如下：
modelMatrix也提供給從fromGltf定位和旋轉模型。這將為模型建立區域性座標系。這裡，Cesium.Transforms.eastnorthupfixedframe用於建立一個本地的東北向上座標系，其原點為經度*-75.62898254394531度，緯度40.02804946899414*度。可以隨時更改模型的modelMatrix屬性以移動模型。
要視覺化座標系，請使用Cesium Inspector，在第4行*var viewer=...*下的任意位置新增以下程式碼:
viewer.extend(Cesium.viewerCesiumInspectorMixin);
單擊F8，inspector介面將出現在左上方。展開Primitives，點選Pick a Primitive，點選地面上的車輛模型，然後確認show reference frame。
此處： x軸（東）是紅色的，y軸（北）是綠色的，以及z（向上）是藍色的。
我們可以使用相同的程式碼來載入飛機或角色模型，只需更改URL傳遞給fromGltf的為“../../../../Apps/Sampledata/models/cesiumAir/Cesium-Air.glb”或“../../../Apps/SampleData/models/Cesium Man/Cesium-Man.glb”。有關其所有選項，請參閱**Cesium.Model.fromGltf的參考文件。
動畫
這些模型中的每一個模型都有內建的動畫，這些動畫是由一個藝術家（比如，一個藝術家通過定義幾個關鍵姿勢建立了一個動畫），Cesium在執行時進行插值以建立平滑的動畫。
要播放動畫，請在呼叫Cesium.Model.fromGltf後新增以下程式碼。
Cesium.when(model.readyPromise).then(function(model) {
model.activeAnimations.addAll({
loop : Cesium.ModelAnimationLoop.REPEAT
});
});
由於動畫儲存在glTF模型中，因此我們需要等待readyPromise解決後再訪問它們。addAll用於播放模型中的所有動畫。Cesium.ModelAnimationLoop.REPEAT迴圈動畫，直到將其從activeAnimations集合中移除。要播放特定的動畫，請改用add，並提供動畫的id（glTF JSON屬性名）。
除迴圈選項之外，addAll和add還提供了許多選項來控制動畫的開始和停止時間、速度和方向。例如，下面的動畫以半速（相對於Cesium clock）和反向運轉。
model.activeAnimations.addAll({
loop : Cesium.ModelAnimationLoop.REPEAT,
speedup : 0.5,
reverse : true
});
add返回ModelAnimation物件（addAll返回這些物件的陣列），其中包含動畫開始、停止和更新每個幀時的事件。例如，這允許，相對於另一個動畫啟動一個動畫。請前往API文件檢視開始start、停止stop和更新update事件。
動畫與Cesium clock同步，因此要檢視它們，請按播放小部件上的播放。可以使用時間線和播放小部件來增加、減少和反轉動畫的速度。
要將應用程式配置為自動播放動畫，請初始化如下檢視器：
var viewer = new Cesium.Viewer('cesiumContainer', {
shouldAnimate : true
});
Picking 拾取
與所有Cesium primitives一樣，如果選擇了模型，Scene.Pick將返回一個模型作為其結果的一部分。此外，還返回了glTF節點和glTF網格的id（JSON屬性名），從而可以精確地拾取不同的模型部件。以下示例在控制檯視窗中的滑鼠游標下顯示節點和網格名稱。
var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
handler.setInputAction(
function (movement) {
var pick = scene.pick(movement.endPosition);
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
);
轉換COLLADA為glTF
為了完全轉換COLLDA模型到glTF格式供Cesium使用，可以使用web-based COLLADA-to-glTF轉換器。該工具能夠將*.dae檔案和影象檔案轉換為嵌入影象的.gltf*檔案。
Troubleshooting 故障排除
如果在Cesium中載入3D模型時出現問題，請首先確定問題所在。問題可能出現在：
- 模型工具的匯出器，比如：Maya，Modo，ShetchUp等等
- COLLADA-to-glTF轉換工具
- Cesium glTF渲染器
Mac下的故障排除
在Mac上，要確定是否正確匯出了COLLADA檔案，請雙擊*.dae*檔案，該檔案應顯示在預覽視窗中。如果模型有動畫，滑鼠懸停在視窗底部會彈出一個工具欄來播放它們。
如果collada檔案無效，預覽將顯示錯誤。這通常表示COLLADA匯出器中存在用於建立collada檔案的錯誤。
要解決此問題，請安裝xcode，然後右鍵單擊*.dae檔案並選擇Open With“開啟方式”*->xcode。
Xcode顯示的模型類似於預覽，但具有更多的功能，如選擇單個節點的能力。Xcode還為無效的COLLADA檔案實現了許多解決方法，因此它通常可以載入和預覽無法載入的collada檔案。如果模型在Xcode中載入，請選擇“檔案-儲存”以將模型與解決方法一起儲存，然後應在“預覽確定”中載入。
如果在預覽中仍然沒有載入，那麼COLLADA匯出器有問題。確保您擁有最新版本的建模工具，並嘗試本文中的提示。如果仍然不起作用，請向建模工具（而不是Cesium）提交一個bug。也值得嘗試匯出為*.fbx*或其他格式，然後匯入到另一個具有更好的COLLADA匯出器的建模工具中。
Windows下的故障排除
在Windows下，Visual Studio2013 包括免費的社群版的模型編輯器，可以載入COLLADA模型。為了確定COLLADA檔案是否被正確匯出，將*.dae*檔案拖拽近Visual Studio然後它被載入。如果沒有載入，這通常意味著COLLADA匯出器存在bug。確保您擁有最新版本的建模工具，並嘗試本文中的提示。如果仍然不起作用，請向建模工具（而不是Cesium）提交一個bug。它也值得嘗試匯出為.fbx或其他格式，然後匯入到另一個具有更好的COLLADA匯出器的建模工具中。
如果沒有Visual Studio，則Autodesk有一個允許拖放的WebGL檢視器，並且不需要登入。檢視器不支援動畫。如果模型中有影象，請上傳包含.dae和影象檔案的zip包。
Cesium中的故障排除
一旦我們有了一個有效的COLLADA檔案，就通過COLLADA-to-glTF轉換器執行它，然後嘗試將其載入到Cesium中。如果沒有載入到Cesium中或顯示不正確，則轉換器或Cesium中存在錯誤。要獲取更多詳細資訊，請開啟瀏覽器的開發人員工具（chrome中的ctrl-shift-i）並啟用ause on all exceptions（chrome中的Sources選項卡），然後重新載入Cesium應用程式。
向Cesium論壇發一條資訊，我們通常可以提供一個解決方案，直到有修復方案。在您的帖子中，請包括：
- 原始的COLLADA和轉換的glTF檔案。我們認識到並不是每個人都可以分享他們的模型，但是如果可以的話，它會極大地提高我們的幫助能力。
- 瀏覽器的控制檯視窗以及載入模型時引發的任何異常，例如
資源
檢視Sandcastle中的3D模型示例以及Model和ModelAnimationCollection的參考文件。
> 本文由 admin 創作，採用 知識共享署名 3.0 中國大陸許可協議 進行許可。 可自由轉載、引用，但需署名作者且註明文章出處。
Cesium中文網交流QQ群：807482793
Cesium中文網：http://cesiumcn.org/ | 國內快速訪問：http://ces