Cesium中对Cesium.Cesium3DTileset模型进行偏移

Cesium中对Cesium.Cesium3DTileset模型进行偏移

3D Tiles 是将用于流式传输3D内容，包括建筑物，树木，点云，矢量数据。3DTiles 数据集以分块，分级渲染，将大数据量三维数据以分块，分层的形式组织起来，可以大量减轻浏览器和GPU的渲染压力。
但是很多时候，我们添加的3D Tiles 模型他的位置，并不是我们想要的位置。由于单个瓦片的位置信息是写到了数据中的(.b3dm 和对应的 json 文件中), 如果能整体调整加载后的 Tileset，就是最好的选择。

而 3D Tiles 的 modelMatrix 刚好可以实现更改位置的效果

2. 对3D Tiles 模型进行偏移

const translation = Cesium.Cartesion3.fromArray([x, y, z]);
// x: 就是我们要向相对他现在的位置偏移多少的X量
// y: 就是我们要向相对他现在的位置偏移多少的y量
// z: 就是我们要向相对他现在的位置偏移多少的z量

const m = Cesium.Matrix4.fromTranslation(translation);
// 然后我们将这个生成的矩阵，重新赋值给 3D tiles 的 _modelMatrix 就可以了
titleset.modelMatrix = m;

我们是可以通过改变他的模型矩阵(modelMatrix) 就可以修改一个模型的位置，这里可以参考《webgl 编程指南》中的内容

这里面说，一个三维场景中，要包含：视图矩阵，投影矩阵，模型矩阵。

视图矩阵 ： 规定了我们观察者，是从何角度（视角）来观察这个三维场景
投影矩阵： 因为我虽然我在描述一个三维场景，但是我们最终还是在一个二维屏幕上去展示的画面。
模型矩阵: 就包含了，这个模型的各种变换，平移，旋转，缩放。

这三个矩阵也有统称为: MVP矩阵

所以模型矩阵就是描述这个模型的平移，旋转，缩放的变换。

3. 如何将一个 3D Tiles 模型调整到指定的位置

const boundingSphere = titleset.boundingSphere;
// 获取这个3D Tiles的包围球
const offset = Cesium.Cartesian3.fromDegrees(116.416342, 39.920912, 300); // 目的位置
const translation = Cesium.Cartesian3.subtract(offset, boundingSphere.center, new Cesium.Cartesian3());
tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation);

4. 调整它的高度

let height = 300; // 新的高度
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);