cesiumjs模型,cesium 模型格式

本文目錄一覽：

• 1、Cesiumjs可以載入傾斜攝影的OSGB數據嗎
• 2、Cesium 3Dtiles模型多邊形裁剪簡單整理
• 3、Cesium的擴展工具包-EarthSDK使用指南1
• 4、影像載入篇：WebMapTileServiceImageryProvider
• 5、cesium 和 Three.js有什麼區別，以及二者與WebGL 的關係

Cesiumjs可以載入傾斜攝影的OSGB數據嗎

可以！

不過不是載入原始的OSGB格式的數據，必須經過轉換（OSGB2B3DM.exe），轉換後為b3dm格式，是cesium支持的切片模型載入的格式。

——————–cesium載入b3dm代碼——

var model=_teemo_scene.primitives.add(new Cesium.Cesium3DTileset({

id: o.id,

url: o.url,

maximumMemoryUsage:1024,//內存使用最大量

skipLevelOfDetail : true,//↓↓↓LOD優化項↓↓↓

baseScreenSpaceError : 1024,

skipScreenSpaceErrorFactor : 16,

skipLevels : 1,

immediatelyLoadDesiredLevelOfDetail : false,

loadSiblings : false,

cullWithChildrenBounds : true

}));

Cesium 3Dtiles模型多邊形裁剪簡單整理

快三年了，在寫了四篇文章，關於Cesium的基本都是水一下，不是不想寫，一是沒時間，二來確實比較懶，關於Cesium已經一年多沒有看過了，最多也就關注一下官網的更新內容，對於Cesium深入了解還真沒有下功夫。

最近公司業務調整，手頭的業務也停掉了，只剩下維護了，也沒有繼續待著的意義了，趁著換工作的空，整理一下以前抄過、請教過、寫過的一些東西吧，不確定能寫多少，就簡單記錄一下吧。

Ceisum本身有一個clipPlane可以進行裁剪，但是不支持多邊形裁剪，想要支持多邊形裁剪也要費一番功夫。

多邊形裁剪的主要原理：

一、構造裁剪多邊形；

二、將構造多邊形的定點歸化到模型局部坐標系，並獲取模型Rectangle，記錄並傳遞給片元著色器；

三、將多邊形渲染到到一張構造的紋理上，給多邊形一個繪製的顏色，並將紋理賦值給片元著色器；

四、在頂點著色器中把從attribute獲取到的定點傳遞給片元著色器，如

gl_Position = czm_projection*u_modelViewMatrix* viewPos; //投影矩陣*模型視圖矩陣*頂點坐標

中的viewPos.xyz;

五、在片元著色器中，根據（四）中傳遞過來的頂點，判定該頂點是否在（二）中的rectangle中，若在，則計算該頂點在（三）中紋理的uv坐標，用texture2D（texture，uv）獲取當前頂點的color值，若不為空，則繼續，若為空則discard並返回。

通過以上步驟就可以實現以多邊形為邊界的模型裁剪。

Cesium的擴展工具包-EarthSDK使用指南1

Cesium作為三維GIS和BIM應用的主力引擎，目前已經受到越來越多的開發者的青睞。這兩年筆者也一直做Cesium相關的開發工作，真切地感受到Cesium的強大，其豐富的API、豐富的示例為開發三維GIS/BIM應用提供了極大的便利。

為了進一步豐富Cesium的開發生態，我們把之前在Cesium基礎上開發的功能，以及大量的改良功能，封裝成若干個獨立的js包。這樣也避免開發者重複造輪子。對於大屏展示、C端替代等直接本地部署Cesium的應用場景，可以直接免費使用我們封裝的EarthSDK擴展包。

EarthSDK中主要包括XbsjEarth.js和XbsjCesium.js兩個js包。

XbsjCesium.js用來擴展Cesium所不具備的三維可視化功能，例如視頻融合、分析工具、模型壓平等。

XbsjEarth.js則主要目標在於封裝出更加易於使用的API介面，儘可能屏蔽掉前端開發工程師所不熟悉的圖形學、GIS相關內容。會在Cesium的基礎上封裝好一些複雜的交互操作，並提供極其簡單的API介面方便調用。

