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=...下，添加一個scene變量。
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文件。我們認識到並不是每個人都可以分享他們的模型，但是如果可以的話，它會極大地提高我們的幫助能力。
- 瀏覽器的控制台窗口以及加載模型時引發的任何異常，例如
作者：Cesium中文網
鏈接：https://www.jianshu.com/p/13384081b8eb
來源：簡書
簡書著作權歸作者所有，任何形式的轉載都請聯系作者獲得授權並注明出處。