Cesium中級教程6 - 3D Models 三維模型

Cesium中文網：http://cesiumcn.org/ | 國內快速訪問：http://cesium.coinidea.com/ 本教程將教您如何經過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文件。咱們認識到並非每一個人均可以分享他們的模型，可是若是能夠的話，它會極大地提升咱們的幫助能力。
• 瀏覽器的控制檯窗口以及加載模型時引起的任何異常，例如

資源

查看Sandcastle中的3D模型示例以及Model和ModelAnimationCollection的參考文檔。

Cesium中文網交流QQ羣：807482793 Cesium中文網：http://cesiumcn.org/ | 國內快速訪問：http://cesium.coinidea.com/