EarthSDK從前端開發者的角度考慮設計API，大部分類的屬性都是響應式設計，通過簡單操作即可監控相應的屬性變化，通過bind方便可以實現屬性的相互綁定。特別針對Vue的開發者，實現了和vue的響應式屬性的無縫融合。具體可以參考這篇文章的介紹： 三維應用的響應式設計探索 。

之前使用過ECharts的同學可能對ECharts的操作簡單印象深刻。ECharts相當於把大量的API轉成配置式，真正使用時，只需要通過setOptions來進行一個大JSON對象的配置，即可完成圖表的創建。

EarthSDK的API設計也是受ECharts的啟發，會盡量減少不需要的API，減輕開發者的記憶負擔。只需要通過一個大JSON配置，就可以完成整個場景的搭建。

而且，EarthSDK比ECharts更進一步，可以直接修改相應的屬性，即可完成三維場景的動態變化。而ECharts則需要不停地調用setOption來進行配置。以後的文章中會詳細說明此特性。

EarthSDK創建場景後，內置viewer和scene對象，用戶可以通過viewer或者scene來向場景中添加Cesium的原生對象，和調用所有原生的Cesium API函數。

為了更易於理解EarthSDK的使用，我們開發了一個樣常式序 XbsjEarthUI(這個程序也同時集成到了CesiumLab中)。此樣常式序已經開源放在Github和Gitee上，基於MIT協議，用戶可以任意修改。

XbsjEarthUI在github上的地址：

XbsjEarthUI在gitee上的地址：

EarthSDK可以載入百度地圖、高德地圖等三十多種地圖數據，並可以做到實時糾偏。

交通安防領域需要用到的視頻監控、視頻融合功能。可以將視頻映射到傾斜攝影、BIM模型上（3dtiles模型），視頻會覆蓋到非平面物體上，不會出現閃爍等現象。

針對模型位置、姿態進行編輯。方便進行多個模型數據組合使用。並且這裡的模型位置編輯可以很方便的在全球任意位置拖放。

結合CesiumLab數據生產，使用EarthSDK調整數據後期亮度，可以做出較好的特效。方便進行大屏展示。

可以指定模型數據顯示在某一個視口，方便進行方案對比等操作。

Cesium的地面本身不能做到透明顯示，我們進行改進，使得透明度可以實時調節。

動態實現視域分析效果。

可以對路徑進行編輯，編輯好的路徑，可以用於控制相機的漫遊，也可以控制物體的移動。

對原始Cesium的標籤效果進行改進，並可以使用類似html5標籤增加onClick屬性，來自動執行自定義操作。

影像載入篇：WebMapTileServiceImageryProvider

WebMapTileServiceImageryProvider是用來載入Web Map Tile Service (WMTS) 服務,下面簡要說明下WMTS服務吧。

WMTS 1.0.0 支持三種實現模型：

WMTS 1.0.0 定義了 GetCapabilities、GetTile、GetFeatureInfo 3個操作

可以結合圖2和圖3，理解每個參數的意思，對接的需要注意 tileMatrixLabels 和 tilingScheme

其他參數:

1.clock以及time:可參考Cesium官方示例

2.rectangle:默認全球範圍，可根據能力文檔裡面的BoundingBox進行設置

cesium 和 Three.js有什麼區別，以及二者與WebGL 的關係

二者都是基於WebGL技術開發的js庫

Threejs受眾面比較廣，是封裝了webgl的一些底層用法，讓初學者更容易上手；例如繪製一個立方體，使用webgl原生api可能要寫50行代碼，包括構建坐標點，頂點組織、著色器等信息；在threejs裡面可能只要一句代碼就可以構建(實際上也是調用webgl原生api)，只是做了更大粒度的封裝

Cesium受眾面相對較小，是Gis相關的，也是基於WebGL開發的，它主要是三維地球相關的js庫，可以展示二維地圖服務(百度高德)、傾斜攝影模型；還可以在上面做一些三維分析，可以參考