Cesium中关于3D瓦片的加载、平移、旋转

3D瓦片的加载

(1)利用Cesium中Cesium3DTileset.fromUrl加载瓦片,参数是options,包括可见性、最大屏幕空间误差等,这个函数返回一个Promise,因此最好利用await关键字实现同步。

tileset = await Cesium.Cesium3DTileset.fromUrl(url, {
    maximumScreenSpaceError: 2, 
    maximumNumberOfLoadedTiles: 1000,
    debugShowBoundingVolume: false,
    debugFreezeFrame: false,
    refineToVisible: Cesium.defaultValue(false, !0),
    ...
  })

(2)将瓦片通过Primitive的方式加载到视图中

viewer.scene.primitives.add(tileset)

(3)对瓦片进行从局部坐标系到世界坐标的转换

var position = tileset.boundingsphere.center;
var transform = Cesium.Transforms.eastNorthUpToFixedFrame(position);
tileset._root.transform = transform;

平移

在Cesium中实现平移有两种情况,第一种情况,假设你知道在世界坐标系下平移后的目标位置,我们设为b,从目标a到目标b的平移,通过矢量相减得到由a指向b的向量,这里得到的平移向量实际上是世界坐标系下的,因此当向量转为齐次坐标下的四维平移矩阵后,这个矩阵可以直接赋值给模型的modelmatrix。

const boundingSphere = titleset.boundingSphere;
const offset = Cesium.Cartesian3.fromDegrees(x, y, z);
const translation = Cesium.Cartesian3.subtract(offset, boundingSphere.center, new Cesium.Cartesian3());
tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation);

第二种情况,假设你不知道平移后的目标位置,你只知道模型朝着当前的东南西北哪个方向去移动。首先获取以当前模型位置为原点的局部坐标系到世界坐标系的转换矩阵,然后根据局部坐标系的xyz(东北天)进行移动,由于这里的平移是在局部坐标系下的,因此需要将平移量与坐标系转换矩阵进行左乘,得到在世界坐标系下的平移终点。现在已知在世界坐标系下平移后的目标位置,那么就又回到了第一种情况。

const tileset_center = tileset.boundingSphere.center;
const frompoint_to_world_matrix = Cesium.Transforms.eastNorthUpToFixedFrame(tileset_center);
//以模型中心为原点的局部坐标系下向东\北\天移动x,y,z的分量
const local_translation = new Cesium.Cartesian3(x, y, z); 
const result = new Cesium.Cartesian3(0,0,0);
//局部坐标系到世界坐标系的转换矩阵左乘平移向量得到世界坐标系下的平移终点
Cesium.Matrix4.multiplyByPoint(frompoint_to_world_matrix, local_translation, result); 

//问题回到了第一种情况
const translation = Cesium.Cartesian3.subtract(result, boundingSphere.center, new Cesium.Cartesian3());
tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation);

上述问题从下图看就是知道红色向量,和绿色向量,实现从红色到蓝色的平移
在这里插入图片描述

旋转

模型的旋转会根据旋转中心的不同而不同
(1)模型绕地心旋转
如果是绕地心旋转,不用考虑局部坐标系变换的问题,直接使用Cesium中Cesium.Matrix3.fromRotationX(),再通过Cesium.Matrix4.fromRotationTranslation或者Cesium.Matrix4.fromRotation构建齐次坐标系的旋转矩阵赋给modelmatrix,这就是绕世界坐标系下的xyz轴旋转。

//以绕x轴旋转为例
var x = Cesium.Matrix3.fromRotationX(Cesium.Math.toRadians(rotateX));
//三维矩阵转四维齐次矩阵
var rotationX = Cesium.Matrix4.fromRotation(mx);
tileset._root.transform = rotationX

在三维转四维的时候也可以用Cesium.Matrix4.fromRotationTranslation,这个函数既可以接受matrix3的旋转矩阵,还可以接受一个cartesian3的平移矩阵,不过平移参数是可选的(optional)。
(2)模型绕本身旋转
这里的本身通常是模型的几何中心点,对于三维瓦片而言就是瓦片的boundingsphere.center,旋转的方法和绕地心旋转类似,只是最后得到的旋转矩阵需要与坐标系转换矩阵相乘

