Cesium.js 載入3D模型
一、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
相關推薦
Cesium.js 載入3D模型
一、Cesuimjs介紹Cesiunjs是一套GIS行業中進行地圖渲染的js庫,該庫使用的WebGL進行地圖渲染。並且結合HTML5進行相應,從而實現3D中渲染地圖。本篇文章則介紹如何將字尾名為max的檔案載入到Cesiumjs中去。二、載入過程因為cesium只支援GLTF
使用Cesium.js載入3D模型
最近專案中用到室外三維模型與室內三維地圖互動,室外三維模型的載入我們採用了cesium js來實現,在使用的過程中遇到了許多的問題,閒暇之餘將其實現及遇到的問題記錄下來,以備將來再用到時少走彎路。 一、開發環境準備 1、下載cesium js cesiu
cesium導入3D模型(obj轉gltf)
出現 移動 mark 簡單 批處理 -s default 發現 pri cesium中支持載入3D模型,不過只支持gltf格式。gltf是khronos組織(起草OpenGL標準的那家)定義的一種交換格式,用於互聯網或移動設備上展現3d內容,充分支持opengl,webgl
OpenGL ES 載入3D模型
前面繪製的矩形、立方體確實確實讓人看煩了,並且實際生活中的物體是非常複雜的,我們不可能像前面哪樣指定頂點來繪製,因此本篇部落格就說明通過OpenGL ES載入一個3D模型。這樣複雜物體的設計工作就可以交給專業的設計師來做了,進行3D建模的工具比如3dmax、maya等。 設計師通過這些軟
three.js載入obj模型
直接上js程式碼吧。我寫了挺多註釋。 <canvas id="scene" width="890px" height="500px"> <script> /* http://mamboleoo.be/learnThree/ */ var
ThreeJS載入3D模型
效果: 程式碼: <!doctype html> <html> <head> <meta charset="utf-8"/> <title>Bunny</title> <style>body{backgro
cesium js學習一載入三維模型
最近專案中用到室外三維模型與室內三維地圖互動,室外三維模型的載入我們採用了cesium js來實現,在使用的過程中遇到了許多的問題,閒暇之餘將其實現及遇到的問題記錄下來,以備將來再用到時少走彎路。 一、開發環境準備 1、下載cesium js cesium
Cesium: 3D 模型
轉:https://blog.csdn.net/UmGsoil/article/details/74572877 Cesium支援3D模型,包括關鍵幀動畫,面板的改變還有單個節點的選擇等,Cesium還提供了了一個基於網路的工具,將COLLADA模型轉換為glTF,方便和優化模型新增 還記得
Cesium.js學習第三天(模型展示)
var viewer = new Cesium.Viewer('cs');viewer.scene.primitives.add(Cesium.Model.fromGltf({ url : '/Cesium-1.51/Specs/Data/Models/WEB3DQuantizedAttribute
cesium載入飛機模型,entity方式和primitive方式載入,縮放至模型處
<!DOCTYPE html> <html lang="en"> <head> <!-- Use correct character set. --> <meta charset="utf-8"> <!-- T
【three.js : 3D】【load】threejs:3D模型匯入問題
轉載:threejs:3D模型匯入問題 想想複雜的模型就交給3D設計師進行創作,而我們開發時只需引入模型檔案,是不是很美滋滋? 當然,如果你時間充裕,又對模型創作感興趣,那你確實可以花時間好好學習3D建模軟體的使用,這樣以後就可以自己建立所需模型,由自己匯出與匯入模型檔案。
【Three.js:3D模型】各種模型簡單介紹
轉載:3D模型彙總----骨骼模型 3D模型的格式有很多,每個公司或軟體都可以自己定義自己的格式,或公開或不公開。如max,obj, x(微軟),fbx(被Autodesk收購),dae,md2(Quake2),ms3d(MilkShap3D),mdl(魔獸3
【Three.js:3D模型】常用建模軟體
轉載:常見的3D列印檔案格式及常用的軟體 常用建模軟體之一:3Dsmax ;最常見的3D建模軟體,廣泛應用於廣告、影視、工業設計、建築設計、三維 動畫、多媒體制作、遊戲、輔助教學以及工程視覺化等領域。 支援開啟的格式有:max,drf,chr 支援儲存的格
【Three.js:3D模型】【轉載】OBJ檔案格式詳解
轉載:3D中的OBJ檔案格式詳解 常見到的*.obj檔案有兩種:第一種是基於COFF(Common Object File Format)格式的OBJ檔案(也稱目標檔案),這種格式用於編譯應用程式;第二種是Alias|Wavefront公司推出的OBJ模型檔案。本文對第二種ob
Cesium (四) 3D模型
3D模型 我們可以轉換、載入並且在Cesium中使用3D模型。Cesium支援glTF(一個新興的Web 3D模型工業標準)格式的3D模型,並且提供線上的 COLLADA - glTF轉換工具。Cesium針對3D模型支援關鍵幀動畫、面板、單獨節點選取等特性。 Ces
Cesium學習筆記(九):匯入3D模型(obj轉gltf)
在用cesium的過程中難免需要匯入別人做好的3D模型,這時候就需要將這些模型轉成gltf格式了 當然,官方也給了我們一個網頁版的轉換器,但是畢竟是網頁版的,效率極其低下,檔案還不能太大,所以我們就需要一個格式轉換器了 現在只支援obj和dae轉gltf
【H5 3D應用開發】 Three.js 播放json模型動畫並切換動畫(一)
1、匯入Js模型 var loader = new THREE.JSONLoader(true); //JSONLoader構造傳入true,即showStatus=ture(顯示載入進度)
在Three.js中重新設定3D模型的中心點
最近有個新想法,要在網頁上展示3D重建的模型(obj + mtl 格式),並且可以拖拽縮放。 實施過程中發現模型的中心點是偏離到模型外部的,經過查閱Three.js資料發現兩個關鍵函式 geometry.computeBoundingBox();geometry.cent
WebGL three.js學習筆記 載入外部模型以及Tween.js動畫
WebGL three.js學習筆記 載入外部模型以及Tween.js動畫 本文的程式實現了載入外部stl格式的模型,以及學習瞭如何把載入的模型變為一個粒子系統,並使用Tween.js對該粒子系統進行動畫設定 模型動畫demo演示(網頁載入速度可能會比較慢) demo地址:https://nsytsqdtn.
本機上使用Three.js載入紋理
apach 效果 級別 材質 have 協議 files panel amp 怎樣載入紋理 // 首先, 創建一個紋理 var mapUrl = "../images/molumen_small_funny_angry_monster.jpg"; var map = T