http://blog.csdn.net/tangyajun_168/article/details/50936698
最近項目中用到室外三維模型與室內三維地圖交互，室外三維模型的加載我們采用了cesium js來實現,在使用的過程中遇到了許多的問題，閑暇之余將其實現及遇到的問題記錄下來，以備將來再用到時少走彎路。
一、開發環境准備
1、下載cesium js
cesium js 下載地址 https://github.com/AnalyticalGraphicsInc/cesium/releases
下載完成解壓后的目錄如下圖
2.打開cmd命令行進入到cesium的安裝目錄，執行npm install(需要安裝nodejs及npm),該命令執行完會在cesium根目錄下創建node_modules目錄，如下圖
安裝gulp作為項目開發的依賴，如下圖
gulp安裝之后會在node_modules目錄中創建執行gulp命令所需要的依賴包，如下圖
3.下載mds max插件OpenCOLLADA Tools,下載地址
https://github.com/KhronosGroup/OpenCOLLADA/wiki/OpenCOLLADA-Tools(根據系統要求下載32位或64位)。
4.下載collada2gltf 工具,下載地址https://github.com/KhronosGroup/glTF/releases，此工具用來將dae格式文件轉換為gltf格式，下載完解壓后的目錄如下圖
二、編譯cesiumjs
在cesium根目錄執行gulp default命令，將會在cesiumjs安裝的根目錄創建一個Build文件夾，里面包含的是編譯后生成的cesium.js文件及相關組件。
編譯后的Build目錄包含小部件、第三方依賴庫及離線地圖數據等
三、用cesium js庫開發，加載三維模型
1.將Build目錄中的所有文件及目錄拷貝到項目中
2.將3ds max中的三維模型數據導出成dae格式，如圖
導出的類型需要選擇OpenCollada(*.dae)，如果導出的模型存在透明貼圖，導出時不要勾選相對路徑，導出后會生成一個images目錄，該目錄中的圖片是模型中所需要的貼圖及紋理圖。
3.將dae格式文件轉換成gltf文件，打CMD命令行，進入到collada2gltf的根目錄，執行collada2gltf.exe -f E:\xykjc\Model\zhulou.dae -e，
-f表示dae文件的完成路徑，collada2gltf支持兩種轉換方式，-e及-o，-e轉換后只生成一個文件(gltf文件)，在模型比較大時我們可將模型與紋理貼圖分開加載，這時可用-o命令進行轉換，轉換后會生成.gltf、.bin及.glsl三種格式的文件(注意：在max中導出模型時不能選擇相對路徑，如果選中了相對路徑，-o轉換的gltf模型文件加載出來會變成黑色)
4.將生成gltf文件及紋理貼圖拷貝到項目中
5.導入cesium.js及widgets.css
//創建cesium Viewer
viewer = new Cesium.Viewer(‘cesiumContainer’,{
//是否創建動畫小器件，左下角儀表
animation:false,
//是否顯示圖層選擇器
baseLayerPicker:false,
//是否顯示全屏按鈕
fullscreenButton:false,
//是否顯示geocoder小器件，右上角查詢按鈕
geocoder:false,
//是否顯示Home按鈕
homeButton:false,
//是否顯示信息框
infoBox : false,
//是否顯示3D/2D選擇器
sceneModePicker:false,
//是否顯示選取指示器組件
selectionIndicator : false ,
//是否顯示時間軸
timeline:false,
//是否顯示右上角的幫助按鈕
navigationHelpButton:false,
//如果設置為true，則所有幾何圖形以3D模式繪制以節約GPU資源
scene3DOnly : true,
navigationInstructionsInitiallyVisible:false,
showRenderLoopErrors:false,
//加載自定義地圖瓦片需要指定一個自定義圖片服務器 例如指定OpenStreetMapImagerProvider
//URL 為瓦片數據服務器地址
imageryProvider : new Cesium.OpenStreetMapImageryProvider({
url : ‘//a.tile.openstreetmap.org/’
})
/* targetFrameRate:1,sceneMode:Cesium.SceneMode.SCENE2D,
imageryProvider:new Cesium.WebMapServiceImageryProvider(),
mapProjection : new Cesium.WebMercatorProjection() */
});
/**
*創建模型entity,加載gltf文件
*@id 模型ID
*@url 3d模型URL路徑
*@height 高度
*@lon 模型所在經度
*@lat 模型所在緯度
**/
function createModel(id,url,height,lon,lat){
//刪除視圖上所有的實體
//viewer.entities.removeAll();
//實體的位置(經度、緯度、)
var position = Cesium.Cartesian3.fromDegrees(lon, lat, height);
var heading = Cesium.Math.toRadians(0);
var pitch = Cesium.Math.toRadians(0.0);
var roll = 0.0;
var orientation = Cesium.Transforms.headingPitchRollQuaternion(position, heading, pitch, roll);
var entity = viewer.entities.add({
id:id,
//coordinates : rectangle,
fill : false,
outline : true,
outlineColor : Cesium.Color.WHITE,
name : url,
position : position,
orientation : orientation,
model : {
uri : url,
//minimumPixelSize : 100,
maximumScale : 20000
}
});
//viewer.trackedEntity = entity;
return entity;
}
viewer.entities.removeAll();
//地面
createModel(‘ground’,’ModelData/zhulou.gltf’,0,112.226923,32.138933);
在html的body標簽中添加<div id="cesiumContainer"></div>
運行的效果圖如下
參考資料
http://www.zhiwenli.com/wordpress/?p=294
https://blog.gmem.cc/cesium-study-note
http://blog.csdn.net/l491453302/article/details/46766909
http://cesiumjs.org/