# 添加 3D Tiles，并調整位置 ## 3D Tiles 是什么 3DTiles數據集是cesium小組AnalyticlGraphics與2016年3月定義的一種數據集，3DTiles數據集以分塊、分級渲染，將大數據量三維數據以分塊，分層的形式組織起來，可以大量減輕瀏覽器和GPU的負擔是一個優秀的，并且格式公開的數據格式。 3D Tiles將用于流式傳輸3D內容，包括建筑物，樹木，點云和矢量數據。 參考 [官網 3dtiles 介紹](https://cesium.com/blog/2015/08/10/introducing-3d-tiles/) ## 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. 計算偏移量 官方示例 [3D Tiles Adjust Height](http://localhost:8080/Apps/Sandcastle/index.html?src=3D%20Tiles%20Adjust%20Height.html&label=3D%20Tiles) 一步到位 ``` //方法二，直接調用函數，調整高度,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](https://gitee.com/HQCode/Cesium-test/tree/master) >旋轉參考 ``` Cesium.knockout.getObservable(viewModel, 'rotatex').subscribe(function(rotatex) { var mx = Cesium.Matrix3.fromRotationX(Cesium.Math.toRadians(rotatex)); tileset.modelMatrix = Cesium.Matrix4.fromRotationTranslation(mx); }); ``` **Cesium學習交流群:593764057(滿),476893082**