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);