//还是以绕x轴为例
var x = Cesium.Matrix3.fromRotationX(Cesium.Math.toRadians(0));
var rotationX = Cesium.Matrix4.fromRotation(mx);
var position = tileset.boundingSphere.center;
var transform = Cesium.Transforms.eastNorthUpToFixedFrame(position);
Cesium.Matrix4.multiply(transform, rotationX, transform);
tileset._root.transform = transform;
  • 4
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
### 回答1: Cesium是一款基于Web的地图可视化工具,可实现3D-Tiles平移旋转贴地。借助Cesium的强大功能,用户可以在网页上进行3D场景的实现和交互,并支持对场景进行平移旋转、缩放等操作。下面就简单介绍一下cesium实现3D-Tiles平移旋转贴地的方法。 首先,我们需要创建一个Cesium的场景。在创建场景时,我们需要指定场景地图的位置和缩放级别,以及添加3D-Tiles数据源。同时,为了实现贴地效果,我们需要通过Cesium的TerrainProvider来获取地形数据,并将其设置为场景的地形。 接下来,我们需要对3D-Tiles进行平移旋转操作。通过Cesium的Camera类的方法,我们可以方便地实现场景的平移旋转。比如,我们可以通过设置相机的位置和朝向来实现场景的平移旋转。 最后,我们需要将3D-Tiles数据逐个加载出来,并将其添加到场景。通过Cesium提供的Entity和Primitive类,我们可以方便地将3D-Tiles数据添加到场景,并设置其位置、旋转、缩放等属性。同时,为了实现贴地效果,我们需要将3D-Tiles数据的高度信息与场景的地形高度信息进行融合,以确保3D-Tiles数据能够正确地贴地显示。 综上所述,通过以上方法,我们可以借助Cesium实现3D-Tiles的平移旋转和贴地显示,从而让用户能够在网页上体验到更加真实的3D场景交互体验。 ### 回答2: Cesium 作为一款优秀的地图和场景可视化工具,可以方便地实现 3D-Tiles 的平移旋转和贴地等操作,为用户呈现更加逼真、生动的场景。下面就其实现相关功能的方法进行简要介绍。 一、平移操作 在 Cesium 平移操作主要通过 Camera 移动实现。用户可以调用 viewer.camera 的各种属性和方法,对摄像机的位置、方向和速度等进行控制,实现平移操作。例如,可以通过设置 viewer.camera.setView() 方法,指定摄像机的位置和方向,使地图实现自由的平移和观察功能。 二、旋转操作 旋转操作主要通过修改 Camera 的方向和绕轴旋转角度实现。Cesium 提供了多个函数和工具类,方便用户操作和计算。例如,用户可以使用 computeHeadingPitchRoll() 方法获取当前 Camera 的方位角、俯仰角和滚动角,通过设置这些角度值实现旋转功能。 三、贴地操作 Cesium 的绝大部分功能都是基于 3D-Tiles 和高程数据实现的,这为贴地操作提供了方便的基础。用户可以通过调用 Cesium API 提供的高程服务和图层服务,将 3D-Tiles 相关图层贴在地面上,以实现更真实的地形效果。同时,用户也可以根据需要自定义材质纹理、高程纹理等,以适应复杂地形和场景的需求。 综上所述,Cesium 提供了丰富的 API 和工具类,方便用户实现 3D-Tiles 的平移旋转和贴地等功能。对于需要定制化的场景和需求,用户还可以根据自己的需求进行二次开发和扩展,以满足更多的应用需求。 ### 回答3: Cesium是一个用于构建虚拟地球应用程序的开源JavaScript库,它提供了一个基于WebGL的3D地图引擎。Cesium使得开发者可以使用JavaScript创建高度可视化的地球应用,这些应用可以在任何现代设备上运行,包括智能手机、平板电脑和桌面电脑。 其Cesium有一个叫做3D-Tiles的功能,它是一种开放的规范,用于存储、传输和渲染大规模的3D地理空间数据。3D-Tiles的主要特点是能够支持实时渲染大量的3D对象,这些对象可以是标准的模型或点云数据。 在3D-Tiles平移旋转和贴地是非常常见的功能。具体实现方法如下: 平移:在Cesium3D对象的平移操作可以通过修改相应的属性值来实现。例如,要平移一个3D-Tile,可以通过修改Tileset的位置属性来实现。具体来说,位置属性是一个Cartesian3类型的变量,它代表了Tileset的位置坐标。通过修改这个属性的X、Y、Z值,就可以实现Tileset平移旋转3D-Tiles的旋转操作可以通过将TilesetTile的方向向量进行操作来实现。在CesiumTileset的方向可以通过修改heading、pitch和roll三个属性来实现,每个属性控制了Tileset在x、y和z轴上的旋转角度。修改这些属性的值,就可以实现Tileset旋转操作。 贴地:Cesium3D对象可以通过设置heightOffset属性来实现贴地操作。具体来说,heightOffset属性代表了TilesetTile与地形表面之间的垂直距离。通过设置这个属性的值为负数,就可以让TilesetTile贴地显示,实现更为真实的效果。 综上所述,Cesium通过上述三种功能的实现,可以实现3D-Tiles的平移旋转和贴地操作。这些功能可以让应用程序的开发者更加便捷地操作3D场景,从而实现更出色的体验。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小卡规划

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值