添加 3D Tiles,并調整位置
3D Tiles 是什么
3DTiles數據集是cesium小組AnalyticlGraphics與2016年3月定義的一種數據集,3DTiles數據集以分塊、分級渲染,將大數據量三維數據以分塊,分層的形式組織起來,可以大量減輕瀏覽器和GPU的負擔是一個優秀的,并且格式公開的數據格式。
3D Tiles將用于流式傳輸3D內容,包括建筑物,樹木,點云和矢量數據。
3D Tiles
3D Tiles將用于流式傳輸3D內容,包括建筑物,樹木,點云和矢量數據。
contextCapture 可以將無人機成果轉換成Cesium支持的傾斜攝影成果,當前例子就是使用的這種成果。
數據的加載比較簡單
var tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
url: url, //數據路徑
maximumScreenSpaceError: 2, //最大的屏幕空間誤差
maximumNumberOfLoadedTiles: 1000, //最大加載瓦片個數
modelMatrix: m //形狀矩陣
}));
但是問題在于生成的數據不一定是落在地面上,有可能是浮在空中的,例如:
這并不是我們想要的,我們希望拍攝的成果能貼到地面上,和地圖能很好的融合在一起,類似這樣
由于單個瓦片的位置信息是寫到了數據中的(.b3dm和對應的json文件中),如果能整體調整加載后的tileset,就會是最好的選擇,這里就要提到本文的主角:
modelMatrix
通過查看API文檔,我們發現Cesium3DTile里面有一個屬性,可以更改位置(當然通過查看源碼也可以查這個)
transform : Matrix4 Scene/Cesium3DTile.js 88
The local transform of this tile
說明通過矩陣運算是可以調整整個數據的顯示位置的
以下說明矩陣平移的情況:
1. 自己獲取偏移量
參考《WebGl編程指南》的第三章第四章
Tx,Ty,Tz就是我們需要設置的 x,y,z方向上的平移距離
由于Cesium的矩陣是列主序的,所以這里寫成
//創建平移矩陣方法一
// m = Cesium.Matrix4.fromArray([
// 1.0, 0.0, 0.0, 0.0,
// 0.0, 1.0, 0.0, 0.0,
// 0.0, 0.0, 1.0, 0.0,
// x, y, z, 1.0
// ]);
//創建平移矩陣方法二
var translation=Cesium.Cartesian3.fromArray([x, y, z]);
m= Cesium.Matrix4.fromTranslation(translation);
//生效
tileset._modelMatrix = m;
這里我們只需要不斷的修改 x,y,z,就可以調整物體的位置了
獲取 x,y,z 之后,在加載3D Tiles 時將modelMatrix 設置成目標 x,y,z值,就完成了
2.計算偏移量
一步到位
//方法二,直接調用函數,調整高度,height表示物體離地面的高度
function changeHeight(height) {
height = Number(height);
if (isNaN(height)) {
return;
}
var cartographic = Cesium.Cartographic.fromCartesian(tileset.boundingSphere.center);
var surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, cartographic.height);
var offset = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude,height);
var translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3());
tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
}
參考代碼:lesson02
個人主頁 http://cesium.xin
Cesium學習交流群:593764057(滿),476893082