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

一、3D Tiles是什么

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

二、加载3D Tiles数据集

设计步骤：

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

或者

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

获取偏移量:

加载平移矩阵：

方法一:动态加载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