cesium入门（三）添加3D Tiles 并调整位置 贴地

一、3D Tiles是什么

3D Tiles数据集以分块、分级渲染，将大数据量三维数据以分块、分层形式组织起来，可以大量减轻浏览器和GPU的负担，3D Tiles包括建筑物、树木、点云和矢量数据。

二、加载3D Tiles数据集

设计步骤：

创建平移矩阵加载模型数据设置相机视角调整高度

或者

创建平移矩阵（动态创建参数）加载模型数据设置相机视角

获取偏移量:

加载平移矩阵：

方法一:动态加载modelMatrix

创建平移矩阵的两种方法:

//创建平移矩阵方法一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);document.getElementById("result").innerText = "x:" + x + " y:" + y + " z:" + z;tileset.modelMatrix = m;

平移矩阵modelMatrix的获得是直接通过设置m矩阵，动态的调整x,y,z的大小，来得到不同的modelMatrix

var x = 360.0;var y = -920.0;var z = -820.0;// var x = 0;// var y = 0;// var z = 0;var 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 tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({url: 'Scene/testm3DTiles.json',maximumScreenSpaceError: 2,maximumNumberOfLoadedTiles: 1000,modelMatrix: m //方法一，动态修改modelMatrix}));

方法二，直接调用函数，调整高度,height表示物体离地面的高度

偏移矩阵modelMatrix可以由一个translation来确定，通过调整height来获得不同的modelMatrix，然后视角缩放到瓦片集的时候调用changeHeight函数。

function zoomToTileset() {boundingSphere = tileset.boundingSphere;viewer.camera.viewBoundingSphere(boundingSphere, new Cesium.HeadingPitchRange(0, -2.0, 0));viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);changeHeight(0);}// tileset数据加载好后，便缩放相机视角tileset.readyPromise.then(zoomToTileset);...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);}}));

数据的加载

var tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({url: 'Scene/testm3DTiles.json',maximumScreenSpaceError: 2,maximumNumberOfLoadedTiles: 1000,//modelMatrix: m }));

完整程序:3D Tiles