一、Cesuimjs介紹

Cesiunjs是一套GIS行業中進行地圖渲染的js庫，該庫使用的WebGL進行地圖渲染。並且結合HTML5進行相應，從而實現3D中渲染地圖。本篇文章則介紹如何將字尾名為max的檔案載入到Cesiumjs中去。

二、載入過程

因為cesium只支援GLTF格式的3D描述檔案，而筆者拿到的.max檔案。因此要實現從max檔案轉換到gltf檔案過程，然後通過cesium相應的api載入3D模型。

1、安裝3Ds Max 2014

這裡版本不一定要使用2014版本，但是一定要使用2015版本以前的，因為在我們格式轉換3D max需要一個第三章外掛的支援。該外掛最高版本支援3Ds max 2015版本。安裝和破解教程不在這裡贅述：http://jingyan.baidu.com/article/3aed632e602381701080911d.html

2、安裝第三方格式外掛-----OpenCollada

在max檔案轉換到gltf檔案過程中，需要先將max檔案轉成 DAE 檔案，然後通過cesium專案中提供的轉換工具將DAE 檔案轉換成 GLTF檔案。在3Ds Max 2014版本中，帶有AutoDesk公司自己研發的Collada，但是在轉換過程中會出現以下報錯：

[WARNING] Reading or writing file. - While reading or writing a file the following notifications have been raised. 
Warning: Null not supported by COLLADA. Node *** will lose its geometric information. The node transforms will be saved.
 

所以我們需要安裝OpenCollada外掛進行格式轉換，外掛的下載地址為：https://github.com/KhronosGroup/OpenCOLLADA/wiki/OpenCOLLADA-Tools

在下載時選擇Download [2014] (Morph not yet supported) 該項，則可以下載使用與3Ds Max版本的OpenCollada外掛了。等下載完成後，該外掛為：COLLADAMAX.dle 檔案，然後將該檔案拷貝到3Ds Max 2014安裝目錄中的 stdplugs 資料夾中，然後啟動或者重啟3Ds Max軟體，開啟軟體後： 自定義->外掛管理器，然後開啟管理器：

然後在外掛列表中右擊，載入新外掛，並在檔案選擇器中選擇放入 stdplugs 檔案中的 COLLADAMAX.dle檔案。

然後就能在外掛列表中看到COLLADAMAX.cle外掛已經被載入成功了：

3、進行3D檔案的格式轉換

（1）使用3Ds Max 2014開啟檔案，並將 max 檔案轉換成OBJ 格式的3D模型，這是因為 dae檔案無法支援tga的材質。因此需要先將3D模型轉換為 OBJ 檔案的3D模型。

點選3D Max 左上角圖示後，點選 匯出（export），然後制定匯出路徑與檔名，並將檔案型別選擇為 OBJ

進行轉換格式的材質的設定

然後點選匯出，如果出現缺少貼圖，則通過將max檔案目錄目錄新增到搜尋路徑中即可。完成後就能看到在制定目錄中的Obj檔案等：

（2）將Obj檔案轉換成 DAE檔案

雙擊Obj檔案後，選擇 3Ds Max 2014進行開啟。在開啟後選擇 匯出（export）功能：

然後在匯出時需要修改兩處：

A、選擇OpenCollada的DAE檔案，而不是AutoDesk Collada的DAE檔案

B、選擇使用相對路徑

然後就能完成對Obj物件像DAE檔案的轉換

4、DAE 檔案轉換到 GLTF檔案

（1）下載Cesium提供的轉換工具：ColladaToGltf.exe,下載地址為：https://github.com/KhronosGroup/glTF/releases

（2）進行DAE 檔案的裝換

在Windows下開啟命令列模式，進入到該工具的資料夾中，然後通過命令進行檔案轉換：

collada2gltf.exe -f {dae檔案的絕對路徑} -e

-f ： string，指定dae檔案的絕對路徑

-e：將所有的檔案全部打包成一個gltf檔案，如果沒有指定的話則會生成 bin gltf glsf等多種檔案。

該命令執行完成後，就會發現dae所在檔案中出現了一個 同名的 GLTF檔案。

5、使用Cesium載入3D模型

將轉換的dae檔案和gltf檔案全部拷到相應的資料夾中.然後通過cesium提供的例子進行測試：

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 : '../../SampleData/models/GZF/gzf_d_1/gzf_d_1.gltf',
    modelMatrix : modelMatrix,
    scale : 200.0
}));

三、總結

在經過兩天的折騰，終於將整套流程完成了下來，如果上述有什麼細節沒有描述清楚的，請參考下面給出的部落格：

http://blog.csdn.net/l491453302/article/details/46766909