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

添加 3D Tiles,并调整位置

3D Tiles 是什么

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

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

参考 官网 3dtiles 介绍

3D Tiles

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

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

数据的加载比较简单

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

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

这并不是我们想要的,我们希望拍摄的成果能贴到地面上,和地图能很好的融合在一起,类似这样

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

modelMatrix

通过查看API文档,我们发现Cesium3DTile里面有一个属性,可以更改位置(当然通过查看源码也可以查这个)


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

1.64版本旋转问题请看这里 Cesium实战(十九)解决新版本3DTile旋转缩放问题

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


        1. Cesium.Ion.defaultAccessToken="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJhMThlZGJlYi04OGJjLTRhZjMtYWU5Yy0zNTE3N2E2MzFiOTgiLCJpZCI6MjU5LCJzY29wZXMiOlsiYXNyIiwiZ2MiXSwiaWF0IjoxNTc1MjkzODg2fQ.9pV-L1TWD9wv-6XKiVXCR1LIGb-RSD-Ezs7JJkL_Lj0";
          var viewer = new Cesium.Viewer('cesiumContainer');

    1. var viewer = new Cesium.Viewer(‘cesiumContainer’,{
      imageryProvider: new Cesium.SingleTileImageryProvider({
      url: ‘../img/worldimage.jpg’
      }),
      baseLayerPicker:false,
      });
      可能从git上下载的代码依赖的Build版本有问题,给加上 baseLayerPicker:false, 就能显示。或者也可以给项目换一个新版本的Build

  1. 模型是放到里面去了,可是模型会随着旋转而改变位置,是因为模型放到地底下去了吗?这种情况咋解决呀

  2. 使用了changeHeight()方法后,后面添加矢量数据并设置ClassificationType属性为CESIUM_3D_TILE发现模型上没有叠加矢量图层,把changeHeight()方法注释掉就可以,可是模型又飘起来了,请教大神怎么破?

  3. 3Dtiles的数据是否需要GeoServer来进行数据的管理和发布?还是我们可以使用Cesium直接从服务器硬盘上来读取3D Tiles的数据

      1. Cesium.knockout.getObservable(viewModel, ‘height’).subscribe(function(height) {
        height = Number(height);
        if (isNaN(height)) {
        return;
        }
        var m = tileset.modelMatrix;
        var translation=Cesium.Cartesian3.fromArray([0, 0, height]);

        Cesium.Matrix4.multiplyByTranslation(m,translation,m);
        tileset.modelMatrix = m;
        });
        就是lesson3里的代码,用fromArray([0, 0, height]);模型会斜着走

      2. Cesium.knockout.getObservable(viewModel, ‘height’).subscribe(function(height) {
        height = Number(height);
        if (isNaN(height)) {
        return;
        }
        var m = tileset.modelMatrix;
        var translation=Cesium.Cartesian3.fromArray([0, 0, height]);

        Cesium.Matrix4.multiplyByTranslation(m,translation,m);
        tileset.modelMatrix = m;
        });
        就是lesson3里的代码,用fromArray([0, 0, height]);模型会斜着走

  4. 请教一下,我加载官方示例的模型后,只有地图底图,没有加载的建筑物,这是怎么回事啊

    1. 一般是用工具转的,contextcapture cesiumlab 之类的,文档格式都是开源的,你也可以自己写代码生成相关文件

  5. 您好,我想请问一下,我加载的3dtiles模型和我部署的离线高程不同步该怎么办呢?就是我在旋转的时候我的影像地图和高程移动了,但是模型不动。而且挺奇怪,如果不部署离线高程那模型是能随着cesium自带的地图和地形一起移动的。
    是不是我缺了哪行将两部分同时移动的代码呢?

  6. 您好,我看到沙盒示例里面添加3dtiles的url都是Cesium.IonResource.fromAssetId(),这个应该是内部数据,而且添加进去的建筑物就是每个高度都不同的。
    但是我这边自己用一个shp文件转换成3dtiles添加进去,发现所有的建筑都是一样的高度,但是点击之后返回的height属性中的值是正常的,我想问一下如何把模型按照实际高度拉起啊?

hiltns进行回复 取消回复

电子邮件地址不会被公开。 必填项已用*标注