Cesium开发 3D tile的加载

最新推荐文章于 2025-03-14 10:32:38 发布

Zisen_66

最新推荐文章于 2025-03-14 10:32:38 发布

阅读量9.1k

点赞数 8

分类专栏： Cesium个人心得文章标签： Cesium 初学者开发

本文链接：https://blog.youkuaiyun.com/qq_41048063/article/details/88406900

版权

Cesium个人心得专栏收录该内容

5 篇文章

订阅专栏

Cesium 3D Tile是Cesium的一种特有的3D模型格式，其文件名后缀为.b3dm，而要在自己开发的平台上调用这些3D Tile，一般为通过后缀为.json格式的文件来调用.b3dm格式的3D Tile。

如博主的3D Tile为通过无人机倾斜摄影湄洲岛而获得的影像(.osgb)，转换为Cesium能够调用的格式（博主通过Cesiumlab进行转换，该软件为国内的一款专门为Cesium的3D Tile提供格式转换的软件，有收费也有免费，Cesiumlab免费提供的功能足以让大家学习使用。直通车：https://www.cesiumlab.com/）
在这里插入图片描述

从截图里可以看到每一个b3dm格式的文件都有其对应的json格式文件。

而上图红框标记出的则是多个部分3D Tile的整合，通常我们调用这个json文件即可

var tileset = new Cesium.Cesium3DTileset({ 
url: '../3D Tile text/tileset.json', //数据路径
maximumScreenSpaceError: 2, //最大屏幕空间误差
maximumNumberOfLoadedTiles: 1000, //最大加载瓦片个数
modelMatrix: m //转移矩阵
});

以上是调用3D Tile的代码，需要注意的是

> modeMatrix:m

这串代码，里面的

m（自定义变量）

是3D Tile的转移矩阵，该矩阵的作用是通过x，y，z三个轴的数值修改来修改3D Tile的位置，因为3D Tile虽然本身自带坐标，但有时还是会和不同坐标系的地图产生偏差，所以我们需要转移矩阵来进行3D Tile位置的调整。具体如下（两种方式）：

一：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 translation=Cesium.Cartesian3.fromArray([x, y, z]);
    m= Cesium.Matrix4.fromTranslation(translation);

我们可以直接对x，y，z进行修改，如将其修改为（另一种方式同理）

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,
      1.0, 2.0, 3.0, 1.0
    ]);

注意该数值需要不断的调整来确定3D Tile和底图是否贴合，以及位置是否正确（为了便于确定每次修改后3D Tile改变的位置可以通过一段代码直接将视角锁定3D Tile的位置）

var boundingSphere = null;
function zoomToTileset() {
      boundingSphere = tileset.boundingSphere;
      viewer.camera.viewBoundingSphere(boundingSphere, new Cesium.HeadingPitchRange(0, -2.0, 0));
      viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);

    }
 tileset.readyPromise.then(zoomToTileset);

如上所示代码，在每次加载3D Tile的同时也会锁定其位置。

最后效果如下图：