cesium编程入门(六)添加 3D Tiles,并调整位置,贴地

添加 3D Tiles,并调整位置

3D Tiles 是什么

3DTiles数据集是cesium小组AnalyticlGraphics与2016年3月定义的一种数据集,3DTiles数据集以分块、分级渲染,将大数据量三维数据以分块,分层的形式组织起来,能够大量减轻浏览器和GPU的负担是一个优秀的,而且格式公开的数据格式。html

3D Tiles将用于流式传输3D内容,包括建筑物,树木,点云和矢量数据。git

参考 官网 3dtiles 介绍编程

3D Tiles

3D Tiles将用于流式传输3D内容,包括建筑物,树木,点云和矢量数据。json

contextCapture 能够将无人机成果转换成Cesium支持的倾斜摄影成果,当前例子就是使用的这种成果。浏览器

数据的加载比较简单less

var tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
    url: url,  //数据路径  
    maximumScreenSpaceError: 2,        //最大的屏幕空间偏差
    maximumNumberOfLoadedTiles: 1000,  //最大加载瓦片个数
    modelMatrix: m //形状矩阵
}));

可是问题在于生成的数据不必定是落在地面上,有多是浮在空中的,例如:函数

这并非咱们想要的,咱们但愿拍摄的成果能贴到地面上,和地图能很好的融合在一块儿,相似这样学习

因为单个瓦片的位置信息是写到了数据中的(.b3dm和对应的json文件中),若是能总体调整加载后的tileset,就会是最好的选择,这里就要提到本文的主角:大数据

modelMatrix

经过查看API文档,咱们发现Cesium3DTile里面有一个属性,能够更改位置(固然经过查看源码也能够查这个)this

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

一步到位

//方法二,直接调用函数,调整高度,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

我的主页 http://cesium.xin Cesium学习交流群:593764057

相关文章
相关标签/搜索